android 双方的消息视图

Question

我正在开发一个聊天应用程序。我所做的就是我可以成功获得 api 响应，并且可以像这样连续显示它们

This is id of sender and reciver

This is the messages

为此，我创建了一个适配器，代码如下所示。

public class Single_chat_adapter extends RecyclerView.Adapter<Single_chat_adapter.Single_chat_adapterViewHolder>{


private List<Datum2> data;
private int rowLayout;
private Context context;

public Single_chat_adapter(List<Datum2> data, int rowLayout, Context context) {
    this.data = data;
    this.rowLayout = rowLayout;
    this.context = context;
}

@Override
public Single_chat_adapterViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.card2, parent, false);
    return new Single_chat_adapterViewHolder(view);    }

@Override
public void onBindViewHolder(Single_chat_adapterViewHolder holder, int position) {
    holder.single_msg.setText(data.get(position).getMsg());
}

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

public class Single_chat_adapterViewHolder extends RecyclerView.ViewHolder {

    TextView single_msg;

    public Single_chat_adapterViewHolder(View itemView) {
        super(itemView);
        single_msg =itemView.findViewById(R.id.userNameTV);
    }
}
}

这里我使用了一个视图，即 card2.xml. 但我需要做的就是在左侧设置发送者消息，在另一侧设置接收者消息。做什么？

Answer 1

1) 在 card2.xml

中创建 2 个视图

2) 左边一个，右边一个

3) 在您的 onBindViewHolder 中设置条件，如果邮件来自发件人，则使左视图可见并隐藏右视图，右视图也同样如此。

Answer 2

要实现您所解释的内容，请在 card2.xml 中创建两个视图（一个在左侧，另一个在右侧）。我已经为你创建了一个。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:layout_marginBottom="6dp"
android:layout_marginTop="4dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<ImageView
    android:layout_width="40dp"
    android:id="@+id/avatar"
    android:background="@drawable/circle_stroke"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:src="@drawable/useric"
    android:layout_height="40dp" />
<RelativeLayout
    android:layout_toEndOf="@+id/avatar"
    android:id="@+id/msg_back"
    android:layout_marginBottom="5dp"
    android:layout_gravity="center_vertical"
    android:background="@drawable/message_bubble_accent"
    android:layout_width="match_parent"
    android:padding="10dp"
    android:orientation="vertical"
    android:layout_height="wrap_content">
    <TextView
        android:textSize="17sp"
        android:id="@+id/user_text"
        android:layout_width="wrap_content"
        android:textColor="@color/white"
        android:text="Hello world how are you?"
        android:layout_height="wrap_content" />
    <TextView
        android:textSize="12sp"
        android:layout_below="@+id/user_text"
        android:id="@+id/chat_time"
        android:textColor="@color/dark"
        android:text="3:33pm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

    <ImageView
        android:layout_width="40dp"
        android:id="@+id/avatar2"
        android:layout_alignParentEnd="true"
        android:layout_below="@+id/msg_back"
        android:background="@drawable/circle_stroke"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:src="@drawable/useric"
        android:layout_height="40dp" />
    <RelativeLayout
        android:layout_toStartOf="@+id/avatar2"
        android:layout_below="@+id/msg_back"
        android:id="@+id/msg_back2"
        android:layout_gravity="center_vertical"
        android:background="@drawable/message_bubble_white"
        android:layout_width="match_parent"
        android:padding="10dp"
        android:orientation="vertical"
        android:layout_height="wrap_content">
        <TextView
            android:textSize="17sp"
            android:id="@+id/user_text2"
            android:layout_width="wrap_content"
            android:textColor="@color/white"
            android:text="Hello world how are you?"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_below="@+id/user_text2"
            android:id="@+id/chat_time2"
            android:textColor="@color/dark"
            android:text="3:33pm"
            android:textSize="12sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_alignParentEnd="true"
            android:layout_below="@+id/user_text2"
            android:text="@string/sent"
            android:width="20dp"
            android:textAppearance="?android:textAppearanceSmall"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:textColor="@android:color/holo_green_light"/>
        </RelativeLayout>
    </RelativeLayout>
</LinearLayout>

修改您的 onBindViewHolder 并添加检查消息是否来自其他用户的条件。像这样...

@Override
public void onBindViewHolder(Single_chat_adapterViewHolder holder, int position) {
    Datum2 datum = data.get(position);
    holder.single_msg.setText(datum.getMsg());
    int msgId = datum.getMsgId();
    if (msgId == datum.getUserMsgId) {
        //Do everything pertaining to this user here
        holder.rightBubble.setText(single_msg);
        //holder.rightAvatar.setText(single_msg) //For setting image

    } else {
        holder.leftBubble.setText(single_msg);
    }
}

确保从 ViewHolder 引用 leftBubble 和 rightBubble，并从使用此适配器的 activity 设置当前 userMsgid。

Answer 3

您必须另外为它们创建 2 个视图类型和两个 xml，并将它们加载到单个适配器中。关注link可能对你有帮助。

Android Chat Tutorial: Building a Messaging UI

Answer 4

您可以将条件放在 onCreateViewHolder 中，这样您就可以交换布局（xml 文件）

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    int layout = -1;
    switch (viewType) {
    case Message.TYPE_MESSAGE:
        layout = R.layout.item_message;
        break;
    case Message.TYPE_LOG:
        layout = R.layout.item_log;
        break;
    case Message.TYPE_ACTION:
        layout = R.layout.item_action;
        break;
    }
    View v = LayoutInflater
            .from(parent.getContext())
            .inflate(layout, parent, false);
    return new ViewHolder(v);
}

您可以通过此方法更改视图类型

@Override
    public int getItemViewType(int position) {
        // Just as an example, return 0 or 2 depending on position
        // Note that unlike in ListView adapters, types don't have to be contiguous
        return position % 2 * 2;
    }

android 双方的消息视图

Message view from both side in android

android

chat

android-viewholder