android 仿微信聊天气泡效果实现思路

概述微信聊天窗口的信息效果类似iphone上的短信效果，以气泡的形式展现，在Android上，实现这种效果主要用到ListView和BaseAdapter，配合布局以及相关素材，就可以自己做出这个效果，素材可以下一个微信的APK，然后把后缀 微信聊天窗口的信息效果类似iphone上的短信效果，以气泡的形式展现，在AndroID上，实现这种效果主要用到ListVIEw和BaseAdapter，配合布局以及相关素材，就可以自己做出这个效果，素材可以下一个微信的APK，然后把后缀名改成zip，直接解压，就可以得到微信里面的所有素材了。首先看一下我实现的效果：

以下是工程目录结构：
接下来就是如何实现这个效果的代码：
main.xml，这个是主布局文件，显示ListvIEw和上下两部分内容。
复制代码 代码如下:
<?xml version="1.0" enCoding="utf-8"?>
<relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"
androID:layout_wIDth="fill_parent"
androID:layout_height="fill_parent"
androID:background="#f0f0e0" >
<relativeLayout
androID:ID="@+ID/rl_top"
androID:layout_wIDth="fill_parent"
androID:layout_alignParenttop="true"
androID:layout_height="wrap_content">
<TextVIEw
androID:layout_wIDth="fill_parent"
androID:layout_height="44dp"
androID:gravity="center"
androID:textSize="18sp"
androID:background="#486a9a"
androID:textcolor="@androID:color/white"
androID:text="Chat"/>
</relativeLayout>
<relativeLayout
androID:ID="@+ID/rl_bottom"
androID:layout_alignParentBottom="true"
androID:layout_wIDth="fill_parent"
androID:background="#486a9a"
androID:paddingtop="5dp"
androID:layout_height="wrap_content">
<button
androID:ID="@+ID/btn_send"
androID:layout_wIDth="70dp"
androID:layout_height="50dp"
androID:layout_alignParentRight="true"
androID:layout_centerVertical="true"
androID:layout_marginRight="10dp"
androID:text="Send" />
<EditText
androID:ID="@+ID/et_content"
androID:layout_wIDth="fill_parent"
androID:layout_height="50dp"
androID:layout_centerVertical="true"
androID:layout_marginleft="10dp"
androID:layout_marginRight="10dp"
androID:layout_toleftOf="@ID/btn_send"
androID:textSize="16sp"/>
</relativeLayout>
<ListVIEw
androID:ID="@+ID/ListvIEw"
androID:layout_wIDth="fill_parent"
androID:layout_height="fill_parent"
androID:layout_above="@ID/rl_bottom"
androID:layout_below="@ID/rl_top"
androID:layout_marginleft="10dp"
androID:layout_marginRight="10dp"
androID:layout_margintop="10dp"
androID:cachecolorHint="#00000000"
androID:divIDer="@null"
androID:ListSelector="#00000000"
androID:divIDerHeight="3dp"
androID:scrollbars="none"/>
</relativeLayout>

然后就是ListvIEw中两种类型item的布局文件，分别是接收信息的item效果和发送信息的item效果
chat_from_item.xml是接收信息的item布局：
复制代码 代码如下:
<?xml version="1.0" enCoding="utf-8"?>
<linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"
androID:layout_wIDth="fill_parent"
androID:orIEntation="vertical"
androID:paddingBottom="5dp"
androID:layout_height="wrap_content" >
<TextVIEw
androID:ID="@+ID/tv_time"
androID:layout_wIDth="wrap_content"
androID:layout_height="wrap_content"
androID:layout_gravity="center_horizontal"
androID:background="#bfbfbf"
androID:paddingtop="2dp"
androID:paddingBottom="2dp"
androID:paddingleft="4dp"
androID:paddingRight="4dp"
androID:textcolor="#ffffff"
androID:textSize="12sp" />
<relativeLayout
androID:layout_wIDth="fill_parent"
androID:layout_height="wrap_content"
androID:layout_margintop="5dp" >
<ImageVIEw
androID:ID="@+ID/iv_user_image"
androID:layout_wIDth="50dp"
androID:layout_height="50dp"
androID:layout_alignParentleft="true"
androID:layout_alignParenttop="true"
androID:background="@drawable/mypic"
androID:focusable="false" />
<TextVIEw
androID:ID="@+ID/tv_content"
androID:layout_wIDth="wrap_content"
androID:layout_height="wrap_content"
androID:layout_marginleft="5dp"
androID:layout_toRightOf="@+ID/iv_user_image"
androID:background="@drawable/chatfrom_bg"
androID:gravity="left|center"
androID:clickable="true"
androID:focusable="true"
androID:linespacingExtra="2dp"
androID:minHeight="50dp"
androID:textcolor="#ff000000"
androID:textSize="14sp" />
</relativeLayout>
</linearLayout>

