Android 仿微信QQ聊天界面

2023-10-18 12:49:58

一些IM聊天软件的展现形式是左右分开的形式。比如说，别人给你发的信息全部靠左显示，你自己发给别人的信息全部靠右显示。

而我们的ListView很多时候是显示同一个布局，其实BaseAdapter中有2个重要的方法在大多数情况下我们并未使用到，一个是public int getViewTypeCount()，显示ListView中有多少种布局（默认是显示是1），像微信那样聊天界面，是有2种布局方式；另外一个getItemViewType()，可以让不同item条目加载不同的布局,下面就简单的模拟下微信的聊天界面做法：

MainActivity.java

  1. package com.jackie.wechat;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.app.Activity;  
  7. import android.os.Bundle;  
  8. import android.view.LayoutInflater;  
  9. import android.view.View;  
  10. import android.view.ViewGroup;  
  11. import android.widget.BaseAdapter;  
  12. import android.widget.ListView;  
  13. import android.widget.TextView;  
  14.   
  15. public class MainActivity extends Activity {  
  16.     private ListView mListView;  
  17.     private List<Person> persons;  
  18.     private int TYPE_COUNT = 2;  
  19.     private int LEFT = 0;  
  20.     private int RIGHT = 1;  
  21.     private LayoutInflater mInflater;  
  22.     private MyAdapter adapter;  
  23.     @Override  
  24.     protected void onCreate(Bundle savedInstanceState) {  
  25.         super.onCreate(savedInstanceState);  
  26.         setContentView(R.layout.activity_main);  
  27.         mListView = (ListView) findViewById(R.id.listview);  
  28.         mInflater = LayoutInflater.from(this);  
  29.         initData();  
  30.         adapter = new MyAdapter();  
  31.         mListView.setAdapter(adapter);  
  32.     }  
  33.     private void initData() {  
  34.         persons = new ArrayList<Person>();  
  35.         for(int i = 0; i < 40; i++){  
  36.             Person person = new Person();  
  37.             person.setAge(i);  
  38.             person.setName("更深的蓝");  
  39.             if(i % 2 == 0){  
  40.                 person.setType(0);  
  41.             } else {  
  42.                 person.setType(1);  
  43.             }  
  44.             persons.add(person);  
  45.         }  
  46.     }  
  47.       
  48.    private class MyAdapter extends BaseAdapter{  
  49.   
  50.         @Override  
  51.         public int getCount() {  
  52.             return persons.size();  
  53.         }  
  54.   
  55.         @Override  
  56.         public Object getItem(int position) {  
  57.             return persons.get(position);  
  58.         }  
  59.   
  60.         @Override  
  61.         public long getItemId(int position) {  
  62.             return position;  
  63.         }

  65.         @Override  
  66.         public int getItemViewType(int position) {  
  67.             if(persons.get(position).getType() == 0){  
  68.                 return LEFT;  
  69.             }  
  70.             return RIGHT;  
  71.         }
  72.   
  73.         @Override  
  74.         public int getViewTypeCount() {  
  75.             return TYPE_COUNT;  
  76.         }
  77.   
  78.         @Override  
  79.         public View getView(int position, View convertView, ViewGroup parent) {  
  80.             ViewHolder mHolder;  
  81.             Person person = persons.get(position);  
  82.             if(getItemViewType(position) == LEFT) {  
  83.                 if (convertView == null) {  
  84.                     mHolder = new ViewHolder();  
  85.                     convertView  = mInflater.inflate(R.layout.item_left, null);   
  86.                     mHolder.tv_username = (TextView) convertView.findViewById(R.id.tv_username);  
  87.                     mHolder.tv_age = (TextView) convertView.findViewById(R.id.tv_age);  
  88.                     convertView.setTag(mHolder);  
  89.                 } else {  
  90.                     mHolder = (ViewHolder) convertView.getTag();  
  91.                 }  
  92.             
  93.                 mHolder.tv_username.setText(person.getName());  
  94.                 mHolder.tv_age.setText(String.valueOf(person.getAge()));  
  95.             } else {  
  96.                 if(convertView == null){  
  97.                     mHolder = new ViewHolder();  
  98.                     convertView = mInflater.inflate(R.layout.item_right, null);  
  99.                     mHolder.tv_username = (TextView) convertView.findViewById(R.id.tv_username);  
  100.                     mHolder.tv_age = (TextView) convertView.findViewById(R.id.tv_age);  
  101.                     convertView.setTag(mHolder);  
  102.                 }else{  
  103.                     mHolder = (ViewHolder) convertView.getTag();  
  104.                 }

  106.                 mHolder.tv_username.setText(person.getName());  
  107.                 mHolder.tv_age.setText(String.valueOf(person.getAge()));  
  108.             }      
  109.             return convertView;  
  110.         }
  111.   
  112.        private class ViewHolder {  
  113.             TextView tv_username;  
  114.             TextView tv_age;  
  115.         }  
  116.     }  
  117. }  
