ConstraintLayout - Có yếu tố sẽ chiếm nhiều chỗ cần thiết lên đến những gì có sẵn

Question

Tôi có một TextView và một nút được tổ chức theo chiều ngang, theo thứ tự, trong một ConstraintLayout:

tôi cần những yếu tố đầu tiên (TextView) để tận chỉ cần không gian cần thiết khi văn bản đủ ngắn, nhưng mở rộng khi cần thiết khi nhiều văn bản cần được hiển thị trong khi vẫn còn đủ không gian cho phần tử thứ hai (Nút) được hiển thị hoàn toàn bên trong chế độ xem, với phần cuối được căn chỉnh tới cuối của phụ huynh.

Đây là những gì XML hiện trông giống như:

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_margin="16dp"> 

    <TextView 
     android:id="@+id/element1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_vertical" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     tools:text="Short enough text"/> 

    <Button 
     android:id="@+id/element2" 
     android:layout_width="wrap_content" 
     android:layout_height="48dp" 
     android:layout_gravity="center_vertical" 
     android:layout_marginEnd="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginStart="8dp" 
     android:drawableLeft="@drawable/element2ButtonDrawable" 
     android:drawablePadding="0dp" 
     android:drawableStart="@drawable/element2ButtonDrawable" 
     android:text="Action" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toRightOf="@id/element1" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintHorizontal_bias="0.0"/> 

</android.support.constraint.ConstraintLayout> 

Đây là cách cây làm cho khi chuyển đổi từ "text đủ ngắn" thành "Một văn bản dài hơn sẽ gây ra hầu hết phía dưới để đẩy ra ngoài các giới hạn nhìn cha mẹ ":

có thể đạt được những gì tôi đang cố gắng để làm bằng công ConstraintLayout?

(tại thời điểm viết, phiên bản mới nhất là 1.0.2)

Cảm ơn!

Answer 1

Bạn nên sử dụng đóng gói dây chuyền ngang với TextView của bạn có chiều rộng phù hợp với những hạn chế và xu hướng ngang bằng 0,0

Dưới đây là giải pháp:

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_margin="16dp"> 

    <TextView 
     android:id="@+id/textView" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginRight="8dp" 
     android:text="Short enough text" 
     app:layout_constraintWidth_default="wrap" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/button" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintHorizontal_chainStyle="packed" 
     app:layout_constraintHorizontal_bias="0.0" /> 

    <Button 
     android:id="@+id/button" 
     android:layout_width="wrap_content" 
     android:layout_height="48dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:drawablePadding="0dp" 
     android:drawableStart="@drawable/element2buttondrawable" 
     android:text="Action" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toRightOf="@+id/textView" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" /> 

</android.support.constraint.ConstraintLayout> 

Dưới đây là cách bố cục này trông trên thiết bị có văn bản và định hướng khác nhau:

Bạn có thể đọc thêm về việc sử dụng chuỗi trong bài viết sau đây:

• Building interfaces with ConstraintLayout
• Build a Responsive UI with ConstraintLayout

Answer 2

Hãy thử một cái gì đó như thế này:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_margin="16dp"> 

    <TextView 
     android:id="@+id/element1" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/element2" 
     app:layout_constraintTop_toTopOf="parent" 
     tools:text="A longer text that will cause most of the bottom to get pushed outside of the parent view bounds" /> 

    <Button 
     android:id="@+id/element2" 
     android:layout_width="wrap_content" 
     android:layout_height="48dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginStart="8dp" 
     android:text="Action" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintHorizontal_bias="1.0" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

</android.support.constraint.ConstraintLayout>