模仿微信界面之聊天界面

運行界面

1建立佈局ui_top.xml顯示界面上標題欄

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#2D2E2E"
    android:orientation="horizontal"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/iv_exit"
            android:src="@mipmap/rl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/user_name"
            android:text="微信"
            android:textSize="15sp"
            android:paddingLeft="15dp"
            android:layout_gravity="center"
            android:textColor="@android:color/white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  />
    </LinearLayout>
    <ImageView
        android:id="@+id/iv_Setting"
        android:src="@mipmap/dux"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

2建立用戶詳細詳細布局ui_message.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#DCE0E0"
    android:layout_height="match_parent">

    <include layout="@layout/ui_top"/>
    <LinearLayout
        android:background="@android:color/white"
        android:layout_marginTop="20dp"
        android:padding="10dp"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv_message_user_icon"
            android:src="@mipmap/default_useravatar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/tv_name"
            android:padding="20dp"
            android:text="暱稱"
            android:textSize="15sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
    <EditText
        android:layout_gravity="center_vertical"
        android:gravity="center_vertical"
        android:background="@android:color/white"
        android:layout_marginTop="20dp"
        android:padding="10dp"
        android:hint="設置備註和標籤"
        android:textSize="15sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:background="@android:color/white"
        android:layout_marginTop="20dp"
        android:padding="10dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tv_location"
            android:text="地區"
            android:textSize="15sp"
            android:layout_margin="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_margin="10dp"
                android:text="個人相冊"
                android:textSize="15sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:layout_margin="5dp"
                android:src="@mipmap/icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/icon"
                android:layout_margin="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@mipmap/icon"
                android:layout_margin="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <TextView
            android:layout_margin="10dp"
            android:text="更多"
            android:textSize="15sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <Button
        android:id="@+id/message_btn_send"
        android:layout_margin="20dp"
        android:padding="15dp"
        android:text="發信息"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/message_btn_video"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:padding="15dp"
        android:text="視頻聊天"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

3建立聊天佈局中發來信息顯示佈局ui_chat_left.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/left_iv_icon"
        android:layout_gravity="top"
        android:src="@mipmap/app_lvjian_message_background"
        android:layout_width="45dp"
        android:layout_height="45dp" />
    <TextView
        android:id="@+id/left_tv_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:padding="8dp"
        android:text="ni hao !"
        android:background="@mipmap/app_lvjian_other_chat_background"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

4建立聊天佈局中發送信息顯示佈局ui_chat_right.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/right_tv_content"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:padding="8dp"
        android:text="ni hao !"
        android:layout_toLeftOf="@+id/right_iv_icon"
        android:background="@mipmap/app_lvjian_chat_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:layout_alignParentRight="true"
        android:id="@+id/right_iv_icon"
        android:layout_gravity="top"
        android:src="@mipmap/app_lvjian_message_background"
        android:layout_width="45dp"
        android:layout_height="45dp" />
</RelativeLayout>

5建立聊天佈局ui_chat.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <include layout="@layout/ui_top"/>
    <ListView
        android:id="@+id/lv_show"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/et_input"
            android:layout_weight="1"
            android:paddingLeft="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/btn_send"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:onClick="btnSend"
            android:text="發送"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

6在bean文件夾下建立PersonBean.java.java

public class PersonBean {
    private int id;

    private int imageId;

    private String name;

    private String chatMessage;

    private boolean isMeSend;

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getChatMessage() {
        return chatMessage;
    }

    public void setChatMessage(String chatMessage) {
        this.chatMessage = chatMessage;
    }

    public boolean isMeSend() {
        return isMeSend;
    }

    public void setMeSend(boolean meSend) {
        isMeSend = meSend;
    }

    public PersonBean(int id , String name, String chatMessage , boolean isMeSend){
        super();
        this.id = id;
        this.name = name;
        this.chatMessage = chatMessage;
        this.isMeSend = isMeSend;
    }
    public PersonBean(){
        super();
    }
}

7在custom文件夾下建立聊天適配器ChatAdapter.java

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

/**
 * Created by Administrator on 2017/9/13.
 */

public class ChatAdapter extends BaseAdapter {

