关于九宫格 - 学院 - CHINAUI.com 优艾网 - 中国人机界面设计门户网站
您的位置:首页 >> 学院 >> 方法理论 >> 关于九宫格
关于九宫格
来源:个人博客 作者:jjying 发布时间:2008-11-19
Iconfans上有朋友问起WB皮肤中的图片怎么实现在各种尺寸下不变形,随手写了一点关于九宫格的原理,希望对不知道的朋友有所帮助,早就了解的就忽略吧~  :D

很多程序界面中所用到的图形元素都支持九宫格,只要设置好上下左右的Margin值(有各种叫法,SkinStudio中以前叫Sizing Margin,现在叫Painting Margin),利用好九宫格就能用一张图片适应各种尺寸而不至于变形。

比如我做的这个任务栏,完整的图片是这样的:
 


假设在程序里设置Margin Left为66(蓝线处),Margin Right为6(红线处)
 


设置完毕之后当用到这个图片要进行尺寸变化的时候,蓝线左侧和红线右侧区域将会完整保留不动,而只变化中间的那块区域,而中间则可以自由设置成平铺或者拉伸以达成各种效果,这里因为背景有网格纹理,所以适用平铺的方式:
 


对于按钮等更复杂的,垂直和水平方向都需要适应不同尺寸的情况,只是在左和右的基础上再增加上和下的margin值,道理是一样的。
相关阅读
推荐文章
热点文章