Android聊天界面實現方式

最近心血來潮，打算實現一個很久之前就想實現的一個界面，就是聊天界面，當時覺得好高大上啊，完全不會啊，不過最近不小心找到了方法。

效果圖

本來是想上傳一張動態圖的，但是不知道怎麼回事，半天傳不上去，只好上傳一張靜態圖了。

效果解析：在底部輸入框裏面輸入文字信息，點擊左邊的按鈕，就會是左邊的消息發佈，
點擊右邊的按鈕，就是右邊發的消息，當消息發佈出去以後，新的消息會出現的最下面

實現方式

其實實現原理很簡單，真不知道當初我爲什麼沒有想到。
首先需要知道的是，這個界面是用的什麼佈局，佈局確定好了，基本就成功一半了，因爲在代碼部分的代碼真的很少很簡單。
首先是主界面，好吧，其實也就一個界面，消息顯示的區域主要是用的listview，下面2個按鈕一個輸入框就很好實現了。

佈局文件：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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="vertical"
    tools:context=".activity.MainActivity">

    <ListView
        android:divider="@null"
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"></ListView>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#898989" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_left"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_margin="5dp"
            android:background="@drawable/btn_float"
            android:text="左邊"
            android:textColor="#fff" />

        <EditText
            android:id="@+id/et_meg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/btn_right"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_margin="5dp"
            android:background="@drawable/btn_float"
            android:text="右邊"
            android:textColor="#fff" />

    </LinearLayout>


</LinearLayout>

這樣就能實現主界面的佈局。
之後就是listview的item佈局，剛開始還不知道怎麼寫，而且還遇到了一些小問題，不過這些小問題，後來都解決了
佈局文件：item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/boy" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="5dp"
                android:text="鳴人" />

        </LinearLayout>


        <TextView
            android:id="@+id/text_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@drawable/left"
            android:text="" />


    </LinearLayout>

    <LinearLayout
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="horizontal">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" />


        <TextView
            android:id="@+id/text_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@drawable/right"
            android:text="" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/girl" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="靜香" />

        </LinearLayout>


    </LinearLayout>


</RelativeLayout>

佈局文件有點長，直接給張圖片看清楚，相信你一定可以根據圖片寫出相應的佈局。

解析：將一個文字域和一個頭像放在一個線性佈局中，創建兩個線性佈局，一個在左一個在右，注意，此時這兩個線性佈局都是在同一行

既然是listview，當然少不了實體類和adapter
首先來實體類：MsgInfo
其實這個類只有兩個數據，一個是左邊的消息，一個是右邊的消息

	private String left_text;
    private String right_text;

用get和set方法封裝一下就好了。
記得別忘了構造方法：

	public MsgInfo(String left_text, String right_text) {
        this.left_text = left_text;
        this.right_text = right_text;
    }

接下來是adapter，我們重寫一個adapter繼承BaseAdapter類

public class ListviewAdapter extends BaseAdapter {

    private Context context;
    private List<MsgInfo> datas = new ArrayList<>();

    private ViewHolder viewHolder;
    
	//給adapter添加數據
    public void addDataToAdapter(MsgInfo e) {
        datas.add(e);
    }

    public ListviewAdapter(Context context) {
        this.context = context;
    }

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

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

    @Override
    public long getItemId(int position) {
        return position;
    }
    
	//使用viewholder來優化listview
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        if (convertView == null) {

            LayoutInflater inflater = LayoutInflater.from(context);
            convertView = inflater.inflate(R.layout.item, null);
            viewHolder = new ViewHolder(convertView);

            convertView.setTag(viewHolder);

        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        
		//獲取adapter中的數據
        String left = datas.get(position).getLeft_text();
        String right = datas.get(position).getRight_text();
		
		//如果數據爲空，則將數據設置給右邊，同時顯示右邊，隱藏左邊
        if (left == null) {
            viewHolder.text_right.setText(right);
            viewHolder.right.setVisibility(View.VISIBLE);
            viewHolder.left.setVisibility(View.INVISIBLE);
        }

		//與上一步相反
        if (right == null) {
            viewHolder.text_left.setText(left);
            viewHolder.left.setVisibility(View.VISIBLE);
            viewHolder.right.setVisibility(View.INVISIBLE);
        }

        return convertView;

    }

    public static class ViewHolder {
        public View rootView;
        public TextView text_left;
        public LinearLayout left;
        public TextView text_right;
        public LinearLayout right;

        public ViewHolder(View rootView) {
            this.rootView = rootView;
            this.text_left = (TextView) rootView.findViewById(R.id.text_left);
            this.left = (LinearLayout) rootView.findViewById(R.id.left);
            this.text_right = (TextView) rootView.findViewById(R.id.text_right);
            this.right = (LinearLayout) rootView.findViewById(R.id.right);
        }

    }
}

文件名：MainActivity
各種綁定控件之後，給兩個按鈕設置監聽事件：

Override
    public void onClick(View v) {

        String msg = et_meg.getText().toString().trim();

        switch (v.getId()) {
            case R.id.btn_left:
                adapter.addDataToAdapter(new MsgInfo(msg,null));
                adapter.notifyDataSetChanged();
                break;
            case R.id.btn_right:
                adapter.addDataToAdapter(new MsgInfo(null, msg));
                adapter.notifyDataSetChanged();
                break;
        }

        listview.smoothScrollToPosition(listview.getCount() - 1);

        et_meg.setText("");

    }

大功告成！接下來就開始享受鳴人和靜香的跨次元交流之旅吧（^ _ ^!）

注：item佈局中的textview的背景圖片爲點9圖片。

源碼下載：http://download.csdn.net/detail/it_xf/9525707