Android 仿微信QQ聊天界面

一些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 % == 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.         }

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

  104.                 mHolder.tv_username.setText(person.getName());  
  105.                 mHolder.tv_age.setText(String.valueOf(person.getAge()));  
  106.             }      
  107.             return convertView;  
  108.         }
  109.   
  110.        private class ViewHolder {  
  111.             TextView tv_username;  
  112.             TextView tv_age;  
  113.         }  
  114.     }  
  115. }  
Person.java
  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.     } 

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

  24.     public void setType(int type) {  
  25.         this.type = type;  
  26.     }  
  27. }  
item_left.xml
  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

  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验证失败解决办法


下一篇:微信公众号开发系列教程一(调试环境部署)