时间戳

首页 > 解决方案 > 将聊天气泡对齐到 RecyclerView 的左侧

android - 将聊天气泡对齐到 RecyclerView 的左侧

问题描述

我正在创建一个聊天应用程序，一切准备就绪，问题是，当我在 RecyclerView 中显示我的文本时，friend聊天气泡与用户发送的文本一样对齐。我怎样才能将它与recyclerview的左侧对齐？我有 2 个不同的布局，每个气泡一个，一个 recyclerview 适配器。

这是一张解释我的问题的照片：

在此处输入图像描述

这是own_message.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:paddingEnd="15dp"
    android:paddingStart="60dp"
    android:clipToPadding="false">

    <TextView
        android:id="@+id/own_message_body"
        style="@style/ChatBubble"
        android:background="@drawable/own_message"
        tools:text="This is my own message, hope it is okay.">
    </TextView>

</RelativeLayout>

和others_message.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
    android:clipToPadding="false"
    android:paddingStart="15dp"
    android:paddingTop="10dp"
    android:paddingEnd="60dp"
    android:paddingBottom="10dp">


    <TextView
        android:id="@+id/others_message_body"
        style="@style/ChatBubble"
        android:background="@drawable/others_message"
        tools:text="Hey! I am a stranger, i'm chatting with you right now! :)" />

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignTop="@+id/others_message_body"
        android:layout_alignBottom="@+id/others_message_body"
        android:layout_marginStart="10dp"
        android:layout_toEndOf="@+id/others_message_body"
        android:contentDescription="@string/user_avatar"
        app:srcCompat="@drawable/ic_user_avatar">

    </ImageView>

</RelativeLayout>

而且，如果需要，这就是我调用适配器的地方：

val layoutManager = LinearLayoutManager(applicationContext, RecyclerView.VERTICAL, false)
                binding.recyclerViewChat.layoutManager = layoutManager
                binding.recyclerViewChat.setHasFixedSize(true)
                val adapter = ChatAdapter(messages)
                binding.recyclerViewChat.adapter = adapter

如何将好友聊天气泡对齐到适配器的左侧？

标签： androidxmlkotlinandroid-recyclerview

解决方案

您的两个布局都向右对齐。您希望others_message.xml与左侧对齐。

您希望您ImageView与start. parent然后，您希望 与thatTextView对齐。endImageView

因此，您需要执行以下操作：

  1. 替换android:layout_toEndOf="@+id/others_message_body"为android:layout_alignParentStart="true"_ImageView
  2. 给出ImageViewan id，例如android:id="@+id/imageViewId"
  3. 通过添加将 对齐TextView到末尾ImageViewandroid:layout_alignEnd="@id/imageViewId"

的最终结果others_message.xml应如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
    android:clipToPadding="false"
    android:paddingStart="15dp"
    android:paddingTop="10dp"
    android:paddingEnd="60dp"
    android:paddingBottom="10dp">


    <TextView
        android:id="@+id/others_message_body"
        style="@style/ChatBubble"
        android:background="@drawable/others_message"
        android:layout_alignEnd="@id/imageViewId"
        tools:text="Hey! I am a stranger, i'm chatting with you right now! :)" />

    <ImageView
        android:id="@+id/imageViewId"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignTop="@id/others_message_body"
        android:layout_alignBottom="@id/others_message_body"
        android:layout_marginStart="10dp"
        android:layout_alignParentStart="true"
        android:contentDescription="@string/user_avatar"
        app:srcCompat="@drawable/ic_user_avatar">

    </ImageView>

</RelativeLayout>

推荐阅读