一个聊天界面

目录

布局

    先写一个布局，包含一个自定义的菜单，ListView用于显示聊天信息，底部布局左边的imageview用于选择表情，图片，中间输入框，右边发送按钮。
    再写放在ListView中的子布局

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

    <TextView
        android:id="@+id/friend"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginBottom="1dp"
        android:text="不要回我省略号"
        android:textSize="24sp"
        android:background="#88000088"
        />

    <ListView
        android:id="@+id/list_chat"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:divider="#00000000"
        android:background="@mipmap/chatbackground"
        >

    </ListView>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal"
        android:gravity="bottom"
        android:background="#345678"
        >
        <ImageView
            android:id="@+id/image_face"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="2dp"
            android:background="@mipmap/dga"
            />
        <EditText
            android:id="@+id/edit_message"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:maxLines="4"
            android:layout_marginRight="2dp"
            android:background="@drawable/edit_background"
            />
        <Button
            android:id="@+id/button_send"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginRight="5dp"
            android:text="发送"
            android:background="@drawable/button_background_right"
            />
    </LinearLayout>
</LinearLayout>

//
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="2dp"
    style="@style/NoBackground"
    >

    <LinearLayout
        android:id="@+id/layout_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginRight="60dp"
        android:orientation="vertical"
        >
        <ImageView
            android:id="@+id/left_face"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:scaleType="fitXY"
            android:src="@mipmap/messi"
            />
        <TextView
            android:id="@+id/message_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/eng"
            android:layout_marginLeft="30dp"
            android:textColor="#000000"
            style="@style/NoBackground"
            />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/layout_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="60dp"
        android:orientation="vertical"
        >
        <ImageView
            android:id="@+id/right_face"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:scaleType="fitXY"
            android:layout_gravity="right"
            android:src="@mipmap/zhaoliying"
            />
        <TextView
            android:id="@+id/message_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/kap"
            android:layout_marginRight="30dp"
            android:textColor="@color/white"
            style="@style/NoBackground"
            />
    </LinearLayout>
</LinearLayout>

活动

    大概就是这样，还有一个用PopUpWindow弹出GridView布局的表情没有写好

package com.example.linj.myfirstapplication;

import android.app.Activity;
import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.text.Html;
import android.text.Spanned;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

import com.example.linj.myfirstapplication.adapter.ChatAdapter;
import com.example.linj.myfirstapplication.adapter.FaceAdapter;
import com.example.linj.myfirstapplication.modle.Face;
import com.example.linj.myfirstapplication.modle.Message;

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

/**
 * Created by Administrator on 2015/8/27.
 */
public class ChatActivity extends Activity implements View.OnClickListener{

    private ListView mListView;
    private EditText mEditText;
    private Button mButtonSend;
    private ImageView mButtonFace;
    private List<Message> messages = new ArrayList<>();
    private ChatAdapter chatAdapter;
    private LayoutInflater inflater;
    private Spanned spanned;
    private int imageId;
    private int headId;
    private String name;
    private TextView textView;

    private List<Face> faces;
    private LayoutInflater layoutInflater;
    private FaceAdapter faceAdapter;
    private GridView mGridView;
    private int faceId;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.chat_layout);
        Intent intent1 = getIntent();
        name = intent1.getStringExtra("name");
        textView = (TextView) findViewById(R.id.friend);
        textView.setText(name);
        headId = intent1.getIntExtra("head", R.mipmap.messi);
        mListView = (ListView) findViewById(R.id.list_chat);
        mEditText = (EditText) findViewById(R.id.edit_message);
        mButtonSend = (Button) findViewById(R.id.button_send);
        mButtonSend.setOnClickListener(this);
        mButtonFace = (ImageView) findViewById(R.id.image_face);
        mButtonFace.setOnClickListener(this);
        inflater = getLayoutInflater();

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.image_face:
                Intent intent = new Intent(ChatActivity.this, FaceActivity.class);
                startActivityForResult(intent, 5);

