Android的9-Patch图应该怎么用

1. 简介

9-Patch这种图形对应于Android中的NinePatchDrawable类型

A resizeable bitmap, with stretchable areas that you define. This type of image is defined in a .png file with a special format.

NinePatchDrawable | Android Developers (google.cn)

依据官方文档的介绍，能够知道这是一个能够拉伸的位图，而且详细的拉伸区域能够由开发者自定义

1.1. 特色

• 9-Patch图形是规范的PNG格式的图片，包括额外的1像素用作边框
• 有必要运用.9.png的扩展名保存到项意图res/drawable/目录下
• 分为可拉伸区域和静态区域
• 定义可选可制作部分

2. 东西运用（Android Studio 内置的东西）

创立可调整巨细的位图（9-Patch 文件） | Android 开发者 | Android Developers (google.cn)

咱们经常见到的一种场景，就是像一些聊天对话框的处理

你想要的作用可能是这样

但是把png直接怼进去，然后各种玄学加padding、margin摆方位，其实得到的仅仅这样
写起来既不优雅，看起来又很将就
四角被拉伸变形内容的方位又不规整，搞不好还堆出一串谜一般的距离

其实，分析一下，会发现咱们的痛点在于需求处理图形的一部分需求坚持形状，一同又要答应内容形成的形变这样的问题，这便是9-Patch大显神通的当地

2.1. 预备素材

首要，将原始的.png图片转换为它对应的9-Patch图片

这将以原图形为模板，创立对应的9-Patch图片

对应会生成一个扩展名为.9.png的图片

也将其放在drawable目录下，本来的图能够删了

双击翻开9-Patch图片看到的是这样一个界面，这便是Android Studio内置的9-Patch东西的作业区，接下来需求在这里进行操作

2.2. 作业区运用

作业区首要分为左右两块区域，左边区域用作编辑和制作，也是咱们首要进行操作的区域
右侧区域首要预览图像进行水平竖直拉伸后形变的作用

2.2.1. 可拉伸区域

运用9-Patch能够关于图片指定可拉伸区域和静态区域
可拉伸区域是咱们答应发生变形的区域，能够在水平缓笔直方向上进行区域的调整 首要，前面提到过，9-Patch的图形在外边框有1像素黑边，也就是上下左右一共4条黑边，如果需求设置可拉伸区域，会用到上侧和左边的黑边

能够看到，水平方向上从两边进行拖拽，挑选顶部的黑线操作，会有一个矩形覆盖住，而在网格的顶部有一条1像素的黑线对应咱们覆盖的规模，矩形盖住的区域就是表明答应缩放的内容，现在表明水平拉伸两边的圆角会坚持形状（数值不会，由于刚刚只指定了水平方向）

对照预览右侧水平拉伸的作用图，黑线区域未覆盖圆角区域，则圆角在拉伸中得以坚持本来的形状

接下来，运用类似的手法在笔直的方向上进行操作，这次挑选左边的黑线操作

现在能够看到在顶部和左边对应都有1像素黑线，二者交叉的规模就是终究确认下来的可拉伸规模，除此以外的区域会坚持本来的形状

预览一下，拉伸的作用，笔直方向的形变仍然能够坚持圆角

水平缓笔直一同拉伸仍然会坚持圆角

这便对应了咱们的预期，勾选“Show patches”能够查看到红色区域正好就是终究的可拉伸区域

2.2.2. 内容填充规模

如果不加设置，运用这张图作为背景，运用TextView去填充文字，仍然会形成文字直接从左上角的空白处开端填充的状况

勾选“Show Content”，能够看到紫色区域是内容答应填充的规模，初始状态对应的就是整张图片的矩形区域

接下来，运用刚刚剩余的底部和右侧的黑线操控内容答应填充的规模，操作方法和先前差不多，这次就一次完成了

同样是运用水平与笔直方向的交叉部分作为指定区域，现在再次勾选“Show Content”，明显区域只有图形内部的部分了

现在把它作为TextView的背景，测试一下作用

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:background="@drawable/bg_msg"
    android:text="Hello World"
    android:textSize="36sp">
</TextView>

是不是成功出现在了中心方位

3. 实际运用

在简略了解了9-Patch图片的一些根底操作和运用后，能够试着将对话气泡做成咱们想要的姿态

通常状况下，咱们的需求是红框的区域不变，以及之前的四个圆角

接下来，拖动边，确认可拉伸的规模

依据左边和右侧的线确认出可拉伸的规模，为图中红色区域

对应到右侧预览图，红框区域并未变形

接下来，组织一下内容可用区域，依据右侧和底部的黑线确认，为蓝框区域

在右侧图上预览一下

接着像之前相同，放到TextView的背景中，修正内容

能够发现，四周的圆角和底部的三角坚持住形状，而其他其余能够拉伸，这也就达到了终究的意图

可制作对象概览 | Android 开发者 | Android Developers (google.cn)