编写界面的最佳实践

编写界面的最佳实践

Tags: Android

摘要

编写界面的最佳实践

制作NinePatch图片

NinePatch图片以*.9.png结尾,和普通图片的区别是四周多了一个边框

NinePath图片需要特定的工具处理, “android-studio\sdk\tools\draw9patch.bat”
打开图片后如下所示.

如上图所示,左边那条黑色线代表图片垂直拉伸的区域,上边的那条黑色线代表水平拉伸区域,右边的黑色线代表内容绘制的垂直区域,下边的黑色线代表内容绘制的水平区域,右边和下边的线是可选的,左边和上边的线不能省略。

聊天界面制作

上面做了可以自动拉伸的图片,现在就方便做聊天界面了.
做好的两个图片放在drawable下 message_left.9.png,message_right.9.png

activity_main.xml

聊天主界面是一个listview,里面每一项是一个msg_item. 根据聊天信息类型判断是显示左侧还是显示右侧.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#d8e0e8"
    android:orientation="vertical">

    <ListView
        android:id="@+id/msg_list_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="#0000"></ListView>

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

        <EditText
            android:id="@+id/input_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Type somthing here"
            android:maxLines="2" />

        <Button
            android:id="@+id/send"
            android:layout_width="wrap_content"

            android:layout_height="wrap_content"
            android:text="Send" />
    </LinearLayout>
</LinearLayout>

msg_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:background="@drawable/message_left">

        <TextView
            android:id="@+id/left_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:textColor="#fff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/message_right">

        <TextView
            android:id="@+id/right_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp" />
    </LinearLayout>
</LinearLayout>

代码逻辑

自定义MsgAdapter,为listview中的每一项添加数据并绑定事件.

效果界面

完整代码

https://coding.net/u/javacore/p/android-study/git/tree/master/test3.7_chate_ui