    private Context context;

    private List<PersonBean> list;

    public ChatAdapter(Context context, List<PersonBean> list){
        super();
        this.context = context;
        this.list = list;
    }

    public  interface IMsgViewType{
        int IMVT_COM_MSG = 0;// 收到對方的消息
        int IMVT_TO_MSG = 1;// 自己發送出去的消息
    }

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

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

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

    public int getItemViewType(int i){
        PersonBean personBean = list.get(i);
        if(personBean.isMeSend()){
            return IMsgViewType.IMVT_COM_MSG;
        }else
            return IMsgViewType.IMVT_TO_MSG;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        HolderView holderView = null;
        PersonBean personBean = list.get(i);
        ImageView right_iv_icon;
        ImageView left_iv_icon;
        boolean isMeSend = personBean.isMeSend();
        if(holderView == null){
            holderView = new HolderView();
            if(isMeSend){
                view = View.inflate(context, R.layout.ui_chat_right,null);
                right_iv_icon = (ImageView)view.findViewById(R.id.right_iv_icon);
                right_iv_icon.setImageResource(personBean.getImageId());
                holderView.tv_chat_me_message = (TextView)view.findViewById(R.id.right_tv_content);
                holderView.tv_chat_me_message.setText(personBean.getChatMessage());
            }else {
                view = View.inflate(context,R.layout.ui_chat_left,null);
                left_iv_icon = (ImageView)view.findViewById(R.id.left_iv_icon);
                left_iv_icon.setImageResource(personBean.getImageId());
                holderView.tv_chat_me_message = (TextView)view.findViewById(R.id.left_tv_content);
                holderView.tv_chat_me_message.setText(personBean.getChatMessage());
            }
            view.setTag(holderView);
        }else {
            holderView = (HolderView)view.getTag();
        }
        return view;
    }
    class HolderView {
        TextView tv_chat_me_message;
    }
}

8在activity中建立 UserActivity.java用來顯示用戶信息詳情

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by Administrator on 2017/9/13.
 */

public class UserActivity extends Activity {

    Intent intent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ui_message);
        intent = getIntent();
        ImageView exit = (ImageView)findViewById(R.id.iv_exit);
        ImageView iv_add = (ImageView)findViewById(R.id.iv_Setting);
        iv_add.setImageResource(R.mipmap.rr);
        TextView name = (TextView)findViewById(R.id.tv_name);
        TextView location = (TextView)findViewById(R.id.tv_location);
        TextView title_name = (TextView)findViewById(R.id.user_name);
        Button send = (Button) findViewById(R.id.message_btn_send);
        ImageView user_icon = (ImageView)findViewById(R.id.iv_message_user_icon);
        title_name.setText("詳細資料");
        if(intent.getStringExtra("name") != null)
            name.setText(intent.getStringExtra("name"));
        if(intent.getStringExtra("location") != null)
            location.setText("地區  " +intent.getStringExtra("location"));
        if(intent.getStringExtra("imageId") != null)
            user_icon.setImageResource(new Integer(intent.getStringExtra("imageId")));
        exit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });

        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent1 = new Intent(getApplicationContext(),ChatActivity.class);
                intent1.putExtra("name",intent.getStringExtra("name"));
                startActivity(intent1);
                finish();
            }
        });

        iv_add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),"點我也沒用",Toast.LENGTH_SHORT).show();
            }
        });

    }
}

9在activity文件夾下建立ChatActivity.java顯示聊天界面

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.text.TextUtils;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.imitatewechat.R;
import com.example.imitatewechat.bean.PersonBean;
import com.example.imitatewechat.custom.ChatAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Administrator on 2017/9/13.
 */

public class ChatActivity extends Activity {

    private TextView name;

    PersonBean personBean ;

    private ChatAdapter chatAdapter;

    private List<PersonBean> personBeanList = new ArrayList<>();

    private ListView lv_chat_dialog;

    private EditText et_chat_message;

