Android第一行代码——快速入门 Kotlin 编程（4.7 编写界面的最佳实践）

目录

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 所示。

图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 所示。

图4.40        气泡被均匀拉伸的效果

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

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

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

图4.41        创建 9-Patch 图片的对话框

        这里保持默认文件名就可以了，其实就相当于创建了一张以9.png 为后缀的同名图片，点击“Ok” 完成保存。这时Android Studio 会显示如 图4.42 所示的编辑界面。 

图4.42        9-Patch 图片的编辑界面

        我们可以在图片的 4 个边框绘制一个个的小黑点，在上边框和左边框绘制的部分表示当图片需要 拉伸时就拉伸黑点标记的区域，在下边框和右边框绘制的部分表示内容允许被放置的区域。使 用鼠标在图片的边缘拖动就可以进行绘制了，按住 Shift 键拖动可以进行擦除。绘制完成后效果 如 图4.43 所示。 

图4.43        绘制完成后的 message_left 图片