简单模仿QQ聊天界面

首先看一下最终的效果，显示了消息时间，用户昵称，用户头像。

大致实现方法：

　　用最简单的ListView显示消息内容。

　　不同的用户使用不同的消息布局文件，从而达到头像左右显示的效果，如上图有2个用户"Tony","Hill"，头像分别显示在左右两边。

代码文件清单：

　　主布局文件activity_main.xml:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="#ffffff"
     tools:context=".MainActivity" >
     <ListView
         android:id="@+id/lv_message"
         android:layout_height="fill_parent"
         android:layout_width="fill_parent"
         android:layout_above="@+id/ll_send_1"
         android:scrollbars="none"
         android:divider="@null"
         android:footerDividersEnabled="false">
     </ListView>
     <LinearLayout
         android:id="@+id/ll_send_1"
         android:layout_height="50dp"
         android:layout_width="fill_parent"
         android:orientation="horizontal"
         android:layout_above="@+id/ll_send_2">
         <EditText
             android:id="@+id/et_tony_message"
             android:layout_width="0dp"
             android:layout_height="fill_parent"
             android:layout_weight="3"
             android:hint="Tony请输入"/>
         <Button
             android:id="@+id/but_tony_send"
             android:layout_height="fill_parent"
             android:layout_width="0dp"
             android:layout_weight="1"
             android:text="send"/>
     </LinearLayout>
     <LinearLayout
         android:id="@+id/ll_send_2"
         android:layout_height="50dp"
         android:layout_width="fill_parent"
         android:orientation="horizontal"
         android:layout_alignParentBottom="true">
         <EditText
             android:id="@+id/et_hill_message"
             android:layout_width="0dp"
             android:layout_height="fill_parent"
             android:layout_weight="3"
             android:hint="Hill请输入"/>
         <Button
             android:id="@+id/but_hill_send"
             android:layout_height="fill_parent"
             android:layout_width="0dp"
             android:layout_weight="1"
             android:text="send"/>
     </LinearLayout>
 </RelativeLayout>

　　头像位于左边的消息布局文件list_message_item_left.xml：

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:background="@drawable/chat_list_item_background"
     android:padding="6dp">

     <LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:gravity="center_horizontal">

         <TextView
             android:id="@+id/tv_sendtime"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="#8B8B8B"
             android:textSize="12sp"
             android:text="15:03:15"/>
     </LinearLayout>

     <RelativeLayout
         android:layout_width="fill_parent"
         android:layout_height="wrap_content">

         <ImageView
             android:id="@+id/iv_userhead"
             android:layout_width="40dp"
             android:layout_height="40dp"
             android:background="@drawable/head_portrait_1"
             android:focusable="false"
             android:layout_alignParentLeft="true"
             android:layout_alignParentTop="true" />

         <TextView
             android:id="@+id/tv_username"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginLeft="10dp"
             android:layout_marginBottom="5dp"
             android:textColor="#8B8B8B"
             android:layout_toRightOf="@id/iv_userhead"
             android:text="name"/>

         <TextView
             android:id="@+id/tv_chatcontent"
             android:layout_toRightOf="@id/iv_userhead"
             android:layout_marginLeft="10dp"
             android:layout_marginRight="40dp"
             android:layout_below="@id/tv_username"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text=""
             android:background="@drawable/message_text_background01"/>
     </RelativeLayout>
 </LinearLayout>

　　头像位于右边的消息布局文件list_message_item_right.xml：

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical"
     android:background="@drawable/chat_list_item_background"
     android:padding="6dp">

     <LinearLayout
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:gravity="center_horizontal">

         <TextView
             android:id="@+id/tv_sendtime"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="#8B8B8B"
             android:textSize="12sp"
             android:text="15:03:15"/>
     </LinearLayout>
     <RelativeLayout
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="5dp" >

         <ImageView
             android:id="@+id/iv_userhead"
             android:layout_width="40dp"
             android:layout_height="40dp"
             android:background="@drawable/head_portrait_2"
             android:focusable="false"
             android:layout_alignParentRight="true"
             android:layout_alignParentTop="true" />

         <TextView
             android:id="@+id/tv_username"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginRight="10dp"
             android:layout_marginBottom="5dp"
             android:textColor="#8B8B8B"
             android:layout_toLeftOf="@id/iv_userhead"
             android:text="name"/>

         <TextView
             android:id="@+id/tv_chatcontent"
             android:layout_toLeftOf="@id/iv_userhead"
             android:layout_marginRight="10dp"
             android:layout_marginLeft="40dp"
             android:layout_below="@id/tv_username"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text=""
             android:background="@drawable/message_text_background02"/>
     </RelativeLayout>

 </LinearLayout>

