Bố cục ngang linh hoạt với `layout_weight` và` maxWidth`

Question

Tôi có một TextView và một hình vuông ImageView mà tôi muốn hiển thị theo bố cục tuyến tính ngang. Mỗi quảng cáo phải chiếm một nửa chiều rộng của chế độ xem gốc và chiều cao phải phù hợp với nội dung (ví dụ: hình ảnh). Văn bản phải được căn giữa theo chiều dọc.

Hạn chế bổ sung là hình ảnh không được phát triển vượt quá maxWidth (= maxHeight) nhất định và chiều rộng dư thừa phải được cung cấp cho TextView. Rõ ràng, điều này mâu thuẫn với quy tắc 50/50 ở trên. Có cách nào để ưu tiên các ràng buộc, tức là cho phép hình ảnh chiếm một nửa không gian trừ khi nó vượt quá một kích thước nhất định?

Đây là những bố trí tôi đã cố gắng:

Người đầu tiên độc đáo trải dài phía bên trái để không gian có sẵn. Tuy nhiên, hình ảnh mất hơn một nửa chiều rộng vì nó không được chỉ định (như trong hình dưới đây).

<LinearLayout 
    android:orientation="horizontal" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <LinearLayout 
     android:orientation="vertical" 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:gravity="center_vertical"> 
     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="Some text."/> 
    </LinearLayout> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:maxWidth="200dp" 
     android:adjustViewBounds="true" 
     android:src="@drawable/image" /> 
</LinearLayout> 

Khi tôi thêm layout_weight đến ImageView nó luôn luôn có một nửa chiều rộng và bỏ qua (hình ảnh xem dưới đây) maxWidth.

<ImageView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:maxWidth="200dp" 
     android:adjustViewBounds="true" 
     android:src="@drawable/image" /> 

Đưa các ImageView trong LinearLayout khác cho phép maxWidth một lần nữa, nhưng kèm theo LinearLayout vẫn mất một nửa của không gian có sẵn (xem hình dưới đây).

<LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="1" 
     android:gravity="right"> 

     <ImageView 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:maxWidth="200dp" 
      android:adjustViewBounds="true" 
      android:src="@drawable/image" /> 
    </LinearLayout> 

Một tùy chọn khác Tôi đã tìm thấy cho similar scenarios là sử dụng một RelativeLayout với một cái nhìn vô hình như một chia trung tâm, nhưng mà khóa bộ phận để 50/50 (hoặc bất cứ nơi nào chia được đặt) .

Answer 1

Được rồi, sẽ đi về phía trước và gửi xml tôi tạo ra, nó khá đơn giản, nó hầu hết điều kiện của bạn .. Một điều tôi đang gặp rắc rối với là phần mà mỗi lượt xem chiếm một nửa chiều rộng của chế độ xem gốc. Hy vọng điều này vẫn giúp bạn trong một số cách.

sample_layout.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" 
    android:layout_margin="2dp" 
    android:background="@android:color/darker_gray"> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignBottom="@+id/img_sample" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:layout_marginRight="2dp" 
     android:layout_toLeftOf="@id/img_sample" 
     android:background="@color/colorPrimary" 
     android:gravity="center_vertical" 
     android:text="Some text." /> 

    <ImageView 
     android:id="@id/img_sample" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_marginLeft="2dp" 
     android:adjustViewBounds="true" 
     android:maxWidth="200dp" 
     android:src="@drawable/sample_img" /> 

</RelativeLayout> 

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

Nếu bao giờ bạn tìm ra cách để các nửa của mỗi điều, bình luận vui lòng nó ở đây, Nó sẽ được tốt đẹp để biết về nó để sử dụng trong tương lai có thể.:)

PS: Bạn đã cân nhắc thực hiện một nửa của mỗi điều theo chương trình? Giống như kiểm tra LayoutParams, sau đó thiết lập động weightSum và layout_weight s.

Sample Image lấy từ này link

Answer 2

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal"> 

    <ImageView 
     android:id="@id/imageView" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentTop="true" 
     android:layout_weight="1" 
     android:adjustViewBounds="true" 
     android:background="@color/blue" 
     android:src="@drawable/ic_launcher" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentStart="true" 
     android:layout_centerVertical="true" 
     android:layout_margin="5dp" 
     android:layout_toStartOf="@id/imageView" 
     android:background="@color/colorPrimary" 
     android:padding="10dp" 
     android:text="Some text. " /> 
</RelativeLayout> 

Answer 3

Nó sẽ không thể là một giải pháp hoàn hảo về mặt hiệu suất. Nhưng bạn có thể đạt được nó bằng cách chơi với FrameLayout và ImageView.

Đây là kết quả:

Layout.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/textGray" 
    android:orientation="vertical"> 

    <FrameLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@color/skyBlue"> 

     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal"> 

      <FrameLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:background="@android:color/white"> 

       <ImageView 
        android:id="@+id/imageView4" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:maxWidth="200dp" 
        android:src="@drawable/ic_settings" 
        android:visibility="invisible" /> 

       <TextView 
        android:id="@+id/TextView" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_gravity="center" 
        android:text="!" /> 
      </FrameLayout> 

      <ImageView 
       android:id="@+id/imageView2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:maxWidth="200dp" 
       android:src="@drawable/ic_settings" /> 
     </LinearLayout> 
    </FrameLayout> 
</LinearLayout> 

Để đạt được hành vi mong muốn, Bạn sẽ phải thiết lập cùng một hình ảnh để cả imagesviews trong bố cục này. một trong số đó là invisble, Nó chỉ là giúp làm cho cha mẹ với cùng chiều rộng và chiều cao mà sẽ dẫn chúng ta để tạo TextView với kích thước tương tự.
Lưu ý:Nếu bạn muốn thay đổi căn chỉnh TextView, bạn có thể làm điều đó với layout_gravity hoặc trọng lực.