android 怎么编写一个简单的聊天界面

使用RecyclerView来实现一个简单的聊天界面。
准备:

需要两张.9.png的图片来作为聊天气泡的背景图。
需要一张图片作为聊天背景图。

这里写图片描述

1、先建立一个主UI的布局文件,里面需要一个RecyclerView,一个SEND按钮,一个Edtitext输入框。
2、建立一个RecyclerView适配器布局文件,提供左边和右边两个气泡。
3、把每条发送的信息加载到RecyclerView的子项中,并且通过设置一个监听者每当数据更新时就刷新显示。

关于RecyclerView的使用请查看:
http://blog.csdn.net/q296264785/article/details/53581608

主UI布局代码和效果图
这里写图片描述

适配器布局效果图

这里写图片描述

Activity类:

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private List<Msg> list = new ArrayList<>();
    private TextView sendText;
    private MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        sendText = (TextView) findViewById(R.id.send_text);
        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(linearLayoutManager);
        list.add(new Msg("你好!",0));//启动之前先加载两条数据
        list.add(new Msg("Hello!",1));
        adapter = new MyAdapter(list);
        recyclerView.setAdapter(adapter);
        findViewById(R.id.send).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String text_data = sendText.getText().toString();
                    list.add(new Msg(text_data, 1));
                    adapter.notifyItemInserted(list.size() - 1); // 当有新消息时,刷新RecyclerView中的显示
                    recyclerView.scrollToPosition(list.size() - 1); // 将RecyclerView定位到最后一行
                    sendText.setText("");
            }
        });
    }
    }

Msg消息类:

public class Msg {//消息类,每发送一次消息就实例化一个本类,保存消息的内容以及标志位(标志位来确定是发送还是接收)
    private String str_data = null;
    private int flag = 0;

    public Msg(String str_data, int flag) {
        this.flag = flag;
        this.str_data = str_data;
    }

    public int getFlag() {
        return flag;
    }

    public String getStr_data() {
        return str_data;
    }
}

适配器:

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

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

import static com.example.administrator.class_chatscreen.R.layout.right_layout;

/**
 * Created by Administrator on 2016/12/13 0013.
 */

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private List<Msg> list = new ArrayList<>();

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(right_layout, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    public MyAdapter(List<Msg> str_data) {
        this.list = str_data;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Msg msg = list.get(position);
        if (msg.getFlag() == 1){//发送消息时,关闭左边的消息气泡,在右边显示
            holder.right_layout.setVisibility(View.VISIBLE);
            holder.left_layout.setVisibility(View.GONE);
            holder.rightTextView.setText(msg.getStr_data());
        }else if (msg.getFlag() == 0){//接收消息时,关闭右边的消息气泡,在左边显示
            holder.right_layout.setVisibility(View.GONE);
            holder.left_layout.setVisibility(View.VISIBLE);
            holder.leftTextView.setText(msg.getStr_data());
        }
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView leftTextView;
        TextView rightTextView;
        LinearLayout left_layout;
        LinearLayout right_layout;
        public ViewHolder(View itemView) {//控件和UI关联
            super(itemView);
            left_layout = (LinearLayout)itemView.findViewById(R.id.left);
            right_layout = (LinearLayout)itemView.findViewById(R.id.right);
            leftTextView = (TextView) itemView.findViewById(R.id.textViewleft);
            rightTextView = (TextView) itemView.findViewById(R.id.textViewright);
        }
    }
}

UI布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bb"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.administrator.class_chatscreen.MainActivity">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="0sp"
            android:layout_weight="1"></android.support.v7.widget.RecyclerView>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:layout_width="0sp"
            android:layout_weight="8"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:hint="Type something here"
            android:ems="10"
            android:id="@+id/send_text" />

        <Button
            android:text="Send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/send" />
    </LinearLayout>
</LinearLayout>

消息气泡布局(适配器)

<?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="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:background="@drawable/message_left"
        android:gravity="center_vertical">

        <TextView
            android:id="@+id/textViewleft"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:gravity="center_vertical"
        android:background="@drawable/message_right">

        <TextView
            android:id="@+id/textViewright"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="5sp"
            android:paddingRight="10sp"
            android:textColor="#2828ff"
            android:textSize="16sp" />
    </LinearLayout>
</LinearLayout>
发布了34 篇原创文章 · 获赞 10 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/q296264785/article/details/53633731