目录

4.7        编写界面的最佳实践

4.7.1        制作 9—Patch 图片

4.7.2        编写精美的聊天界面

---

4.7        编写界面的最佳实践

        既然已经学习了那么多 UI 开发的知识，是时候实战一下了。这次我们要综合运用前面所学的大量内容来编写出一个较为复杂且相当美观的聊天界面，你准备好了吗？要先创建一个 UIBestPractice 项目才算准备好了哦。

4.7.1        制作 9—Patch 图片

        在实战正式开始之前，我们需要先学习一下如何制作 9-Patch 图片。你之前可能没有听说过这个名词，它是一种被特殊处理过的 png 图片，能够指定哪些区域可以被拉伸、哪些区域不可以。

        那么 9-Patch 图片到底有什么实际作用呢？我们还是通过一个例子来看一下吧。首先在 UIBestPractice 项目中放置一张气泡样式的图片 message_lef t.png （资源下载地址见前 言），如图4.39 所示。

        我们将这张图片设置为 LinearLayout 的背景图片，修改 activity_main.xml 中的代码，如下所 示： 

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/message_left"
    tools:context=".MainActivity">

</LinearLayout>

        这里将 LinearLayout 的宽度指定为 match_parent，将它的背景图设置为 message_left。 现在运行程序，效果如 图4.40 所示。

        可以看到，由于 message_left 的宽度不足以填满整个屏幕的宽度，整张图片被均匀地拉伸 了！这种效果非常差，用户肯定是不能容忍的，这时就可以使用 9-Patch 图片来进行改善。

        制作 9-Patch 图片其实并不复杂，只要掌握好规则就行了，那么现在我们就来学习一下。

         在 Android Studio 中，我们可以将任png 类型的图片制作9-Patch 图片。首先对着 message_left.png 图片右击→Create 9-P atch file ，会弹出如 图4.41 所示的对话框。