　　主界面java代码文件MainActivity.java:

 public class MainActivity extends Activity implements OnClickListener{
     EditText et_tony_message;
     Button but_tony_send;

     EditText et_hill_message;
     Button but_hill_send;

     ListView lv_message;
     List<Message> list;
     MessageAdapter adapter;
     Handler handler=new Handler();
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         init();
     }

     private void init() {
         et_tony_message=(EditText) findViewById(R.id.et_tony_message);
         but_tony_send=(Button) findViewById(R.id.but_tony_send);
         but_tony_send.setOnClickListener(this);

         et_hill_message=(EditText) findViewById(R.id.et_hill_message);
         but_hill_send=(Button) findViewById(R.id.but_hill_send);
         but_hill_send.setOnClickListener(this);

         list=new ArrayList<Message>();
         lv_message=(ListView) findViewById(R.id.lv_message);
         adapter=new MessageAdapter();
         lv_message.setAdapter(adapter);
     }

     @Override
     public void onClick(View v) {
         /*Tony发送消息*/
         if(v==but_tony_send){
             /*验证*/
             if(et_tony_message.getText()==null||et_tony_message.getText().toString().equals("")){
                 Toast.makeText(this, "消息不能为空", 0).show();
                 return ;
             }
             Message m=new Message();
             m.setFrom_username("Tony");
             m.setCreate_time(System.currentTimeMillis());
             m.setText(et_tony_message.getText().toString());
             sendMessage(m);
             et_tony_message.setText("");
         }
         /*Hill发送消息*/
         if(v==but_hill_send){
             /*验证*/
             if(et_hill_message.getText()==null||et_hill_message.getText().toString().equals("")){
                 Toast.makeText(this, "消息不能为空", 0).show();
                 return ;
             }
             Message m=new Message();
             m.setFrom_username("Hill");
             m.setCreate_time(System.currentTimeMillis());
             m.setText(et_hill_message.getText().toString());
             sendMessage(m);
             et_hill_message.setText("");
         }
     }
     private void sendMessage(Message m) {
         list.add(m);
         adapter.notifyDataSetChanged();
 //        lv_message.f
         lv_message.setSelection(list.size()+1);
     }
     class MessageAdapter extends BaseAdapter{

         @Override
         public int getCount() {
             return list.size();
         }

         @Override
         public Object getItem(int position) {
             return list.get(position);
         }

         @Override
         public long getItemId(int position) {
             return 0;
         }

         @Override
         public View getView(int position, View convertView, ViewGroup parent) {
             Message message=list.get(position);
             ViewHolder viewHolder=null;
 //        if(convertView==null){
             if("Tony".equalsIgnoreCase(message.getFrom_username())){
                 convertView=parent.inflate(MainActivity.this, R.layout.list_message_item_left, null);
             }else{
                 convertView=parent.inflate(MainActivity.this, R.layout.list_message_item_right, null);
             }
             viewHolder=new ViewHolder();
             viewHolder.iv_userhead=(ImageView) convertView.findViewById(R.id.iv_userhead);
             viewHolder.tv_chatcontent=(TextView) convertView.findViewById(R.id.tv_chatcontent);
             viewHolder.tv_sendtime=(TextView) convertView.findViewById(R.id.tv_sendtime);
             viewHolder.tv_username=(TextView) convertView.findViewById(R.id.tv_username);
 //            convertView.setTag(viewHolder);
 //        }else{
 //            viewHolder=(ViewHolder) convertView.getTag();
 //        }

             viewHolder.tv_chatcontent.setText(message.getText());
             viewHolder.tv_sendtime.setText(new SimpleDateFormat("HH:mm:ss").format(new Date(message.getCreate_time())));
             viewHolder.tv_username.setText(message.getFrom_username());
             return convertView;
         }
         class ViewHolder{
             public ImageView iv_userhead;
             public TextView tv_username;
             public TextView tv_chatcontent;
             public TextView tv_sendtime;
         }
     }
 }

　　消息封装代码文件Message.java:

 public class Message {
     private String from_username;/*发送者*/
     private Long create_time;/*发送时间*/
     private String text;/*消息内容*/
     public String getFrom_username() {
         return from_username;
     }

     public Long getCreate_time() {
         return create_time;
     }
     public void setCreate_time(Long create_time) {
         this.create_time = create_time;
     }
     public String getText() {
         return text;
     }
     public void setText(String text) {
         this.text = text;
     }

     public void setFrom_username(String from_username) {
         this.from_username = from_username;
     }

 }

源码下载：http://www.apkbus.com/forum.php?mod=viewthread&tid=173419&extra=