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