網站首頁編程語言正文

Android實現精美的聊天界面_Android

作者：一枚-狗子 ? 更新時間： 2022-06-22 編程語言

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

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用于顯示聊天的消息內容，又放置了一個 EditText 用于輸入消息，還放置了一個 Button 用于發送消息。ListView 中用到了一個 android:divider 屬性，它可以指定 ListView分隔線的顏色，這里#0000表示將分隔線設為透明色

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表示消息的內容，type表示消息的類型。其中消息類型有兩個值可選，TYPE_RECEIVED表示這是一條收到的消息，TYPE_SENT 表示這是一條發出的消息。

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>

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

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) {
? ? ? ? ? ? // 如果是發出的消息，則顯示右邊的消息布局，將左邊的消息布局隱藏
? ? ? ? ? ? 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()方法中增加了對消息類型的判斷。如果這條消息是收到的，則顯示左邊的消息布局，如果這條消息是發出的，則顯示右邊的消息布局。

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

? ? ? ? // 初始化消息數據
? ? ? ? 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);
? ? ? ? ? ? ? ? ? ? // 當有新消息時，刷新ListView中的顯示
? ? ? ? ? ? ? ? ? ? adapter.notifyDataSetChanged();
? ? ? ? ? ? ? ? ? ? // 將ListView定位到最后一行
? ? ? ? ? ? ? ? ? ? msgListView.setSelection(msgList.size());
? ? ? ? ? ? ? ? ? ? // 清空輸入框中的內容
? ? ? ? ? ? ? ? ? ? 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()方法中我們先初始化了幾條數據用于在 ListView 中顯示。然后在發送按鈕的點擊事件里獲取了 EditText中的內容，如果內容不為空則創建出一個新的 Msg對象，并把它添加到 msgList列表中去。之后又調用了適配器的 notifyDataSetChanged()方法，用于通知列表的數據發生了變化，這樣新增的一條消息才能夠在 ListView中顯示。接著調用 ListView 的 setSelection()方法將顯示的數據定位到最后一行，以保證一定可以看得到最后發出的一條消息。最后調用 EditText的 setText()方法將輸入的內容清空。

6、效果圖

原文鏈接：https://blog.csdn.net/chenliguan/article/details/48750547

上一篇：C++內存管理詳解使用方式_C 語言
下一篇：golang?API請求隊列的實現_Golang

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁編程語言正文

Android實現精美的聊天界面_Android

相關推薦

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

Android實現精美的聊天界面_Android

相關推薦

網站首頁編程語言正文