使用9Patch图片作为背景实现“气泡”聊天框

  有时候缩放整张图片的效果并不好。实际的情况是我们只想缩放图片中某个部分，这样才能保证按钮的视觉效果。为了实现只缩放图片中某个部分的效果，我们需要借助于9Patch图片来实现。最典型的用途就是聊天界面上的"气泡"对话框。
  9Patch图片是种特殊的PNG图片，这种图片以.9.png结尾，它在原始图片四周各添加一个宽度为1像素的线条，这4条线就决定了该图片的缩放规则、内容显示规则。如下图所示：

  左侧和上侧的直线共同决定了图片的缩放区域：以左边直线为左边界绘制矩形，它覆盖的区域可以在纵向上缩放；以上面直线为上边界绘制矩形，它覆盖的区域可以水平缩放；它们二者的交集可以在两个方向上缩放。

AndroidStudio集成了绘制9Patch图片的工具。使用AndroidStudio绘制9Patch图片的步骤：

1. 在AndroidStudio的项目导航视图中右击想要创建9Patch图片的PNG图片，在右键菜单中单击“Create9-patchfile”菜单项
2. 在弹出的对话框中为新建的9Patch图片输入文件名，然后单击“OK”按钮，即可创建个文件扩展名为.9.png的新文件
3. 双击新的9Patch图片，AndroidStudio将会使用9Patch绘制工具打开该图片
4. 在1像素周长的范围内单击左键即可绘制可拉伸区域和内容区域（可选）的线条，单击右键即可擦除之前绘制的线条。

在阿里矢量库中随便找一个聊天框图片，选择边界如下：

创建的xml文件代码如下：

<?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">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/chat_new"
        android:text="带文字的图片按钮aaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/chat"
        android:text="带文字的图片按钮aaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />

</LinearLayout>

显示结果如下：

可以看到图片背景按照我们设置的规则缩放成功了。

希望对你有所帮助，一起加油，共同进步!!!