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)