@toc

前言

在实际开发中经常遇到一种情况：用某张图片做控件背景，背景图片拉伸后导致显示变形。比如聊天窗口的气泡显示框，单纯的气泡图片不能自适应内容，导致文字或图片等超过框边界。又比如App的启动页放一张图片全屏显示，因为Android的机型屏幕尺寸、分辨率太多，导致这张图片在某些机型上显示图像变形。这时，9patch图片就派上用场了。9patch，又称".9"图片，与常规的图片相比，9patch格式的图片最大的特点就是能够最大程度的保证图片内容随着图片的拉伸不变形，这样就能适配各种屏幕分辨率的手机。

想来看一下实际对比效果。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/message_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@mipmap/bubble_bg"
        android:layout_marginTop="8dp"
        android:gravity="center_horizontal|end"
        android:maxWidth="280dp"
        android:paddingTop="18dp"
        android:paddingBottom="8dp"
        android:paddingLeft="14dp"
        android:paddingRight="20dp"
        android:textSize="18sp"
        android:textColor="@color/font_grey_l"
        android:text="的房价的看法佳都" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_gravity="right"
        android:background="@mipmap/bubble_bg"
        android:gravity="center_horizontal|end"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:paddingLeft="14dp"
        android:paddingRight="30dp">

        <ImageView
            android:id="@+id/message_image"
            android:layout_width="150dp"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/demo"/>
    </LinearLayout>
</LinearLayout>

这里有一个代表文本框的TextView和显示图片的布局都采用气泡图片做背景。代码设置了很多padding来保证内容不靠近四边框。

当动态改变文本的内容和图片的尺寸时，再看下显示效果：

看见，随着内容大小的动态变化，气泡北京图片也被拉伸了，比如小箭头，很不美观。其次，并不能将内容完全包含进去。对比一下使用.9的图片的效果：

这里我们甚至删除了之前设置的padding，可以看到，完美适应显示内容。

用图片查看器看下两张图片的不同：(右侧为.9图片)

可以看到点9图片的四周多了4条黑线。点9图片的奥秘就在这四条黑线上。它们能保证图片拉伸时，内容显示完全且不变形。

左边黑线：表示图片的纵向拉伸的区域顶部黑线：表示图片的横向拉伸的区域默认情况下，图片整体会纵向和横向全部拉伸。设定了拉伸区域后，发生拉伸时，只有指定的区域会拉伸变化，其他区域是不变的。这样就保证了图片主要区域的显示不变形。右边黑线:表示图片中的内容元素的纵向显示区域底部黑线:表示图片中的内容元素的横向显示区域默认情况下，图片中的内容元素会显示在背景图片内。但实际中，我们希望内容的显示是有要求的。比如上面的气泡背景，文字和图片应远离四周边框和尖角区域。这就是右边和底部标记黑线的作用。

好了，让我们进入主题，一步步来创建符合要求的点9图片吧。

创建编辑点9图片

Android Studio自带创建和编辑点9图片的功能。在需要创建点9的图片上右键：

选择Create 9-Patch file：

选择保存的路径和文件名。默认在原文件夹下创建同名的以.9.png结尾的文件。点击OK，点9图片就创建好了。双击该文件，就进入编辑页面了。左侧为编辑区域，右侧为预览区域，分别展示了横向、纵向以及整体拉伸的效果。

再说一下底部工具栏的作用。

Zoom:放大比例。默认100%。当编辑较小的图片或精确编辑图片时有用。 Patch scale:预览区域中横向、纵向以及整体拉伸效果的放大倍数。 Show content:勾选该选项，会展示内容的显示区域。用紫色表示。可以看到默认整个背景区域都会显示内容。

Show patches: 勾选该选项，会展示拉伸区域。用粉色表示。从下图可以看到默认整个背景区域都会拉伸。

Show bad patches: 勾选该选项，会展示不符合规范的拉伸线。有时，不符合规范的拉伸线会导致编译失败。

划重点来了：将鼠标浮动在图片的左侧区域，会自动在图片顶和底显示两条横线。将鼠标放到其中的一根线上，光标编程上下箭头时，直接点击，会绘制整个边框；拖动鼠标，就可以绘制或取消拉伸区域。

同理，就可以完成横线和纵向的拉伸区域绘制。完成后点击Show patches:

接着，我们再来绘制内容显示区域。这里应避开不规则边框，尽可能在气泡中央位置显示。

勾选Show content查看下预览效果。

这样就完成了点9图片的绘制。是不是很简单？之前一直在边框上拖来拖去，还很难拖中，很郁闷😒。

示例

再看个类似的例子。

用以上带模糊边框的图片做背景。里面放置若干控件。这里依次放入一个ImageView和一个TextView。布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="center_horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginTop="30dp"
        android:gravity="center_horizontal"
        android:paddingTop="15dp"
        android:paddingBottom="30dp"
        android:background="@mipmap/item_white_bg">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_personalcenteal"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:textSize="20sp"
            android:textColor="@color/colorPrimaryDark"
            android:text="功能模块"/>

    </LinearLayout>
</LinearLayout>