聊天布局的左侧和右侧与包装的背景对齐

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

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