快捷導(dǎo)航

Android實現(xiàn)精美的聊天界面

更新時間：2022年04月24日 15:56:59 作者：一枚-狗子

這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)精美的聊天界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android實現(xiàn)精美的聊天界面的具體代碼，供大家參考，具體內(nèi)容如下

1、activity_chat.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 somthing here"
? ? ? ? ? ? android:maxLines="2" />

? ? ? ? <Button
? ? ? ? ? ? android:id="@+id/send"
? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:text="Send" />
? ? </LinearLayout>
</LinearLayout>

這里在主界面中放置了一個 ListView用于顯示聊天的消息內(nèi)容，又放置了一個 EditText 用于輸入消息，還放置了一個 Button 用于發(fā)送消息。ListView 中用到了一個 android:divider 屬性，它可以指定 ListView分隔線的顏色，這里#0000表示將分隔線設(shè)為透明色

2、Msg.java

package com.example.guan.chat;

/**
?* @author Guan
?* @file com.example.guan.chat
?* @date 2015/8/21
?* @Version 1.0
?*/
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類中只有兩個字段，content表示消息的內(nèi)容，type表示消息的類型。其中消息類型有兩個值可選，TYPE_RECEIVED表示這是一條收到的消息，TYPE_SENT 表示這是一條發(fā) 出的消息。

3、 msg_item.xml

<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/chatto_bg_normal">

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

? ? ? ? <TextView
? ? ? ? ? ? android:id="@+id/right_msg"
? ? ? ? ? ? android:layout_width="wrap_content"
? ? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? ? android:layout_gravity="center"
? ? ? ? ? ? android:layout_margin="10dp" />
? ? </LinearLayout>
</LinearLayout>

這里我們讓收到的消息居左對齊，發(fā)出的消息居右對齊，并且分別使用 message_left.9.png 和 message_right.9.png作為背景圖。你可能會有些疑慮，怎么能讓收到的消息和發(fā)出的消息都放在同一個布局里呢？不用擔(dān)心，還記得我們前面學(xué)過的可見屬性嗎，只要稍后在代碼中根據(jù)消息的類型來決定隱藏和顯示哪種消息就可以了。

4、MsgAdapte.java

/**
?* @author Guan
?* @file com.example.guan.chat
?* @date 2015/8/21
?* @Version 1.0
?*/
public class MsgAdapter extends ArrayAdapter<Msg> {
? ? private int resourceId;

? ? public MsgAdapter(Context context, int textViewResourceId, List<Msg> objects) {
? ? ? ? super(context, textViewResourceId, objects);
? ? }

? ? @Override
? ? 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(R.layout.msg_item, null);
? ? ? ? ? ? viewHolder = new ViewHolder(view);
? ? ? ? ? ? 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) {
? ? ? ? ? ? // 如果是發(fā)出的消息，則顯示右邊的消息布局，將左邊的消息布局隱藏
? ? ? ? ? ? viewHolder.rightLayout.setVisibility(View.VISIBLE);
? ? ? ? ? ? viewHolder.leftLayout.setVisibility(View.GONE);
? ? ? ? ? ? viewHolder.rightMsg.setText(msg.getContent());
? ? ? ? }
? ? ? ? return view;
? ? }

? ? static class ViewHolder {
? ? ? ? @InjectView(R.id.left_msg)
? ? ? ? TextView leftMsg;
? ? ? ? @InjectView(R.id.left_layout)
? ? ? ? LinearLayout leftLayout;
? ? ? ? @InjectView(R.id.right_msg)
? ? ? ? TextView rightMsg;
? ? ? ? @InjectView(R.id.right_layout)
? ? ? ? LinearLayout rightLayout;

? ? ? ? ViewHolder(View view) {
? ? ? ? ? ? ButterKnife.inject(this, view);
? ? ? ? }
? ? }
}

在 getView()方法中增加了對消息類型的判斷。如果這條消息是收到的，則顯示左邊的消息布局，如果這條消息是發(fā)出的，則顯示右邊的消息布局。

5、ChatActivity.java

/**
?* @author Guan
?* @file com.example.guan.ChatActivity
?* @date 2015/8/21
?* @Version 1.0
?*/
public class ChatActivity extends Activity {

? ? @InjectView(R.id.msg_list_view)
? ? ListView msgListView;
? ? @InjectView(R.id.input_text)
? ? EditText inputText;
? ? @InjectView(R.id.send)
? ? Button send;

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

? ? @Override
? ? protected void onCreate(Bundle savedInstanceState) {
? ? ? ? super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.activity_chat);
? ? ? ? ButterKnife.inject(this);

? ? ? ? // 初始化消息數(shù)據(jù)
? ? ? ? initMsgs();
? ? ? ? adapter = new MsgAdapter(ChatActivity.this,R.layout.msg_item, msgList);
? ? ? ? msgListView.setAdapter(adapter);

? ? ? ? send.setOnClickListener(new View.OnClickListener() {
? ? ? ? ? ? @Override
? ? ? ? ? ? public void onClick(View v) {

? ? ? ? ? ? ? ? String content = inputText.getText().toString();
? ? ? ? ? ? ? ? if (!"".equals(content)) {
? ? ? ? ? ? ? ? ? ? Msg msg = new Msg(content, Msg.TYPE_SENT);
? ? ? ? ? ? ? ? ? ? msgList.add(msg);
? ? ? ? ? ? ? ? ? ? // 當(dāng)有新消息時，刷新ListView中的顯示
? ? ? ? ? ? ? ? ? ? adapter.notifyDataSetChanged();
? ? ? ? ? ? ? ? ? ? // 將ListView定位到最后一行
? ? ? ? ? ? ? ? ? ? msgListView.setSelection(msgList.size());
? ? ? ? ? ? ? ? ? ? // 清空輸入框中的內(nèi)容
? ? ? ? ? ? ? ? ? ? inputText.setText("");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
? ? }

? ? 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);
? ? }
}

在 initMsgs()方法中我們先初始化了幾條數(shù)據(jù)用于在 ListView 中顯示。然后在發(fā)送按鈕的點(diǎn)擊事件里獲取了 EditText中的內(nèi)容，如果內(nèi)容不為空則創(chuàng)建出一個新的 Msg對象，并把它添加到 msgList列表中去。之后又調(diào)用了適配器的 notifyDataSetChanged()方法，用于通知列表的數(shù)據(jù)發(fā)生了變化，這樣新增的一條消息才能夠在 ListView中顯示。接著調(diào)用 ListView 的 setSelection()方法將顯示的數(shù)據(jù)定位到最后一行，以保證一定可以看得到最后發(fā)出的一條消息。最后調(diào)用 EditText的 setText()方法將輸入的內(nèi)容清空。

6、效果圖