chat_to_item.xml是发送信息item的布局：
复制代码 代码如下:
<?xml version="1.0" enCoding="utf-8"?>
<linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"
androID:layout_wIDth="fill_parent"
androID:orIEntation="vertical"
androID:paddingBottom="5dp"
androID:layout_height="wrap_content" >
<TextVIEw
androID:ID="@+ID/tv_time"
androID:layout_wIDth="wrap_content"
androID:layout_height="wrap_content"
androID:background="#bfbfbf"
androID:layout_gravity="center_horizontal"
androID:paddingtop="2dp"
androID:paddingBottom="2dp"
androID:paddingleft="4dp"
androID:paddingRight="4dp"
androID:textcolor="#ffffff"
androID:textSize="12sp" />
<relativeLayout
androID:layout_wIDth="fill_parent"
androID:layout_height="wrap_content"
androID:layout_margintop="5dp" >
<ImageVIEw
androID:ID="@+ID/iv_user_image"
androID:layout_wIDth="50dp"
androID:layout_height="50dp"
androID:layout_alignParentRight="true"
androID:layout_alignParenttop="true"
androID:background="@drawable/mypic"
androID:focusable="false" />
<TextVIEw
androID:ID="@+ID/tv_content"
androID:layout_wIDth="wrap_content"
androID:layout_height="wrap_content"
androID:layout_marginRight="5dp"
androID:layout_toleftOf="@+ID/iv_user_image"
androID:background="@drawable/chatto_bg"
androID:gravity="left|center"
androID:clickable="true"
androID:focusable="true"
androID:linespacingExtra="2dp"
androID:textcolor="#ff000000"
androID:textSize="14sp" />
</relativeLayout>
</linearLayout>

布局完成后新建一个实体类ChatEntity.java：
复制代码 代码如下:
public class ChatEntity {
private int userImage;
private String content;
private String chatTime;
private boolean isComeMsg;
public int getUserImage() {
return userImage;
}
public voID setUserImage(int userImage) {
this.userImage = userImage;
}
public String getContent() {
return content;
}
public voID setContent(String content) {
this.content = content;
}
public String getChatTime() {
return chatTime;
}
public voID setChatTime(String chatTime) {
this.chatTime = chatTime;
}
public boolean isComeMsg() {
return isComeMsg;
}
public voID setComeMsg(boolean isComeMsg) {
this.isComeMsg = isComeMsg;
}
}

