android应用程序后台管理与界面设计 说说如何使用 Android UI 设计聊天界面

Nine-Patch 图片是一种被特殊处理的 png 图片，它能够指定哪些区域可以被拉伸而哪些区域不可以。android应用程序后台管理与界面设计

先准备一张气泡样式的图片 message_left.png：

我们把这张图片设置为 LinearLayout 的背景图片：

<?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="400dp"
    android:background="@drawable/message_left_small"
    >

</LinearLayout>

这样的展示效果，用户体验很差。

因此，我们需要制作 9-patch 的 png 图片。

在 Android Studio 中，右键选中要制作 9-patch 的 png 图片，在弹出的列表中选择 “Create 9-Patch file”：

在接下来的弹出框中，指定 9-patch 的 png 图片路径，注意要放在 drawable-xx 等类似的路径下，生成的图片名为 *.9.png：

通过拖拽，设置伸缩的不可变区域，即下图中圈出的黑色区段：

最后删除非 .9 的 png 图片，重新运行程序：

现在效果好多了吧O(∩_∩)O~

因为是聊天界面，因此会有接收与发送的消息框。我们还要按照上述的方法，再制作一张右侧消息框的 .9 png 图片：

在 app/build.gradle 中加入 RecyclerView 的依赖库：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.android.support:recyclerview-v7:24.2.1'
    testCompile 'junit:junit:4.12'
}

编写主界面：

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/msg"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/input"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="请输入"
            android:maxLines="2"
            />

        <Button
            android:id="@+id/send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发送"
            />

    </LinearLayout>

</LinearLayout>

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-87860-1.html