安卓UI设计中“点九”图制作方法

跑者豹子

很多学UI设计的朋友都听说过做Android的界面设计需要制作“点九”图，什么是“点九”图？为什么要做“点九”图呢？在这篇文章跟大家聊聊Android设计中的所谓的“点九”图。

什么是点九？
“点九”是Android平台的应用软件里的一种独有的图片形式，文件扩展名为：.9.png。下面以一个按钮为例，其实就是把它分成了9个部分，有四个角、四条边，和中间的区域。



做九图的原因和方法
原因是九图能很轻松的横向和纵向拉伸，并且能够轻松的控制一个按钮的文字显示区域的大小，方便软件开发工程师的使用。以下面例子来说：



1号黑色条表示图片横向拉伸时，只按照这条黑条及向下覆盖的区域拉伸
2号黑色条表示图片纵向拉伸时，只按照这条黑条及向右覆盖的区域拉伸
3号黑色条向左覆盖的区域表示图片纵向显示内容的区域，纵向拉伸后，这个区域高度决定内容的高度
4号黑色条向上覆盖的区域表示图片横向显示内容的区域，横向拉伸后，这个区域宽度决定内容的宽度

需要注意的是黑条必须只有1像素的高度，并且颜色必须为：#000000，透明度100%

没有被黑条覆盖的区域是不会发生改变的的，当图片四角为弧形的时候，当图片被任意拉伸时，四角的弧形都不会发生改变。大倾角输送带，耐高温输送带，橡胶坝

最后我们保存为web格式即可，就是我们所谓的切图，Android切图和IOS切图方法都是通用的，只不过每个系统需要保存的图片尺寸要求有一些不同点。理论背的再熟不去实践，很快就会忘记，UI设计为软件体验而生，软件为帮助用户解决问题而生，多学习，多参与实战项目才是提高自己的唯一出路。