关键词：android, 点9图, nine patch, .9, 9-patch,
Android 的 9-patch（点9）图，运用场景比较多。翻到了之前草稿箱里的记录，借着这次基于 Android 官方的 9-patch 修改器进行二次开发的双渠道（Windows+macOS）NinePatchEditor 的发布之际，再次给需求了解 9-patch 图的产品、运营和开发同学做一次具体介绍。
留意，大部分图片资料是旧版别修改器的资料内容（重新截图太耗时了，），仅功用按钮的方位略有改动，绝对不影响对功用的了解，各位看官切勿介意，咱们要点重视截图内的功用点。
想要重视后续更新和了解更多关于 Android 相关的内容，请重视我。
假如本文能帮到你，欢迎你点赞、谈论和收藏 ！
一、全体介绍
翻开 Android 自带的 NinePatch 图片制造工具，并且翻开上面的图片，如下：
最新版别的修改器的姿态：
（旧版修改器的姿态）
翻开图片后，在方位1（修改区）的当地，能够看到图片的周围多了1圈1像素巨细的通明的点，这便是咱们要进行NinePatch图片制造的当地。
- 方位1：修改区。 在这个区域来设置图片的“拉伸区域”和“内容区域”。 注：“拉伸区域”意思是哪个区域是能够进行拉伸的； “内容区域”，如一个Button、TextView，Button中有文字，则这些文字所在的区域即为内容区域。又如一个Linearlayout，这个布局里面的内容显现的当地也是内容区域。
- 方位2：拉伸预览区域。 这是模仿笔直拉伸、水平拉伸、笔直水平都拉伸的3种情况的预览图。从上图中可知，“Zoom”是100%，也便是原图的修改区的巨细是原图巨细，再看拉伸预览区域，笔直拉伸时，上下两条边的线条宽度被拉高了一倍，由于“Pathch scale”设置的是2x，也便是拉伸为本来的两倍，笔直拉伸后高度便是本来的两倍了，水平拉伸后则宽是本来的两倍了，两头都拉伸后则宽高都是本来的两倍。从上图可知，水平拉伸后，左右两条边的线条宽度比本来宽了一倍，而两头都拉伸的预览图可知4条边的线条宽度都被比本来宽了1倍。
- 方位3：Zoom – 修改区显现巨细的调整，假如修改区太小不好修改，则能够调整这儿把修改区扩大
- 方位4：Patch scale – 拉伸倍数，调整拉伸倍数能够便利的检查拉伸不同倍数后的作用
- 方位5：Show lock – 显现锁定的区域，即不行修改的区域
- 方位6：Show patches – 显现拉伸区域
- 方位7：Show content – 显现内容区域
- 方位8：显现运用提示信息
二、功用点详解
-
把修改区视图显现调大，如下：
-
为了便利检查拉伸后的作用也把拉伸比例调大一些：
-
显现不行修改区域，如下图，当把鼠标移到图片上时就会显现不行修改区域，即赤色框中的区域，实践中最外的赤色框是没有的，这儿加一个红框只是为了方面观看，从下图可看到红框外由一个像素巨细的通明线条围了起来，这条线条即咱们要修改的区域。
-
显现会被进行拉伸的区域，如下的粉赤色区域便是会被拉伸的当地，其他的当地将不会被拉伸，也便是说不论怎样拉伸，变的只是粉红的区域，其他的区域的形状什么的都不会产生改动：
注：关于会进行拉伸的区域许多人都是这么说的，其实应该用一种愈加精确的说法是“粉赤色区域包括粉赤色区域的前后左右的部分都是拉伸部分，其他的才是不会被拉伸的部分，我再加些边框后作用图如下：
上图中粉赤色区域，和它上下左右的4个蓝色框区域都是拉伸的区域，其他还有4个红框的区域则是一向坚持不变的区域。从这张图可看到总共有9个区域，所以称这样的图片为NinePatch图片。
- 显现内容区域，如下图中蓝色的区域即内容区域，如一个TextView设置了下面的图为布景，则文字显现的区域为下面的蓝色区域：
- 画黑线的快捷方法
如上图，把鼠标移到修改区的灰色区域，上、下、左、右都能够，如上图移到了上方的灰色区域，此刻看到了两条灰色线，拉动这两条灰色线即可画出黑线，如下：
如上图，拖动右边的线向左拖，发现左面主动出现了一条黑线，持续向左方向拖是逐渐的消除这条黑线，假如一向拖到与最左面的灰色线重合，则这一条黑线都被消除了，如下图：
常常的情况是咱们要自界说的画出黑色线，也便是能够从任何当地开始画黑色的线，方法也很简单，在灰色的当地按下鼠标开始拖动即可，如下：
如上图是从随意的一个方位按下鼠标向右拖动拖出来的一断黑色线。上、下、左、右四条边的黑色线都能够用相似的方法来画。当然了，也能够在通明的线上直接点或者拖动来画黑色线，如下：
如上图便是在通明的线上随意方位按下鼠标向右拖动，当松开鼠标时黑色线就出来了。
删去黑色线，前面说了一种删去黑色线的方法，也能够运用 Shift + 点击/拖动 来完成，如下：
- Bad Patches
三、制造NinePatch图片实战
3-1 制造拉伸区域
为了便利知道运用NinePatch图片带来的优点，这儿再运用另一张图片来进行解讲，如下：
有时发现翻开png图片后发现四周的通明区域不太规矩，不是说只会在原图形的周围多一像素的空间而已吗？这时拉动一下Zoom的比例的能够了，如下图：
这儿咱们要完成拉伸时线条的宽度不变，四个圆角不变。许多人在作用 NinePatch 图片时都是画一条一条的黑线，其实是他们没能够了解透 NinePatch 图片的制造，如这儿要达到拉伸时线条的宽度不变、四个转角不变，只需求点两个点就够了，如下：
从上图的拉伸预览图能够看到线条宽度没变，4个圆角也没有变。有了前面的理论就简单了解了，在进行水平拉伸时，拉伸的是笔直的那条线的区域，笔直线的两头不会被水平拉伸的，如下图红框是会被水平拉伸的区域，它的左右两头的区域将坚持不变：
相应的，笔直拉伸时拉伸的是水平的那条线的区域，这条线的上下两部分是不会被笔直拉伸，如下图中的赤色区域会被拉伸：
3-2 制造内容区域
假如图片只是拉伸的功用，上面的知识就够用了。制造内容区域是可选的，假如你没有这个需求就不需求制造内容区域。假如这个图片要用作某些容器的布景，如用作 TextView 的布景时，TextView 中的文字的方位应该是怎样的呢？ 如：公司要求这样：需求文字是靠矩形的底部对齐的，应该怎样制造符合这样要求的NinePatch图片呢？ 这儿仍是运用上图的基础上制造，如下：
如上图，在下方画了一条黑钱，则这条黑线就界说了红框这个区域，当然，上图中的红框、蓝框是我画上去的为了方面讲解。这样内容只会出现在红框中，而不会出现在它左右两头的蓝框中。从右边的拉伸预览图也能够看到作用，把“Show content”勾上，则拉伸预览图就能够看到蓝色的区域，这些区域便是文字出现的当地。
接着来设置文字靠矩形的底部对齐，其实这样说不太对，由于当内容小于NinePatch图片设置内容区域的高度时，内容就小于内容区域，那这时内容应该显现在内容区域的哪里呢，这时就要配合gravity来调整。NinePatch图片修改如下：
如上图在右边画了一条黑线，这条黑线偏下，它界说了内容在笔直方向的方位是偏下的，底部和右边这两条线的穿插部分，如上图的画了斜线的红框即为内容区域，文字将显现在这个区域。 其实这样了解内容区域是错误的，由于图片是会进行拉伸的，正确的了解应该是这样的：底部的黑线和右边的黑线是给内容设置padding，这样比较好了解，如上图设的内容设置用padding来了解如下图：
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/hello_text_bg"
android:text="@string/str_hello" />
作用图如下：
可看到字体的左右是有一些padding，而上下是方向的padding则是上方的比较大，看起来就像是文字在底部对齐一样。因而，NinePatch图片做的好，连TextView在布局中的padding设置都省了。
四、学习官方的事例
更多的NinePatch图片的制造比如，可检查AndroidSDK目录下的图片，如：sdk\platforms\android-19\data\res\drawable-ldpi，运用搜索查找NinePatch图片，然后看官网的图片都是怎样点这些黑线的，有什么值得学习的，为什么他人这么点？多看，关于了解NinePatch图片的制造一定大有帮助的，搜索结果如下图：
- 如用ps翻开这张图片： 扩大：
从这张图片能够看到左面、上边都点了两个黑点，他的目的是什么呢？通过上面的学习分析，它这便是设置了拉伸区域在图形中心的加号的四周，即不论怎样拉伸，图形中心的加号是不会变大、变形的，也便是不会产生改动的。又如下面的图是为了坚持中心的减号不被拉伸：
- 再比如
- 假如你看不理解某个 NinePatch 图片的目的，则能够把它仿制到你的 Android 项目中，然后运用它，看看是什么作用即可知其目的。如有一张这样的 NinePatch 图片：
你幻想不到运用它会是什么作用吧？这便是人家的高招，假如你不去看他人的，你自己就不会懂得像人家这样去制造NinePatch图片，所以要多看，如运用上图的NinePatch图片作用如下：
- 看下面两张这样的NinePatch图片：
它便是一条通明灰色的水平线，和一条黑色的笔直线，没有必要做成 NinePatch 啊，为什么呢？ 运用这条线看看什么作用，如下：
很经典的一条线，所以需求用到这条线时，咱们为何还要自己去制造呢，直接运用：android:background="@android:drawable/menu_separator"，这样做需求留意，或许在不同的版别这条线或许显现作用不一样。
这张便是保存发光的光晕不会被拉伸，拉伸的是中心白色的区域。文字内容也只会出现在白色区域。
这张是为了保存右边的箭头不被拉伸。
看着是个椭圆，运用后作用为：
- 再看看这些NinePatch图片的目的是什么？
这张图片也很高超，扩大镜永久不会被拉伸，水平方向的拉伸是顶部右边的那个点，关键是笔直拉伸了，这是左面的那个点，拉伸的是这个点，而这个点是通明的，所以笔直拉伸时不会对下面有色彩的图片的形状有影响。
- 再来看这张，彻底无法幻想运用后会是什么作用，只能实践运用去直观的看了：
用作TextView的布景后为：
这是scrollbar_handle_vertical.9.png，运用在imageView后为：
看上图NinePatch图片的两头明明是通明度比较高呀，可作用为什么是边线的色彩比较深？
- 还有这么小的NinePatch图片：
运用后的作用为：（真美！）
- 再看这个通明的NinePatch图片又有什么目的：
运用的作用为：
看了作用才理解其目的，便是图片就设置好了paddingLeft的，如下调用View的宽度后的作用：
不了解原理的人，以为下面的点便是内容区域，就会以为内容应该显现在图片的右边，实践上不是，跟据前面所学，下面的点是设置padding的，也便是paddingLeft是固定的矩离，如下图：
假如是这样的话，那paddingRight便是0，所以咱们在坚持长度不变的情况下添加文字，如下：
哈哈，证明了我的猜测是对的呀！！ 假如NinePatch图片真的是设置了paddingLeft的值的话，那我在代码中把paddingLeft设置为0，看看作用：
猜测是对的！学习只想是不行的，还要用实践去证明！！
- 再来看一张运用相同原理的图：
作用为：
这达到了 drawableRight 的作用，并且图片已经是和文字居中的。
看着像是个圆形，其实他它是个圆角矩形，真是想不到啊！做图的人太牛了！把图片的容量做到了最小，节省apk的巨细啊！
15.再来看这张又有什么高超之处呢？
不知道高超在哪里。但相信Google的人不会这么无聊的，肯定有特别的当地。
这个就一像素的色彩，愈加不理解其目的何在。 此刻想我起我曾经在面试时，一位技能官问我，在ListView中是运用图片做分隔线好仍是直接运用Shape图形好，技能官后来说是运用图片的好，由于Android的图形烘托机制不行好，假如直接运用Shape效率就会比较低、比较耗内存。这样能够解释为咱们尽量的运用图片，而不要直接运用代码来画图形。
这个便是为了图片的图形坚持不变，假如只是这样那在运用图片时用wrapcontent即可，它这样做又会带来什么优点？ 答：为了能够使布景图片习惯任何的控件巨细，并且坚持图形巨细不变。习惯巨细是为了使点击事件更简单产生，由于控件大的话点中的机率就会大。
五、有必要要知道的避坑点
9-patch 图与 WebP
留意，9-patch 图不能转换为 webp，有必要运用 png 格局。source：创建 WebP 图片
9-patch 图的每个边上的描点数量
9-patch 图片的左面框和上边框至少有一个描点，右边框和下边框则有且只有一段描点。
| 边框 | 描点数 |
|---|---|
| 左面框 | >=1 |
| 上边框 | >=1 |
| 右边框 | 非0，只是可为1 |
| 下边框 | 非0，只是可为1 |
左面框和上边框留白的当地，即告诉体系那里不进行处理，坚持原样。
假如有什么主张或者问题能够随时联系我，一起探讨学习：
- Github： likfe
- CSDN：他叫自己Mr.张
- ：cafeting
- 微博：cafeting
本文正在参与「金石方案」
