关于九宫格
Nov 13 , 2008 • 理论教程 • 1 Comments
Iconfans上有朋友问起WB皮肤中的图片怎么实现在各种尺寸下不变形，随手写了一点关于九宫格的原理，希望对不知道的朋友有所帮助，早就了解的就忽略吧～ :D
很多程序界面中所用到的图形元素都支持九宫格，只要设置好上下左右的Margin值（有各种叫法，SkinStudio中以前叫Sizing Margin，现在叫Painting Margin），利用好九宫格就能用一张图片适应各种尺寸而不至于变形。
比如我做的这个任务栏，完整的图片是这样的：
假设在程序里设置Margin Left为66（蓝线处），Margin Right为6（红线处）
设置完毕之后当用到这个图片要进行尺寸变化的时候，蓝线左侧和红线右侧区域将会完整保留不动，而只变化中间的那块区域，而中间则可以自由设置成平铺或者拉伸以达成各种效果，这里因为背景有网格纹理，所以适用平铺的方式：
对于按钮等更复杂的，垂直和水平方向都需要适应不同尺寸的情况，只是在左和右的基础上再增加上和下的margin值，道理是一样的。
很多程序界面中所用到的图形元素都支持九宫格，只要设置好上下左右的Margin值（有各种叫法，SkinStudio中以前叫Sizing Margin，现在叫Painting Margin），利用好九宫格就能用一张图片适应各种尺寸而不至于变形。
比如我做的这个任务栏，完整的图片是这样的：
假设在程序里设置Margin Left为66（蓝线处），Margin Right为6（红线处）
设置完毕之后当用到这个图片要进行尺寸变化的时候，蓝线左侧和红线右侧区域将会完整保留不动，而只变化中间的那块区域，而中间则可以自由设置成平铺或者拉伸以达成各种效果，这里因为背景有网格纹理，所以适用平铺的方式：
对于按钮等更复杂的，垂直和水平方向都需要适应不同尺寸的情况，只是在左和右的基础上再增加上和下的margin值，道理是一样的。
Share it!