本文实例为大家分享了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、效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
