简单模仿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=