Android技能-点九图的制做

安卓开发者必备技能之-点九图的制做

前言

不少安卓开发者以为UI制做都是美工的事情，本身只须要完成控件的摆放和功能的实现。可是不少时候，在咱们本身写一些小应用或者小Demo的时候，并不会有个美工在咱们身边，而点九图之于咱们安卓开发者来讲再常见不过了，因此这个技能咱们掌握了也是很是实用的。如下博文只是带你们入门使用点九图，不敢在美工设计师面前班门弄斧，大神请直接略过。

点九图

随着智能手机的发展,咱们的应用须要适应不一样屏幕尺寸的手机，同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不一样而改变显示的方向,在界面改变方向后,界面上的图形会由于长宽的变化而产生拉伸,形成图形的失真变形。

而点九（即.9），是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png，正是为了解决咱们的图片在不一样尺寸屏幕上显示失真而应运而生的一种格式。

<center></center>

<center>普通拉伸和点九拉伸效果对比</center>

<!-- more -->

通过对比，很明显，使用点九后，仍能保留图像的渐变质感，和圆角的精细度。

因此，使用.9图的意义就是为了从本身.png格式的图片中选画出四条线，这四条线相互交错构成了九个部分(这就是叫作点九图的缘由)，而后咱们的内容只能在其中重复的那个区域显示，而咱们的图片在拉伸过程当中只有显示内容的部分被拉伸，从而使得咱们图片的边缘部分获得了很好的保真效果。

工具

1. Android Studio (Android Studio自带制做点九图功能)
2. Draw9path(PC端能够直接下载使用)
3. NinePng(一个安卓应用，使用简单，去手机商店直接搜索就有了)

制做.9图

在Android Studio下制做

1.打开AS，将你要制做点九图的.png图片放到工程目录的drawable文件夹下（例如我准备了一张word.png），右键，选择 Create 9-Patch file

2.而后会产生一个同名的以.9.png为后缀的文件。

3.双击打开 **.9.png图片

4.咱们能够看到有四条线，就是咱们上面所说到的构成九个区域的四条线，那么咱们就能够直接经过拖拉着四条线选择咱们所须要的区域便可，完成后在图片能够看到左和上有两条黑线，而把鼠标放到中间，就能够看到咱们图片实际拉伸的区域。

5.拉伸右边的预览框，能够看到咱们的.9图在不一样拉伸状况下的效果。

在Draw9path下制做

若是你不是安卓开发者，只是一个美工人员，那么Draw9Path是一个不错的选择。

1.安装完成Draw9Path以后打开 draw9patch.bat,而后按 Ctrl+O 打开一张们须要制做的图片。

2.将鼠标放到中心区域，能够看到图片已经被打上马赛克，可是四周边缘留下空白的地方，这些地方就是让咱们划线用的。

3.而后咱们按住鼠标，在咱们须要划线的区域划线便可(按住shift+鼠标左键为删除点，不支持Ctrl+Z撤销功能)。

• 点击右上角Show bad patches来查看咱们画的线是否对齐。
• 点击下边的Show Content显示拉伸的后的内容区域。
• 点击下边的Show Patches显示当前图片的内容区域。

4.按Ctrl + S保存图片。

在NinePng下制做

网上已经有详细教程，此处就不给具体的教程了。

详看： 关于点九图的介绍及其制做

运行效果

参考资料

• App自适应draw9patch不失真背景 -by 谦虚的天下

• 关于点九图的介绍及其制做