Android语言基础教程（145）Android Drawable资源范例之使用9-Patch图片实现不失真按钮背景：Android按钮变形记：9-Patch图片让你的背景自适应又不失真！

一、引言：一个让所有Android开发者泪奔的问题

嘿，Android开发者！你是不是曾经遇到过这样的情况？

你精心设计了一个漂亮的按钮背景，费了九牛二虎之力把它放到项目中，结果当按钮文本稍长一点，那个背景就拉伸得连亲妈都不认识了——边角失真、渐变错乱、阴影诡异……

别问我怎么知道的，每个Android开发的成长路上，总有几个夜晚是为这个问题熬的。

更可怕的是，当你尝试用传统的padding来解决时，你会发现不同分辨率的设备上效果完全不一样，要么文字挤在一起，要么空白大得能放下另一个按钮。

好在，Android团队早就预料到了这个痛点，并提供了一个优雅的解决方案——9-Patch图片！它还有一个可爱的名字：点9图。

二、什么是9-Patch图片？Android界的"橡皮泥图片"

2.1 初识9-Patch

简单来说，9-Patch是一种特殊的PNG格式图片，它在普通PNG图片的最外面一圈额外增加了1px的边框。这个边框不是用来装饰的，而是承载着重要的"使命"。

它为什么叫"9-Patch"？
因为它把一张图片分成了9个部分——4个角、4个边和1个中心。就像这样：

左上角     上边     右上角
左边       中心     右边
左下角     下边     右下角

四个角保持不变，四条边单向拉伸，中心部分双向拉伸。这样无论你怎么拉伸图片，边角都能保持原样，再也不会失真了！

2.2 9-Patch图片的工作原理

9-Patch图片通过四周那1px宽的黑线来传递"拉伸指令"：

这些黑线在最终的应用中是不会显示的，它们只是给Android系统的"暗号"。

举个栗子：假设你有一个圆角矩形按钮背景，你肯定希望只有中间部分被拉伸，而四个圆角保持不变。通过9-Patch，你可以精确指定只有中间水平方向和垂直方向的部分被拉伸，圆角部分保持原样。

三、准备工作：找对工具，事半功倍

3.1 找到你的"武器"——Draw9Patch工具

Android SDK中已经自带了一个专门制作9-Patch图片的工具，它就是Draw9Patch。你可以在Android SDK的安装目录下找到它：

[你的SDK路径]/tools/draw9patch.bat

双击运行它，你就会看到一个有点"复古"但十分实用的界面。

如果你是Android Studio用户，也有更现代的操作方式：直接右键普通的PNG图片，选择"Create 9-Patch file"，然后就可以在可视化编辑器中编辑了。

3.2 准备原始图片

首先，你需要一张普通的PNG图片作为基础。这里有一个重要建议：尽量使用足够大的原始图片，这样在制作时能有更多的操作空间。

假设我们有一个简单的按钮背景，是一个蓝色的圆角矩形，带有一点阴影和渐变效果。这就是我们要转换成9-Patch的原始素材。

四、手把手教学：制作你的第一张9-Patch图片

4.1 打开图片并定义拉伸区域

关键技巧：拉伸区域不一定是连续的，你可以定义多个拉伸区域。工具会用绿色高亮显示你定义的拉伸区域。

什么时候需要多个拉伸区域？
假设你的按钮背景中间有一个装饰性的分隔线，你希望这个分隔线在拉伸时保持原有粗细，那么你可以在分隔线的两侧分别定义拉伸区域，而不是一次性画一个长长的连续区域。

4.2 定义内容区域（可选但很重要）

什么是内容区域？ 它就是TextView（或其他视图）中内容（如文字）的放置区域。通过定义内容区域，你实际上是在隐式地定义padding。

为什么这很重要？ 因为通过内容区域定义的padding比在XML中定义padding更优雅、更准确！它能确保你的文字始终完美地显示在背景的合适位置。

4.3 保存并检查效果

点击File -> Save 9-patch，工具会自动为你的图片文件名加上".9.png"后缀。比如，如果你原来的文件是"button_bg.png"，保存后会变成"button_bg.9.png"。

注意：这个".9.png"后缀非常重要！Android系统靠它来识别这是一张9-Patch图片。

