Android開發之編寫精美的聊天界面

廢話少說，直接堆代碼，是看着Android第一行代碼練習的，大牛繞過，菜鳥勿噴

首先 編寫主界面，修改  activity_main.xml

<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 something 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.java

package com.example.testdssp;

public class Msg {

    public static final int TYPE_RECEIVED=0;

    public static final int TYPE_SENT=1;

    private String content;

    private int type;

    public Msg(String content,int type)

    {

        this.content=content;

        this.type=type;

    }

    public String getContent(){

        return content;

    }

    public int getType(){

         return type;

    }

}

編寫子項布局  msg_item.xml

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

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

        >

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

        >

        <TextView

            android:id="@+id/right_msg"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_margin="10dp"

            android:textColor="#fff"

            />

    </LinearLayout>

</LinearLayout>

建立ListView的擴充卡類，讓他繼承AraayAdapter，并将泛型指定為Msg

package com.example.testdssp;

import java.util.List;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.LinearLayout;

import android.widget.TextView;

public class MsgAdapter extends ArrayAdapter<Msg> {

    private int resourceId;

    public MsgAdapter(Context context,int textViewResourceId,List<Msg> objects)

    {

        super(context,textViewResourceId,objects);

        resourceId=textViewResourceId;

    }

    public View getView(int position,View convertView,ViewGroup parent)

    {

        Msg msg=getItem(position);

        View view;

        ViewHolder viewHolder;

        if(convertView==null)

        {

            view=LayoutInflater.from(getContext()).inflate(resourceId,null);

            viewHolder=new ViewHolder();

            viewHolder.leftLayout=(LinearLayout)view.findViewById(R.id.left_layout);

            viewHolder.rightLayout=(LinearLayout)view.findViewById(R.id.right_layout);

            viewHolder.leftMsg=(TextView)view.findViewById(R.id.left_msg);

            viewHolder.rightMsg=(TextView)view.findViewById(R.id.right_msg);

            view.setTag(viewHolder);

        }else

        {

            view=convertView;

            viewHolder=(ViewHolder)view.getTag();

        }

        if(msg.getType()==Msg.TYPE_RECEIVED){

            //如果收到的消息，則顯示左邊的消息布局，将右邊的消息布局隐藏

            viewHolder.leftLayout.setVisibility(View.VISIBLE);

            viewHolder.rightLayout.setVisibility(View.GONE);

            viewHolder.leftMsg.setText(msg.getContent());

        }else if(msg.getType()==Msg.TYPE_SENT){

            //如果是發出的消息，則顯示右邊的消息布局，将左邊的消息布局隐藏

            viewHolder.rightLayout.setVisibility(View.VISIBLE);

            viewHolder.leftLayout.setVisibility(View.GONE);

            viewHolder.rightMsg.setText(msg.getContent());

        }

        return view;

    }

    class ViewHolder{

        LinearLayout leftLayout;

        LinearLayout rightLayout;

        TextView leftMsg;

        TextView rightMsg;

    }

}

最後修改主類 ，一些資料的添加，事件的響應

package com.example.testdssp;

import java.util.ArrayList;

import java.util.List;

import android.os.Bundle;

import android.app.Activity;

import android.util.Log;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.Window;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ListView;

public class MainActivity extends Activity {

    private ListView msgListView;

    private EditText inputText;

    private Button send;

    private MsgAdapter adapter;

    private List<Msg> msgList=new ArrayList<Msg>();

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_main);

        initMsgs(); //初始化消息資料

        adapter=new MsgAdapter(MainActivity.this,R.layout.msg_item,msgList);

        inputText=(EditText)findViewById(R.id.input_text);

        send=(Button)findViewById(R.id.send);

        msgListView=(ListView)findViewById(R.id.msg_list_view);

        msgListView.setAdapter(adapter);

        send.setOnClickListener(new OnClickListener(){

            public void onClick(View v){

                String content=inputText.getText().toString();

                if(!"".equals(content))

                {

                    Msg msg=new Msg(content,Msg.TYPE_SENT);

                    msgList.add(msg);

                    adapter.notifyDataSetChanged();  //當有新消息時，重新整理ListView中的顯示

                    msgListView.setSelection(msgList.size()); //将ListView定位到最後一行

                    inputText.setText(""); //清空輸入框的内容

                }

            }

        });

    }

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.main, menu);

        return true;

    }

    private void initMsgs(){

        Msg msg1=new Msg("Hello guy",Msg.TYPE_RECEIVED);

        msgList.add(msg1);

        Msg msg2=new Msg("Hello ,who is that",Msg.TYPE_SENT);

        msgList.add(msg2);

        Msg msg3=new Msg("This is Tom,Nice talking to you",Msg.TYPE_RECEIVED);

        msgList.add(msg3);

    }

}