Android中模仿微信发消息界面实现

在微信中发消息界面的实现，其实就是ListView的一个展示，只是将listView进行了一些包装，它的难度并不大，只是细节方面多有考究。这就需要细心耐心的琢磨，以下代码基本实现了发消息的一种动态展示。

其中ListView中的Item的背景图为9.png格式的图，具体请自行搜索。

具体代码如下：

1、ActivitvChat的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="fill_parent"
    android:background="@color/colorLineBold"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:id="@+id/titleBar"
            android:layout_width="match_parent"
            android:background="@color/colorbackground"
            android:layout_height="48dp"
            android:orientation="horizontal">
            <ImageView
                android:padding="15dp"
                android:id="@+id/back_iv"
                android:clickable="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:onClick="omBackground"
                android:src="@drawable/icon_back"
                android:background="@drawable/normalorpressed_background"
                android:visibility="visible"/>
            <TextView
                android:id="@+id/name_tv"
                android:layout_gravity="bottom"
                android:padding="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="用户名"
                android:textSize="18sp"
                android:textColor="#ffff" />
        </LinearLayout>
    </FrameLayout>
    <ListView
        android:layout_weight="1"
        android:id="@+id/message_list"
        android:divider="@null"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </ListView>

    <LinearLayout
        android:background="#ffff"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/edit_message"
            android:layout_weight="1"
            android:textColor="@color/colorBlack"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <TextView
            android:id="@+id/sendmessage"
            android:clickable="true"
            android:layout_gravity="center"
            android:padding="12dp"
            android:textSize="15sp"
            android:background="@drawable/green_background"
            android:text="发送"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

2、ActivityChat的java代码

 

 

package com.example.app_weixin;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class ChatActivity extends AppCompatActivity {
    private ImageView backImageview;
    private EditText editTextmessage;
    private TextView textSendmessage;
    private TextView nameTextview;
    private ListView messageListview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat);
        initView();
        Intent mintent=getIntent();
        String name=mintent.getStringExtra("username");
        nameTextview.setText(name);
    }
    void initView(){
        editTextmessage=(EditText)findViewById(R.id.edit_message);
        textSendmessage=(TextView) findViewById(R.id.sendmessage);
        backImageview=(ImageView)findViewById(R.id.back_iv);
        nameTextview=(TextView)findViewById(R.id.name_tv);
        messageListview=(ListView)findViewById(R.id.message_list);
        final Data_app data_app=(Data_app)getApplication();
        final wechat_messageAdapter wechat_messageadapter=new wechat_messageAdapter(this,data_app.readDataUserMessage());
        messageListview.setAdapter(wechat_messageadapter);
        backImageview.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        textSendmessage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String message=null;
                message=editTextmessage.getText().toString();
                if (message.length()==0)
                    return;
                editTextmessage.setText("");
                data_app.writeDataUserMessage(message);
                wechat_messageadapter.notifyDataSetChanged();
                messageListview.setSelection(data_app.readDataUserMessageSize()-1);
            }
        });
    }
}

3、item_message的XML代码

 

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="80dip"
    android:paddingRight="8dip"
    >
    <ImageView
        android:id="@+id/userimage_message"
        android:src="@drawable/v2"
        android:layout_width="40dip"
        android:layout_height="40dip"
        android:layout_marginLeft="5dip"
        android:layout_alignParentRight="true"/>
    <TextView
        android:id="@+id/usertext_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:paddingRight="5dp"
        android:gravity="center"
        android:textAlignment="center"
        android:text="你好"
        android:textColor="#000"
        android:background="@drawable/userbackground"
        android:layout_alignParentTop="true"
        android:layout_toStartOf="@+id/userimage_message" />
</RelativeLayout>

4、wechat_messageAdapter的java代码

 

 

package com.example.app_weixin;

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

import java.util.List;
import java.util.zip.Inflater;

/**
 * Created by 尽途 on 2017/3/31.
 */

public class wechat_messageAdapter extends BaseAdapter {
    private LayoutInflater minflater;
    private Context mcontext;
    private List<String>data_user_message;
    public wechat_messageAdapter(Context context,List<String>list){
        this.mcontext=context;
        this.minflater= LayoutInflater.from(context);
        this.data_user_message=list;
    }
    public final class ViewHoder{
        TextView messageText;
        ImageView userImage;
    }

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

    @Override
    public Object getItem(int position) {
        return null;
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHoder viewHoder=null;
        if (convertView==null){
            viewHoder=new ViewHoder();
            convertView=minflater.inflate(R.layout.item_message,null);
            viewHoder.messageText=(TextView)convertView.findViewById(R.id.usertext_message);
            viewHoder.userImage=(ImageView)convertView.findViewById(R.id.userimage_message);
            convertView.setTag(viewHoder);
        }else {
            viewHoder=(ViewHoder)convertView.getTag();
        }
        viewHoder.messageText.setText((String)data_user_message.get(position));
        return convertView;
    }
}

具体就是上述代码，不懂可以去我的资源下载整体源文件。