    private Handler handler = new Handler(){
        @Override
        public void handleMessage(Message msg) {
            int what = msg.what;
            switch (what){
                case 1:
                    lv_chat_dialog.setSelection(personBeanList.size());
                    break;
                default:
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ui_chat);
        Intent intent = getIntent();
        name = (TextView) findViewById(R.id.user_name);
        ImageView exit = (ImageView)findViewById(R.id.iv_exit);
        ImageView msg = (ImageView)findViewById(R.id.iv_Setting);

            personBean = new PersonBean();
            personBean.setMeSend(false);
            personBean.setImageId(R.mipmap.default_useravatar);
            personBean.setChatMessage("你好！");
            personBeanList.add(personBean);

            personBean = new PersonBean();
            personBean.setMeSend(false);
            personBean.setImageId(R.mipmap.default_useravatar);
            personBean.setChatMessage("你好嗎！");
            personBeanList.add(personBean);

            personBean = new PersonBean();
            personBean.setMeSend(true);
            personBean.setImageId(R.mipmap.myicon);
            personBean.setChatMessage("不好！");
            personBeanList.add(personBean);

        lv_chat_dialog = (ListView)findViewById(R.id.lv_show);

        et_chat_message = (EditText) findViewById(R.id.et_input);

        chatAdapter = new ChatAdapter(this, personBeanList);
        lv_chat_dialog.setAdapter(chatAdapter);


        if(intent.getStringExtra("name") != null)
            name.setText(intent.getStringExtra("name"));
        msg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),"點我也沒用",Toast.LENGTH_SHORT).show();
            }
        });
        exit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });
    }
    public void btnSend(View view){
        if (TextUtils.isEmpty(et_chat_message.getText().toString())) {
            Toast.makeText(ChatActivity.this, "發送內容不能爲空", Toast.LENGTH_SHORT).show();
            return;
        }
        PersonBean personBean = new PersonBean();
        personBean.setMeSend(true);
        personBean.setImageId(R.mipmap.myicon);
        personBean.setChatMessage(et_chat_message.getText().toString());
        personBeanList.add(personBean);
        et_chat_message.setText("");
        chatAdapter.notifyDataSetChanged();
        handler.sendEmptyMessage(1);
    }
}

10在Fragment1中調用聊天界面ChatActivity

public class Fragment1 extends Fragment {

    ...

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_1,container,false);
        ListView wechat = (ListView)view.findViewById(R.id.myListView);
        wechat.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                Intent intent = new Intent(getContext(), ChatActivity.class);
                intent.putExtra("name",objects.get(i).getTitle());
                startActivity(intent);
               // Toast.makeText(getContext(),"第" + i + "條" ,Toast.LENGTH_SHORT).show();
            }
        });

        return view;
...
}

11在Fragment2中調用用戶信息界面UserActivity

public class Fragment2 extends Fragment {

    ...

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = getLayoutInflater(savedInstanceState).inflate(R.layout.fragment_2,container,false);
        titleLayout = (LinearLayout)view.findViewById(R.id.title_layout);
        titleLayout.bringToFront();
        title = (TextView)view.findViewById(R.id.title);
        mListView = (ListView)view.findViewById(R.id.contectListView);
        alphabetButton = (ImageButton)view.findViewById(R.id.az);
        sectionToastLayout = (RelativeLayout)view.findViewById(R.id.az_toast_layout);
        sectionToastText = (TextView)view.findViewById(R.id.az_toast);
        ListView connect = (ListView)view.findViewById(R.id.contectListView);
        connect.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                if(i<=3){
                    Toast.makeText(getContext(),"我是: " + listUserBeans.get(i).getUser() , Toast.LENGTH_SHORT).show();
                }else {
                    Intent intent = new Intent(getContext(), UserActivity.class);
                    intent.putExtra("name", listUserBeans.get(i).getUser());
                    intent.putExtra("location", listUserBeans.get(i).getLocatino());
                    intent.putExtra("imageId",listUserBeans.get(i).getImageId()+"");
                    startActivity(intent);
                    //Toast.makeText(getContext(),"第" + i + "條" ,Toast.LENGTH_SHORT).show();
                }
            }
        });
        return view;
    }
    ...
    }

12更改配置AndroidManifest.xml

    ...
    <activity android:name=".activity.ChatActivity"/>
    <activity android:name=".activity.UserActivity"/>

源碼下載