聊天布局的左側和右側與包裝的背景對齊

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

我最終對發送者和接收者使用了兩個視圖。 這樣，我可以隱藏和顯示每種簡單方法的布局。