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)

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

Android的9-Patch图应该怎么用

你想要的作用可能是这样

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

2.1. 预备素材

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

2.2. 作业区运用

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

Android的9-Patch图应该怎么用

2.2.1. 可拉伸区域

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

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

Android的9-Patch图应该怎么用

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

2.2.2. 内容填充规模

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

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

现在把它作为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>

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

Android的9-Patch图应该怎么用

3. 实际运用

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

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用

在右侧图上预览一下

Android的9-Patch图应该怎么用

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

Android的9-Patch图应该怎么用
Android的9-Patch图应该怎么用

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

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