Android 即时聊天布局解析

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010316858/article/details/49736075

    聊天布局的设计其实有讲究的,如果你写的好,那么你在适配器中的代码就可以少写,如果你的布局没写好,那么你的适配器的逻辑将会非常复杂.

    写布局有几个要素:

    1.命名.如果控件功能一样,那么把名字命名一样.为了保证在适配器中复用的时候不用去找不同的ID.

    2.控件个数.除了发送消息的控件多于接受.因为发送有多种状态需要展示给用户.

    3.有动画的记得一定要增加Tag,防止复用的时候错乱.

    按照这两种就可以实现自己定义的布局,这样适配器可以少写很多逻辑,其中需要用的一些.9.png的技术,读者可以自行学习.


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

    <include layout="@layout/chat_item_top_time" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">


        <com.softtanck.imchat.view.imageview.CircleImageView
            android:id="@+id/chat_iv_head"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/tmp_head_2" />

        <TextView
            android:id="@+id/chat_tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@id/chat_iv_head"
            android:text="我是名字"
            android:textColor="@android:color/darker_gray" />

        <TextView
            android:id="@+id/chat_tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/chat_tv_name"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@id/chat_iv_head"
            android:background="@drawable/bg_left_chat_message"
            android:clickable="true"
            android:focusable="true"
            android:gravity="left|center"
            android:lineSpacingExtra="2dp"
            android:maxWidth="225.0dip"
            android:minHeight="30dip"
            android:textColor="#ff000000"
            android:textSize="15sp" />

    </RelativeLayout>

</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="match_parent"
    android:orientation="vertical">

    <include layout="@layout/chat_item_top_time" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_10dp_size">

        <com.softtanck.imchat.view.imageview.CircleImageView
            android:id="@+id/chat_iv_head"
            android:layout_width="@dimen/default_head_50dp_size"
            android:layout_height="@dimen/default_head_50dp_size"
            android:layout_alignParentRight="true"
            android:src="@drawable/tmp_head_1" />

        <TextView
            android:id="@+id/chat_tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/chat_iv_head"
            android:layout_marginRight="@dimen/default_5dp_size"
            android:layout_marginTop="20dp"
            android:layout_toLeftOf="@id/chat_iv_head"
            android:background="@drawable/bg_right_chat_message"
            android:clickable="true"
            android:focusable="true"
            android:gravity="center|left"
            android:lineSpacingExtra="2dp"
            android:maxWidth="225.0dip"
            android:minHeight="30.0dip"
            android:textColor="#ff000000"
            android:textSize="@dimen/content_size_15sp" />

        <ImageView
            android:id="@+id/chat_iv_state"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignTop="@id/chat_tv_content"
            android:layout_marginRight="5dp"
            android:layout_marginTop="10dp"
            android:layout_toLeftOf="@id/chat_tv_content"
            android:src="@drawable/msg_state_failed_resend"
            android:visibility="gone" />

        <ProgressBar
            android:id="@+id/chat_pb"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignTop="@id/chat_tv_content"
            android:layout_marginRight="5dp"
            android:layout_marginTop="10dp"
            android:layout_toLeftOf="@id/chat_tv_content" />

    </RelativeLayout>

</LinearLayout>

    上面两个例子仅仅是举例如何编写自定义的ITEM让自己的聊天界面更加好.

    下面是输入框,输入框的布局其实并不复杂,主要是隐藏和显示可能稍微复杂一些,需要自己去封装了一个InputHelper,这样可以在Activity中写的逻辑就少了.


猜你喜欢

转载自blog.csdn.net/u010316858/article/details/49736075