Sắp xếp đúng TextViews trong RelativeLayout

Question

Tôi đang phát triển một ứng dụng nhắn tin tức thời cho một khóa học đại học, tương tự như Whatsapp như bạn có thể đoán thấy biểu tượng trong ảnh chụp màn hình đính kèm :).

Tôi có một ListFragment được điền bằng CursorAdapter tùy chỉnh. Nó cung cấp cho hai loại quan điểm, gửi tin nhắn (liên kết đến bên phải) và nhận được tin nhắn (liên kết sang trái).

Bố cục cho tin nhắn đã gửi hoạt động tốt, nhưng tôi không thể nói giống với tin nhắn đã nhận.

Đây là một ảnh chụp màn hình:

bố trí nhắn Sent:

<?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" > 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:background="#FFCCCCCC" 
     android:padding="5dp" > 

     <TextView 
      android:id="@+id/ceo_timestamp" 
      android:layout_width="60sp" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:background="#FFBBBBBB" 
      android:gravity="center" 
      android:textSize="10sp" /> 

     <TextView 
      android:id="@+id/ceo_text" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@+id/ceo_timestamp" 
      android:background="#FFAAAAAA" 
      android:gravity="right" 
      android:textSize="16sp" /> 
    </RelativeLayout> 

</RelativeLayout> 

bố trí nhắn đã nhận:

<?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" 
    android:gravity="left" > 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:background="#FF999999" 
     android:padding="5dp" > 

     <TextView 
      android:id="@+id/cei_timestamp" 
      android:layout_width="60sp" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:background="#FF888888" 
      android:gravity="center" 
      android:textSize="10sp" /> 

     <TextView 
      android:id="@+id/cei_text" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toLeftOf="@+id/cei_timestamp" 
      android:background="#FF777777" 
      android:gravity="right" 
      android:textSize="16sp" /> 
    </RelativeLayout> 

</RelativeLayout> 

Những màu nền xấu xí được thêm vào chỉ để xem khoảng trống cho mỗi chế độ xem và bố cục. Như bạn có thể thấy trong ảnh chụp màn hình, gửi tin nhắn (phải liên kết) hoạt động tốt. Các thư đã nhận (được căn trái) không được sắp xếp tốt, vì RelativeLayout mất tất cả không gian ngang sẵn có, được tạo thành từ nội dung gói.

Bất cứ ai cũng biết cách khắc phục hoặc có thể thiết kế bố cục tốt hơn để thực hiện những gì tôi cần?

Cảm ơn rất nhiều.

Answer 1

Trong bố cục tin nhắn đã gửi thay thế thông số android: layout_alignParentRight = "true" bằng android: layout_alignParentLeft = "true".

Answer 2

Khi con số RelativeLayout là alignParentRight, chiều rộng của nó sẽ được tự động đổi thành match_parent. TextView cei_timestamp 's android:layout_alignParentRight="true" làm cho chiều rộng của phụ huynh thay đổi từ wrap_content thành match_parent âm thầm.
U có hai cách để sửa chữa:

1. không sử dụng RelativeLayout

   <?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"> 
   
       <LinearLayout 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentLeft="true" 
        android:background="#FF999999" 
        android:padding="5dp" > 
   
        <TextView 
         android:id="@+id/cei_text" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:background="#FF777777" 
         android:gravity="right" 
         android:textSize="16sp" /> 
   
        <TextView 
         android:id="@+id/cei_timestamp" 
         android:layout_width="60sp" 
         android:layout_height="wrap_content" 
         android:background="#FF888888" 
         android:gravity="center" 
         android:textSize="10sp" /> 
   
       </LinearLayout> 
   
   </RelativeLayout> 
   

   
   

2. không sử dụng wrap_content, đều sử dụng rộng cụ thể như 60dp.

Answer 3

Tôi biết đã muộn nhưng tôi đăng nó cho ai đó đang tìm kiếm giải pháp cho cùng một vấn đề. Để căn chỉnh thông báo đã nhận ở bên trái, chỉ cần xóa dòng này khỏi TextView thứ hai trong xml cho các tin nhắn đã nhận.

android:layout_toLeftOf="@+id/cei_timestamp" 

Tôi đã thử nó với một ví dụ đơn giản và hoạt động. Đây là mã và màn bắn

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="com.example.android.myapplication1.MainActivity"> 
<RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:background="#FF4081"> 

    <TextView 
     android:id="@+id/textView" 
     android:layout_width="60sp" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:gravity="center" 
     android:text="Hello" 
     android:textSize="23sp" /> 


    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toLeftOf="@+id/textView" 
     android:gravity="right" 
     android:text="New Text" 
     android:textColor="#FFF" 
     android:textSize="23sp" /> 
</RelativeLayout> 

<Button 
    android:id="@+id/button2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout centerHorizontal="true" 
    android:layout marginTop = "104dp" 
    android:text="New Button" /></RelativeLayout>`