聊天布局的设计其实有讲究的,如果你写的好,那么你在适配器中的代码就可以少写,如果你的布局没写好,那么你的适配器的逻辑将会非常复杂.
写布局有几个要素:
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中写的逻辑就少了.