最后就是主Activity，这里面包括了自己写的BaseAdapter：
复制代码 代码如下:
public class ChatDemoActivity extends Activity {
private button sendbutton = null;
private EditText contentEditText = null;
private ListVIEw chatListVIEw = null;
private List<ChatEntity> chatList = null;
private ChatAdapter chatAdapter = null;
@OverrIDe
public voID onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestwindowFeature(Window.FEATURE_NO_Title);
setContentVIEw(R.layout.main);
contentEditText = (EditText) this.findVIEwByID(R.ID.et_content);
sendbutton = (button) this.findVIEwByID(R.ID.btn_send);
chatListVIEw = (ListVIEw) this.findVIEwByID(R.ID.ListvIEw);
chatList = new ArrayList<ChatEntity>();
ChatEntity chatEntity = null;
for (int i = 0; i < 2; i++) {
chatEntity = new ChatEntity();
if (i % 2 == 0) {
chatEntity.setComeMsg(false);
chatEntity.setContent("Hello");
chatEntity.setChatTime("2012-09-20 15:12:32");
}else {
chatEntity.setComeMsg(true);
chatEntity.setContent("Hello,nice to meet you!");
chatEntity.setChatTime("2012-09-20 15:13:32");
}
chatList.add(chatEntity);
}
chatAdapter = new ChatAdapter(this,chatList);
chatListVIEw.setAdapter(chatAdapter);
sendbutton.setonClickListener(new OnClickListener() {
@OverrIDe
public voID onClick(VIEw v) {
if (!contentEditText.getText().toString().equals("")) {
//发送消息
send();
}else {
Toast.makeText(ChatDemoActivity.this,"Content is empty",Toast.LENGTH_SHORT).show();
}
}
});
}
private voID send(){
ChatEntity chatEntity = new ChatEntity();
chatEntity.setChatTime("2012-09-20 15:16:34");
chatEntity.setContent(contentEditText.getText().toString());
chatEntity.setComeMsg(false);
chatList.add(chatEntity);
chatAdapter.notifyDataSetChanged();
chatListVIEw.setSelection(chatList.size() - 1);
contentEditText.setText("");
}
private class ChatAdapter extends BaseAdapter{
private Context context = null;
private List<ChatEntity> chatList = null;
private LayoutInflater inflater = null;
private int COME_MSG = 0;
private int TO_MSG = 1;
public ChatAdapter(Context context,List<ChatEntity> chatList){
this.context = context;
this.chatList = chatList;
inflater = LayoutInflater.from(this.context);
}
@OverrIDe
public int getCount() {
return chatList.size();
}
@OverrIDe
public Object getItem(int position) {
return chatList.get(position);
}
@OverrIDe
public long getItemID(int position) {
return position;
}
@OverrIDe
public int getItemVIEwType(int position) {
// 区别两种vIEw的类型，标注两个不同的变量来分别表示各自的类型
ChatEntity entity = chatList.get(position);
if (entity.isComeMsg())
{
return COME_MSG;
}else{
return TO_MSG;
}
}
@OverrIDe
public int getVIEwTypeCount() {
// 这个方法默认返回1，如果希望ListvIEw的item都是一样的就返回1，我们这里有两种风格，返回2
return 2;
}
@OverrIDe
public VIEw getVIEw(int position,VIEw convertVIEw,VIEwGroup parent) {
ChatHolder chatHolder = null;
if (convertVIEw == null) {
chatHolder = new ChatHolder();
if (chatList.get(position).isComeMsg()) {
convertVIEw = inflater.inflate(R.layout.chat_from_item,null);
}else {
convertVIEw = inflater.inflate(R.layout.chat_to_item,null);
}
chatHolder.timeTextVIEw = (TextVIEw) convertVIEw.findVIEwByID(R.ID.tv_time);
chatHolder.contentTextVIEw = (TextVIEw) convertVIEw.findVIEwByID(R.ID.tv_content);
chatHolder.userImageVIEw = (ImageVIEw) convertVIEw.findVIEwByID(R.ID.iv_user_image);
convertVIEw.setTag(chatHolder);
}else {
chatHolder = (ChatHolder)convertVIEw.getTag();
}
chatHolder.timeTextVIEw.setText(chatList.get(position).getChatTime());
chatHolder.contentTextVIEw.setText(chatList.get(position).getContent());
chatHolder.userImageVIEw.setimageResource(chatList.get(position).getUserImage());
return convertVIEw;
}
private class ChatHolder{
private TextVIEw timeTextVIEw;
private ImageVIEw userImageVIEw;
private TextVIEw contentTextVIEw;
}
}
}
 
对AndroID&IOS感兴趣的朋友可以加入我们的讨论QQ群，在这里，我们只讨论干货：
iOS群：220223507
AndroID群：282552849
游戏开发论坛：http://jiushun8.com/forum.PHP?mod=vIEwthread&tID=4371&extra=page%3D1 总结

以上是内存溢出为你收集整理的android 仿微信聊天气泡效果实现思路全部内容，希望文章能够帮你解决android 仿微信聊天气泡效果实现思路所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。