//                setContentView(R.layout.grid_layout);
//                mGridView = (GridView) findViewById(R.id.grid_view_test);
//                layoutInflater = getLayoutInflater();
//                initFace();
//                faceAdapter = new FaceAdapter(faces,layoutInflater);
//                mGridView.setAdapter(faceAdapter);
//                mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
//                    @Override
//                    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//                        faceId = faces.get(position).getFaceId();
//                        spanned = Html.fromHtml("<img src = ''/>", new Html.ImageGetter() {
//                            @Override
//                            public Drawable getDrawable(String source) {
//                                Drawable drawable = getResources().getDrawable(faceId);
//                                drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
//                                return drawable;
//                            }
//                        }, null);
//                        mEditText.getText().insert(mEditText.getSelectionStart(), spanned);
//                    }
//                });
//
//                PopupWindow popupWindow = new PopupWindow(ChatActivity.this);
//                View popView = layoutInflater.inflate(R.layout.grid_layout, null);
//                popupWindow.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
//                popupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
//                popupWindow.setContentView(popView);
//                popupWindow.setOutsideTouchable(true);
//                popupWindow.showAtLocation(v, Gravity.LEFT, 0, 300);
                break;
            case R.id.button_send:
                spanned = mEditText.getText();
                Message message = new Message(spanned,0,R.mipmap.zhaoliying);
                Spanned receiver = Html.fromHtml("..............");
                Message message1 = new Message(receiver,1, headId);
                messages.add(message);
                messages.add(message1);
                chatAdapter = new ChatAdapter(inflater,messages);
                mListView.setAdapter(chatAdapter);
                chatAdapter.notifyDataSetChanged();
                mListView.setSelection(messages.size());
                mEditText.setText("");
                break;
            default:
                break;
        }
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        switch (requestCode){
            case 5:
                if (resultCode == RESULT_OK){
                    imageId = data.getIntExtra("face", R.mipmap.flag);
                    spanned = Html.fromHtml("<img src = ''/>", new Html.ImageGetter() {
                        @Override
                        public Drawable getDrawable(String source) {
                            Drawable drawable = getResources().getDrawable(imageId);
                            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
                            return drawable;
                        }
                    }, null);
                    mEditText.getText().insert(mEditText.getSelectionStart(), spanned);
                }
                break;
            default:
                break;
        }
    }
    public int getHeadId() {
        return headId;
    }

    private void initFace() {
        faces = new ArrayList<>();
        Face face1 = new Face(R.mipmap.ebg);
        faces.add(face1);
        Face face2 = new Face(R.mipmap.eca);
        faces.add(face2);
        Face face3 = new Face(R.mipmap.biaoqing);
        faces.add(face3);
        Face face4 = new Face(R.mipmap.dga);
        faces.add(face4);
        Face face5 = new Face(R.mipmap.ecb);
        faces.add(face5);
        Face face6 = new Face(R.mipmap.ecw);
        faces.add(face6);
        Face face7 = new Face(R.mipmap.ecz);
        faces.add(face7);
        Face face8 = new Face(R.mipmap.ecy);
        faces.add(face8);
        Face face9 = new Face(R.mipmap.edd);
        faces.add(face9);
        Face face10 = new Face(R.mipmap.edj);
        faces.add(face10);
        Face face11 = new Face(R.mipmap.edq);
        faces.add(face11);
        Face face12 = new Face(R.mipmap.ecs);
        faces.add(face12);
        Face face13 = new Face(R.mipmap.ecn);
        faces.add(face13);
        Face face14 = new Face(R.mipmap.eco);
        faces.add(face14);
        Face face15 = new Face(R.mipmap.ecc);
        faces.add(face15);
    }
}

适配器

继承自BaseAdapter，注意getView（）方法的写法，用缓存器缓存布局

package com.example.linj.myfirstapplication.adapter;

import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.linj.myfirstapplication.ChatActivity;
import com.example.linj.myfirstapplication.R;
import com.example.linj.myfirstapplication.modle.Message;

import java.util.List;

/**
 * Created by Administrator on 2015/8/27.
 */
public class ChatAdapter extends BaseAdapter {

    private LayoutInflater inflater;
    private List<Message> messages;

    public ChatAdapter(LayoutInflater inflater, List<Message> messages) {
        this.inflater = inflater;
        this.messages = messages;
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        if (convertView == null){
            viewHolder = new ViewHolder();
            convertView = inflater.inflate(R.layout.chat_message_layout, null);
            viewHolder.leftLayout = (LinearLayout) convertView.findViewById(R.id.layout_left);
            viewHolder.rightLayout = (LinearLayout) convertView.findViewById(R.id.layout_right);
            viewHolder.textViewLeft = (TextView) convertView.findViewById(R.id.message_left);
            viewHolder.textViewRight = (TextView) convertView.findViewById(R.id.message_right);
            viewHolder.imageViewLeft = (ImageView) convertView.findViewById(R.id.left_face);
            viewHolder.imageViewRight = (ImageView) convertView.findViewById(R.id.right_face);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        Message message = messages.get(position);
        if (message.getType()==0){
            viewHolder.rightLayout.setVisibility(View.VISIBLE);
            viewHolder.leftLayout.setVisibility(View.GONE);
            viewHolder.textViewRight.setText(message.getMessage());
            viewHolder.imageViewLeft.setImageResource(message.getFaceId());
        } else if (message.getType()==1){
            viewHolder.leftLayout.setVisibility(View.VISIBLE);
            viewHolder.rightLayout.setVisibility(View.GONE);
            viewHolder.textViewLeft.setText(message.getMessage());
            viewHolder.imageViewLeft.setImageResource(message.getFaceId());
        }
        notifyDataSetChanged();
        return convertView;
    }

    class ViewHolder{
        LinearLayout leftLayout;
        LinearLayout rightLayout;
        TextView textViewLeft;
        TextView textViewRight;
        ImageView imageViewLeft;
        ImageView imageViewRight;
    }
}

model

消息的实体，写的不好

package com.example.linj.myfirstapplication.modle;

import android.text.Spanned;

/**
 * Created by Administrator on 2015/8/27.
 */
public class Message {
    private Spanned message;
    private int type;
    private int faceId;

    public Message(Spanned message, int type, int faceId) {
        this.message = message;
        this.type = type;
        this.faceId = faceId;
    }

    public Spanned getMessage() {
        return message;
    }

    public void setMessage(Spanned message) {
        this.message = message;
    }

    public int getType() {
        return type;
    }

    public void setType(int type) {
        this.type = type;
    }

    public int getFaceId() {
        return faceId;
    }

    public void setFaceId(int faceId) {
        this.faceId = faceId;
    }
}

界面

总结

我不想总结，因为巨丑无比，还有很多不完善的，毕竟初学，还没有学完，继续努力，加油！