九宫格布局是指将界面划分为九个方形格子。在界面左右上下各四分之一的位置画横竖四条交叉的线(类似写一个写一个井字),将界面划分为 4 角 + 4 边 + 中间 共计 9 个格子,中间的方格最大,四角的方格最小。凡是控件哪侧的边在位于哪则的方格内则该边固定边距,例如控件的左侧边位于左侧的格子内则左边距固定,其余类推,使靠边的内容固定,中间的内容自由拉伸,缩放自然。
固定 | 自动拉伸 | 固定 |
---|---|---|
拉伸 | 自动拉伸 | 拉伸 |
固定 | 自动拉伸 | 固定 |
在 aardio 中无论是窗口控件的布局,还是控件贴图都经常会用到九宫格布局规则。
窗体上的所有控件都可以指定"固定边距"属性,每个控件都可以选择朝哪个方向固定。
最简单的方法是右键点窗体,然后在弹出菜单中点击"九宫格缩放布局"自动为所有控件设置"固定边距"属性。
"九宫格缩放布局" 的原理参考上面的九宫格,四角的控件固定,中间的控件根据他们所在的位置两端固定、或四端固定。
然后我们可以任意缩放窗口,所有控件就可以自动缩放并适应九宫格布局规则。
使用 plus 控件,可以非常方便地指定背景图像与前景图像,在贴图模式中选择 "expand" 模式就可以支持九宫格贴图,可以自定义九宫格在图像上的切割位置并实时预览效果。
九宫格贴图的规则仍然是四角固定、中间拉伸。例如我们制作一个按钮圆角背景图像,边框与圆角拉伸就会很难看,固定边框和圆角,中间的背景拉伸效果就会非常好。
参考: plus 控件背景与前景贴图
窗体的背景图像同样支持九宫格贴图,规则与用法同上。参考: 窗口背景贴图
专用于窗口背景贴图的 bk, bkplus 控件都支持九宫格贴图,这些控件本身也都支持九宫格布局。相当于我们可以在窗口的任何部分单独划分九宫格然后做背景贴图,或者说可以用 bk,bkplus 控件为其他控件方便地绘制背景。并且避免控件重叠的麻烦。 参考: Z 序:原理与优化
当然,九宫格中的每一个格子,如果加载的不是控件而是子窗口 - 那么任何一个格子又可以再次成为另外一个九宫格( 这在aardio中非常简单,拖一个custom控件到界面上,使用 winform.custome.loadForm 就可以加载一个子窗口到界面上了),所以我们把复杂的问题简单化:只要懂得如何实现一个最简单的九宫格就行了。