我們經常看到聊天介面有各種佈局顯示，例如微信，網上也很多寫相關的文章，這裡值寫一個簡單的demo，先上一張圖看下效果

效果圖就如圖片右側，接下來我們看下demo怎麼實現多種Item的載入。

這裡還是使用listview，也可以使用其他開源的控制元件如PullToRefreshListView，RecycleView等。

看一下主介面的xml檔案：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android
 
:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
    <FrameLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="2">
        <SurfaceView
android:id="@+id/surface"
android:layout_width="fill_parent"
 
android:layout_height="fill_parent" />
        <ImageButton
android:id="@+id/take_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:background="@drawable/take_pic_selector" />
        <ImageView
android:id="@+id/smallptoto"
 
android:layout_width="100dip"
android:layout_height="100dip"
/>
    </FrameLayout>
    <RelativeLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1.0"
>
        <ListView
android:id="@+id/deal_talk_list"
android:layout_above="@+id/send_ll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:cacheColorHint="#00000000"
android:clipToPadding="false"
android:divider="@android:color/white"
android:background="#ffffff"
android:dividerHeight="0.5dp"
android:fadingEdge="none"
android:fastScrollEnabled="false"
android:footerDividersEnabled="true"
android:headerDividersEnabled="false"
android:scrollbarStyle="outsideOverlay"
android:smoothScrollbar="true" />
        <RelativeLayout
android:id="@+id/send_ll"
android:background="#ffffff"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
>
            <EditText
android:id="@+id/edit_send"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="@android:color/background_dark"
android:layout_toLeftOf="@+id/send"
android:maxLines="4"
android:scrollbars="vertical"
android:textSize="12sp"
/>
            <Button android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="@drawable/bg_item_select"
android:textSize="12sp"
android:textColor="@android:color/background_dark"
android:text="傳送"/>
        </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

主介面裡面主要是顯示資料，這裡做了一個簡單操作，點擊發送的按鈕每次往listView中新增一個TalkBean，然後重新整理資料，沒點選一次往左邊新增一條資料，再點選往右邊新增一條，如此往復。看下onClick方法：

public void onClick(View v) {
    num++;
    switch (v.getId())
    {
        case  R.id.send:
            TalkBean talkBean=new TalkBean();
talkBean.talk_content=edit.getText().toString();
            if(true) {
                talkBean.user_no = "xxnan";
talkBean.isLeft=false;
}else
{
                talkBean.user_no = "jack";
talkBean.isLeft=true;
}
            list.add(talkBean);
myAdapter.seList(list);//做重新整理
        break;
}
    deal_talk_list.setSelection(list.size()-1);
edit.setText("");
}

然後主要是看下listview的adapter，這裡我們自定義一個Adapter繼承BaseAdapter：

/**
 * Created by xxnan on 2016/6/30.
 */
public class MyAdapter extends BaseAdapter {
    private Context mContext;
    private  List<TalkBean> mlist;
    private LayoutInflater inflater;
    public MyAdapter(Context applicationContext, List<TalkBean> list) {
        mContext=applicationContext;
mlist=list;
inflater=LayoutInflater.from(mContext);
}

    @Override
public int getItemViewType(int position) {
        if(mlist.get(position).isLeft)
            return 0;
        else
        return 1;
}

    @Override
public int getCount() {
        return mlist.size();
}

    @Override
public Object getItem(int position) {
        return mlist.get(position);
}

    @Override
public long getItemId(int position) {
        return position;
}
    @Override
public int getViewTypeCount() {
        return 2;
}
    public void seList( List<TalkBean> list)
    {
        mlist=list;
notifyDataSetChanged();
}
    @Override
public View getView(int position, View convertView, ViewGroup parent) {
        TalkleftHolder talkleftHolder=null;
TalkrightHolder talkrightHolder=null;
TalkBean bean=mlist.get(position);
        int type=getItemViewType(position);
        if(convertView==null)
        {
            switch (type){
                case 0:
                    convertView =inflater.inflate(R.layout.talk_left_item,null);
talkleftHolder=new TalkleftHolder();
talkleftHolder.leftcontent=(Button)convertView.findViewById(R.id.talk_data_left_tv);
talkleftHolder.lefttalkname=(TextView) convertView.findViewById(R.id.talk_name_tv);
talkleftHolder.leftcontent.setText(bean.talk_content);
talkleftHolder.lefttalkname.setText(bean.user_name);
convertView.setTag(talkleftHolder);
                    break;
                case  1:
                    convertView =inflater.inflate(R.layout.talk_right_item,null);
talkrightHolder=new TalkrightHolder();
talkrightHolder.rightcontent=(Button)convertView.findViewById(R.id.talk_data_right_tv);
talkrightHolder.righttalkname=(TextView) convertView.findViewById(R.id.talk_myself_tv);
talkrightHolder.rightcontent.setText(bean.talk_content);
talkrightHolder.righttalkname.setText(bean.user_name);
convertView.setTag(talkrightHolder);
                    break;
                default:
                    break;
}

        }else
{
            switch (type){
                case 0:
                    talkleftHolder=(TalkleftHolder) convertView.getTag();
talkleftHolder.leftcontent.setText(bean.talk_content);
talkleftHolder.lefttalkname.setText(bean.user_no);
                    break;
                case  1:
                    talkrightHolder=(TalkrightHolder)convertView.getTag();
talkrightHolder.rightcontent.setText(bean.talk_content);
talkrightHolder.righttalkname.setText(bean.user_no);
                    break;
                default:
                    break;
}
        }
        return convertView;
}
    static class TalkleftHolder{
        private Button leftcontent;
        private TextView lefttalkname;
}
   static class TalkrightHolder{
        private Button  rightcontent;
        private TextView righttalkname;
}
}

getItemViewType方法判斷是左邊還是右邊，

getViewTypeCount() 有多少中佈局

convertView不為null則根據type獲取Tag顯示聊天內容和名稱。

當然我們還可以新增更多的佈局型別，也可以做的和微信一樣漂亮，如果有意願可以加以完善。

程式碼下載：https://github.com/xxnan/LiaoTianActivity