Person.java
[java] view plaincopyprint?
  1. package com.jackie.wechat;  
  2.   
  3. public class Person {  
  4.     private String name;  
  5.     private int age;  
  6.     private int type;  
  7.     public String getName() {  
  8.         return name;  
  9.     } 

  11.     public void setName(String name) {  
  12.         this.name = name;  
  13.     }
  14.   
  15.     public int getAge() {  
  16.         return age;  
  17.     } 
  18.  
  19.     public void setAge(int age) {  
  20.         this.age = age;  
  21.     }  
  22.     public int getType() {  
  23.         return type;  
  24.     } 

  26.     public void setType(int type) {  
  27.         this.type = type;  
  28.     }  
  29. }  
item_left.xml
[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"   
  6.     android:background="#ffffff"  
  7.     >  
  8.     <RelativeLayout   
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="45dp"  
  11.         >  
  12.     <TextView   
  13.         android:id="@+id/tv_username"  
  14.         android:layout_width="wrap_content"  
  15.         android:layout_height="wrap_content"  
  16.         android:textSize="16sp"  
  17.         android:textColor="#123456"  
  18.         android:layout_centerVertical="true"  
  19.         android:layout_alignParentLeft="true"  
  20.         />  
  21.     <TextView   
  22.         android:id="@+id/tv_age"  
  23.         android:layout_width="wrap_content"  
  24.         android:layout_height="wrap_content"  
  25.         android:textSize="16sp"  
  26.         android:textColor="#123456"  
  27.         android:layout_centerVertical="true"  
  28.         android:layout_toRightOf="@id/tv_username"  
  29.         android:layout_marginLeft="20dp"  
  30.         />  
  31.     </RelativeLayout>  
  32. </RelativeLayout>  
item_right.xml

[java] view plaincopyprint?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"   
  6.     android:background="#ffffff"  
  7.     >  
  8.     <RelativeLayout   
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="45dp"  
  11.         >  
  12.     <TextView   
  13.         android:id="@+id/tv_username"  
  14.         android:layout_width="wrap_content"  
  15.         android:layout_height="wrap_content"  
  16.         android:textSize="16sp"  
  17.         android:textColor="#123456"  
  18.         android:layout_centerVertical="true"  
  19.         android:layout_alignParentRight="true"  
  20.         />  
  21.     <TextView   
  22.         android:id="@+id/tv_age"  
  23.         android:layout_width="wrap_content"  
  24.         android:layout_height="wrap_content"  
  25.         android:textSize="16sp"  
  26.         android:textColor="#123456"  
  27.         android:layout_centerVertical="true"  
  28.         android:layout_toLeftOf="@id/tv_username"  
  29.         android:layout_marginRight="20dp"  
  30.         />  
  31.     </RelativeLayout>  
  32. </RelativeLayout>

Android 仿微信QQ聊天界面

上一篇：[原创] ASP.NET WEBAPI 接入微信公众平台 总结，Token验证失败解决办法


下一篇：微信公众号开发系列教程一（调试环境部署）