自訂android精美聊天介面

標籤：

編寫精美聊天介面，那就肯定要有收到的訊息和發送的訊息。首先還是編寫主介面，修改activity_chat.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:background="#d8e0e8"android:orientation="vertical" > <ListViewandroid:id="@+id/msg_list_view"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:divider="#0000" />  <LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"> <EditTextandroid: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"/> <Buttonandroid:id="@+id/send"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="send"/> </LinearLayout> </LinearLayout>這裡在主介面中放置一個ListView用於顯示聊天的訊息內容，又放置一個EditText用於輸入聊天訊息，還放置了一個Button用於發送訊息。ListView中用到了一個adnroid:divider屬性，它可以指定ListView分割線的顏色，這裡#0000表示將分割線設為透明色。然後定義訊息的實體類，建立Msg，代碼如下所示：public class Msg { public static final int TYPE_RECEIVER = 0;public static final int TYPE_SEND = 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類中只有兩個欄位，content表示內容，type表示訊息的類型。編寫ListView子項的布局<?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"> <LinearLayoutandroid:id="@+id/left_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="left"android:background="@drawable/ease_chatfrom_bg_focused"android:visibility="gone"> <TextViewandroid:id="@+id/left_msg"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_margin="10dp"android:textColor="#000"/> </LinearLayout> <LinearLayoutandroid:id="@+id/right_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="right"android:background="@drawable/ease_chatto_bg_focused"android:visibility="gone"><TextViewandroid: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的適配器public class MsgAdapter extends ArrayAdapter<Msg>{ private int resourceId; public MsgAdapter(Context context, int textViewResourceId, List<Msg> objects) {super(context, textViewResourceId, objects);resourceId = textViewResourceId;} @Overridepublic 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_RECEIVER){//接收訊息 左邊的訊息viewHolder.rightLayout.setVisibility(View.GONE);viewHolder.leftLayout.setVisibility(View.VISIBLE);viewHolder.leftMsg.setText(msg.getContent());}else if(msg.getType() == Msg.TYPE_SEND){//發送訊息 右邊的訊息viewHolder.leftLayout.setVisibility(View.GONE);viewHolder.rightLayout.setVisibility(View.VISIBLE);viewHolder.rightMsg.setText(msg.getContent());} return view;} class ViewHolder{LinearLayout leftLayout;LinearLayout rightLayout;TextView leftMsg;TextView rightMsg; } }編寫ChatActivitypublic class ChatActivity extends Activity{private MsgAdapter msgAdapter ;private EditText inputText ;private Button send ;private ListView mListView ;ArrayList<Msg> msgList = new ArrayList<Msg>(); @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_chat);initMsgs();msgAdapter = new MsgAdapter(ChatActivity.this, R.layout.chat_list_item, msgList);inputText = (EditText) findViewById(R.id.input_text);send = (Button) findViewById(R.id.send);mListView = (ListView) findViewById(R.id.msg_list_view);mListView.setAdapter(msgAdapter);send.setOnClickListener(new OnClickListener() { @Overridepublic void onClick(View v) {String content = inputText.getText().toString();if(!"".equals(content)){Msg msg = new Msg(content, Msg.TYPE_SEND);msgList.add(msg);msgAdapter.notifyDataSetChanged();//當有訊息時重新整理listview列表顯示mListView.setSelection(msgList.size());//將listview定位在最後一行inputText.setText("");//輸入框內容清空} }});} private void initMsgs() {Msg msg1 = new Msg("hello", Msg.TYPE_RECEIVER);msgList.add(msg1); Msg msg2 = new Msg("hello who is what", Msg.TYPE_SEND);msgList.add(msg2); Msg msg3 = new Msg("your friend", Msg.TYPE_RECEIVER);msgList.add(msg3); } }  

 

                           

自訂android精美聊天介面