在保存前，你可以通过工具右侧的预览窗口查看拉伸效果，确保在不同大小下都能正常显示。

五、实战演练：在项目中使用9-Patch图片

5.1 将9-Patch图片放入项目

将制作好的".9.png"图片复制到你的Android项目的 res/drawable目录中。重要：必须放在drawable目录中，否则可能无法正常工作。

5.2 在布局文件中使用

现在，你可以在布局文件中像使用普通背景一样使用9-Patch图片了：

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="这是一个自适应按钮"
    android:background="@drawable/button_bg" />

注意，这里使用的是 android:background属性，而不是 android:src。9-Patch图片必须设置在background中才会生效，设置在ImageView的src中是无效的。

5.3 完整示例：创建一个自适应按钮

让我们来看一个完整的例子。假设我们有一个聊天界面，气泡背景需要随内容自适应：

<?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:padding="16dp"
    android:orientation="vertical">
 
    <!-- 接收的消息 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:background="@drawable/msg_in_bg"
        android:padding="12dp"
        android:text="你好，这是一个短消息"
        android:textColor="#000" />
 
    <!-- 发送的消息 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_gravity="end"
        android:background="@drawable/msg_out_bg"
        android:padding="12dp"
        android:text="你好，这是一个非常非常非常非常非常非常非常非常非常非常长的消息"
        android:textColor="#000" />
 
</LinearLayout>

在这个例子中， msg_in_bg.9.png和 msg_out_bg.9.png都是9-Patch图片，它们会根据文本内容自动调整大小，同时保持边角的完整性。

六、高级技巧与常见坑点

6.1 高级技巧

1. 非连续拉伸区域
如前所述，你可以在左边和上边定义多个不连续的拉伸区域。这在处理复杂背景时特别有用。

2. 使用内容区域替代padding
通过右下边的内容区域定义，你可以避免在XML中写死padding值，这样更灵活、更准确。

3. 为不同状态制作9-Patch
你可以为按钮的不同状态（按下、选中、禁用等）制作不同的9-Patch图片，然后通过StateListDrawable组合使用：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <nine-patch android:src="@drawable/button_pressed" />
    </item>
    <item>
        <nine-patch android:src="@drawable/button_normal" />
    </item>
</selector>

6.2 常见坑点及解决方案

坑点1：图片放在错误的目录
9-Patch图片必须放在 res/drawable目录中，如果放在 res/mipmap或者assets目录中，它将无法正常工作。

坑点2：在ImageView的src中使用
9-Patch图片设置在ImageView的src中是不会有效果的，必须设置在background中。

坑点3：原始图片太小
如果原始图片本身很小，而你在一个很大的控件中使用它，即使使用了9-Patch，也可能出现失真。解决方案是使用足够大的原始图片。

坑点4：黑线绘制错误
如果黑线绘制得不正确（比如不连续、太粗等），9-Patch图片可能无法正常工作。Draw9Patch工具会标记出可能的问题区域。

七、原理探秘：系统如何处理9-Patch图片

你可能好奇，Android系统是如何处理9-Patch图片的？其实，当系统检测到一个以".9.png"结尾的图片时，它会执行以下步骤：

这套机制确保了9-Patch图片的高效渲染，这也是为什么它比普通图片加XML padding的方式更优的原因。

八、实际应用场景：不只是按钮

虽然我们主要讨论了按钮背景，但9-Patch图片的应用远不止于此：

实际上，Android系统自身就大量使用了9-Patch图片。如果你解压任意一个ROM中的framework_res.apk文件，会发现里面有大量的".9.png"图片，用于按钮、解锁界面、下拉框、标题栏、Toast等。

九、总结

9-Patch图片是Android开发中一个简单却强大的工具，它解决了UI适配中的一个关键问题——背景失真。通过本文的学习，你应该已经掌握了：

记住：下次当你需要自适应背景时，不要再使用普通的PNG图片并指望padding能解决所有问题，试试9-Patch图片，它会让你的UI更加专业和精致！

注意：本文示例基于Android Studio开发环境，所有技巧均在真实项目中验证过。但不同版本的Android系统或开发环境可能存在细微差异，请根据实际情况调整。