Android 九宫格文件夹实现 android 九宫格图片

转载

背景

最近看了会书，然后有个知识点还是比较重要的。也对同学们的开发是有帮助的，这里简单的记录下。

普通图片和九宫格图片拉伸效果对比如下图示：

Android 九宫格文件夹实现 android 九宫格图片_拉伸

从上面对比图中可看出，当普通图片拉伸后，背景图会变得模糊（左右两边的边缘线既变宽又变模糊了）；但是用的九宫格图片拉伸后却不会。

为了解决图片过度拉伸后显示模糊的问题，Android 专门设计了点九图片。

点九图片的扩展名是 png，文件名后常带有 “.9” 字样。因为把一张图片划分成了3×3 的九宫格区域，所以得名点九图片，也叫九宫格图片。

如果背景是一个 shape 图形，其 stroke 节点的 width 属性已经设置了具体的像素值（如1dp），那么无论该 shape 图形被拉伸到多大，描边宽度始终都是1dp。

点九图片的实现原理与 shape 类似，即拉伸图形时，只对内部进行拉伸，不对边缘做拉伸操作。

studio 已经集成了制作点九图片的功能，如下图示：

Android 九宫格文件夹实现 android 九宫格图片_点九图片_02

并在随后的对话框中单击 “OK” 按钮。接着 drawable 目录就会出现一个名为“btn.9.png” 的图片文件，双击该文件，右侧弹出点九图片的加工窗口如下图示：

Android 九宫格文件夹实现 android 九宫格图片_Android 九宫格文件夹实现_03

左侧窗口是图片加工区域，右侧窗口是图片预览区域，从上到下依次是纵向拉伸预览、横向拉伸预览、未拉伸预览。

在左侧窗口图片四周的马赛克处单击会出现一个黑点，把黑点左右或上下拖动会拖出一段黑线，不同方向上的黑线表示不同的效果。

Android 九宫格文件夹实现 android 九宫格图片_android_04

Android 九宫格文件夹实现 android 九宫格图片_点九图片_05

界面下边的黑线指的是该图片作为控件背景时，控件内部的文字左右边界只能放在黑线区域内。这里 Horizontal Padding 的效果就相当于 android:paddingLeft 与 android:paddingRight。如下图：

Android 九宫格文件夹实现 android 九宫格图片_Android 九宫格文件夹实现_06

界面右边的黑线指的是该图片作为控件背景时，控件内部的文字上下边界只能放在黑线区域内。这里 Vertical Padding 的效果就相当于 android:paddingTop 与 android:paddingBottom。如下图：

在实际开发中，前两个属性使用的比较多，因为很多场景都要求拉伸图片时要保真。后两个属性一般用得不多，但若不知道，遇到问题还挺麻烦的。