使用recyclerView实现简单的聊天详情页

简单介绍

使用9path图制作聊天气泡背景；使用数据的type字段来加载不同的viewholder

具体实现

adapter

public class ChatAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    List<ChatMessage> chatMessages = new ArrayList<>();

    public ChatAdapter(List<ChatMessage> chatMessages) {
        this.chatMessages = chatMessages;
    }


    @Override
    public int getItemViewType(int position) {
        ChatMessage chatMessage = chatMessages.get(position);
        return chatMessage.getType();
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // 根据类型来决定加上什么holder
        if (viewType == ChatMessage.TYPE_RECEIVED) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.chat_left_item, parent, false);
            return new leftHolder(view);
        } else {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.chat_right_item, parent, false);
            return new rightHolder(view);
        }
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {

        ChatMessage message = chatMessages.get(position);
        // 根据不同的holder来决定加载数据
        if (holder instanceof rightHolder) {
            ((rightHolder) holder).textView.setText(message.getMessage());
        }
        if (holder instanceof leftHolder) {
            ((leftHolder) holder).textView.setText(message.getMessage());
        }
    }

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

    static class rightHolder extends RecyclerView.ViewHolder {
        TextView textView;

        public rightHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.chat_right_text_view);
        }
    }

    static class leftHolder extends RecyclerView.ViewHolder {
        TextView textView;

        public leftHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.chat_left_text_view);
        }
    }
}

chatActivity

public class ChatActivity extends AppCompatActivity {
    private List<ChatMessage> messages = new ArrayList<>();
    private Button received;
    private Button send;
    private EditText mEditText;
    private ChatAdapter adapter;
    private RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat);
        received = findViewById(R.id.chat_received);
        send = findViewById(R.id.chat_send);
        mEditText = findViewById(R.id.chat_edit);

        initData();
        recyclerView = findViewById(R.id.chat_recycler_view);
        LinearLayoutManager manager = new LinearLayoutManager(this);
        adapter = new ChatAdapter(messages);
        recyclerView.setLayoutManager(manager);
        recyclerView.setAdapter(adapter);

        received.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String editText = mEditText.getText().toString();
                if (!editText.equals("")) {
                    ChatMessage receivedMessage = new ChatMessage(editText, ChatMessage.TYPE_RECEIVED);
                    messages.add(receivedMessage);
                    // 把数据添加到最后一行
                    adapter.notifyItemInserted(messages.size() - 1);
                    // 滑动列表定位到最后一行
                    recyclerView.scrollToPosition(messages.size() - 1);
                    mEditText.setText("");
                }
            }
        });

        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String editText = mEditText.getText().toString();
                if (!editText.equals("")) {
                    ChatMessage receivedMessage = new ChatMessage(editText, ChatMessage.TYPE_SEND);
                    messages.add(receivedMessage);
                    // 把数据添加到最后一行
                    adapter.notifyItemInserted(messages.size() - 1);
                    // 滑动列表定位到最后一行
                    recyclerView.scrollToPosition(messages.size() - 1);
                    mEditText.setText("");
                }
            }
        });

    }

    private void initData() {
        ChatMessage leftMessage = new ChatMessage("你好呀！", ChatMessage.TYPE_RECEIVED);
        ChatMessage leftMessage1 = new ChatMessage("嗯嗯", ChatMessage.TYPE_SEND);
        ChatMessage leftMessage2 = new ChatMessage("哈哈哈哈", ChatMessage.TYPE_RECEIVED);
        messages.add(leftMessage);
        messages.add(leftMessage1);
        messages.add(leftMessage2);
    }
}

chatMessage实体类

public class ChatMessage {

    public static final int TYPE_SEND = 1;
    public static final int TYPE_RECEIVED = 0;


    public String getMessage() {
        return message;
    }

    public int getType() {
        return type;
    }

    private String message;
    private int type;

    public ChatMessage(String message, int type) {
        this.message = message;
        this.type = type;
    }
}

activity_chat.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CustomViews.ChatActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/chat_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

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

            <Button
                android:id="@+id/chat_received"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="接受" />
            <EditText
                android:id="@+id/chat_edit"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="输入点啥呢" />

            <Button
                android:id="@+id/chat_send"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="发送" />
        </LinearLayout>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

chat_left_item.xml

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


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

        <TextView
            android:textColor="@color/blue"
            android:id="@+id/chat_left_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp" />

    </LinearLayout>
</FrameLayout>

chat_right_item.xml

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


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

        <TextView
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:id="@+id/chat_right_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
</FrameLayout>

图片

把气泡图放到drawable-xhdpi 文件夹里面，如果没有这个文件夹，就在res目录下新建一个