聊天布局左右对齐包装背景

Question

我正在开发聊天视图布局。并尝试根据发送者和用户左右对齐消息和时间。每条消息和时间都包裹在圆角背景视图中。 这是我的布局视图。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/senderHead"
        android:layout_height="40dp"
        android:layout_width="40dp"
        android:text="Sender"
        android:textColor="#fff"
        android:textSize="16sp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"

        />

    <RelativeLayout
        android:id="@+id/chatLayout"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/chat_background_rounded">

            <TextView
                android:text="Hi John Are you available?"
                android:inputType="textMultiLine"
                android:id="@+id/txtMessage"
                android:textSize="16sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:textColor="#FF000000" />

            <TextView
                android:layout_below="@id/txtMessage"
                android:text="12:45PM"
                android:id="@+id/txtTime"
                android:textSize="12sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="5dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:textColor="@color/colorSecondaryText" />
    </RelativeLayout>


    <TextView
        android:id="@+id/userHead"
        android:layout_height="40dp"
        android:layout_width="40dp"
        android:text="User"
        android:textColor="#fff"
        android:textSize="16sp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        />

</RelativeLayout>

在编码中我进行对齐。

  RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);

if(user){
      txtMessage.setGravity(Gravity.RIGHT);
      txtTime.setGravity(Gravity.RIGHT);
      params.addRule(RelativeLayout.LEFT_OF, R.id.userHead);
      params.addRule(RelativeLayout.START_OF, R.id.userHead);
}else{
     txtMessage.setGravity(Gravity.START);
     txtTime.setGravity(Gravity.START);
     params.addRule(RelativeLayout.RIGHT_OF, R.id.senderHead);
     params.addRule(RelativeLayout.END_OF, R.id.senderHead);
}

chatBgLayout.setLayoutParams(params);

但我没有得到完美的布局，因为userHead 边消息和时间没有完全对齐。如果我将那些Textview 布局宽度设置为match_parent 那么它工作正常。但在这种情况下，气泡不会换行到文本，因为它是匹配父级。较长的文本也占用设备宽度。我希望它限制。 有人可以帮我解决这个问题吗？

我期待这种聊天视图。

Answer 1

所以检查下面的代码我用线性布局替换了相对布局。检查它是否可以解决你的问题

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:id="@+id/senderHead"
    android:layout_height="40dp"
    android:layout_width="40dp"
    android:text="Sender"
    android:textColor="#fff"
    android:textSize="16sp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"

    />

<LinearLayout
    android:id="@+id/chatLayout"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/chat_background_rounded"
    android:layout_toLeftOf="@+id/userHead"
    android:orientation="vertical">

    <TextView
        android:text="Hi John Are you available?"
        android:inputType="textMultiLine"
        android:id="@+id/txtMessage"
        android:textSize="16sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="#FF000000" />

    <TextView
        android:layout_below="@id/txtMessage"
        android:text="12:45PM"
        android:id="@+id/txtTime"
        android:textSize="12sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textColor="@color/colorSecondaryText" 
        android:layout_gravity="end"/>
</LinearLayout>


<TextView
    android:id="@+id/userHead"
    android:layout_height="40dp"
    android:layout_width="40dp"
    android:text="User"
    android:textColor="#fff"
    android:textSize="16sp"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    />

Answer 2

我最终为发送者和接收者使用了两个视图。这样我就可以隐藏和显示每种简单方式的布局。