Android 仿微信QQ聊天界面

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

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

MainActivity.java

1. package com.jackie.wechat;
2. import java.util.ArrayList;
3. import java.util.List;
4. import android.app.Activity;
5. import android.os.Bundle;
6. import android.view.LayoutInflater;
7. import android.view.View;
8. import android.view.ViewGroup;
9. import android.widget.BaseAdapter;
10. import android.widget.ListView;
11. import android.widget.TextView;
12. public class MainActivity extends Activity {
13. private ListView mListView;
14. private List<Person> persons;
15. private int TYPE_COUNT = 2;
16. private int LEFT = 0;
17. private int RIGHT = 1;
18. private LayoutInflater
    mInflater;
19. private MyAdapter adapter;
20. @Override
21. protected void onCreate(Bundle savedInstanceState) {
22. super.onCreate(savedInstanceState);
23. setContentView(R.layout.activity_main);
24. mListView = (ListView) findViewById(R.id.listview);
25. mInflater = LayoutInflater.from(this);
26. initData();
27. adapter = new MyAdapter();
28. mListView.setAdapter(adapter);
29. }
30. private void initData() {
31. persons = new ArrayList<Person>();
32. for(int i
    = 0; i < 40;
    i++){
33. Person person = new Person();
34. person.setAge(i);
35. person.setName("更深的蓝");
36. if(i
    % 2 == 0){
37. person.setType(0);
38. } else {
39. person.setType(1);
40. }
41. persons.add(person);
42. }
43. }
44. private class MyAdapter extends BaseAdapter{
45. @Override
46. public int getCount() {
47. return persons.size();
48. }
49. @Override
50. public Object getItem(int position) {
51. return persons.get(position);
52. }
53. @Override
54. public long getItemId(int position) {
55. return position;
56. }
57. @Override
58. public int getItemViewType(int position) {
59. if(persons.get(position).getType()
    == 0){
60. return LEFT;
61. }
62. return RIGHT;
63. }
64. @Override
65. public int getViewTypeCount() {
66. return TYPE_COUNT;
67. }
68. @Override
69. public View getView(int position, View convertView, ViewGroup parent) {
70. ViewHolder mHolder;
71. Person person = persons.get(position);
72. if(getItemViewType(position)
    == LEFT) {
73. if (convertView
    == null) {
74. mHolder = new ViewHolder();
75. convertView  = mInflater.inflate(R.layout.item_left, null);
76. mHolder.tv_username = (TextView) convertView.findViewById(R.id.tv_username);
77. mHolder.tv_age = (TextView) convertView.findViewById(R.id.tv_age);
78. convertView.setTag(mHolder);
79. } else {
80. mHolder = (ViewHolder) convertView.getTag();
81. }
82. mHolder.tv_username.setText(person.getName());
83. mHolder.tv_age.setText(String.valueOf(person.getAge()));
84. } else {
85. if(convertView
    == null){
86. mHolder = new ViewHolder();
87. convertView = mInflater.inflate(R.layout.item_right, null);
88. mHolder.tv_username = (TextView) convertView.findViewById(R.id.tv_username);
89. mHolder.tv_age = (TextView) convertView.findViewById(R.id.tv_age);
90. convertView.setTag(mHolder);
91. }else{
92. mHolder = (ViewHolder) convertView.getTag();
93. }
94. mHolder.tv_username.setText(person.getName());
95. mHolder.tv_age.setText(String.valueOf(person.getAge()));
96. }
97. return convertView;
98. }
99. private class ViewHolder
    {
100. TextView tv_username;
101. TextView tv_age;
102. }
103. }
104. }

Person.java

[java] view
plaincopyprint?

1. package com.jackie.wechat;
2. public class Person {
3. private String name;
4. private int age;
5. private int type;
6. public String getName() {
7. return name;
8. }
9. public void setName(String name) {
10. this.name = name;
11. }
12. public int getAge() {
13. return age;
14. }
15. public void setAge(int age) {
16. this.age = age;
17. }
18. public int getType() {
19. return type;
20. }
21. public void setType(int type) {
22. this.type = type;
23. }
24. }

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>