Android：兩個單行TextView並排 - 擠壓和/或裁剪任意一個

Question

使用案例：兩個單行TextView並排水平放置，其中一個設置為填充剩余的可用寬度，另一個包裝其內容。 在特定用例中，左側TextView將展開以填充可用空間。 它們被置於約束或線性布局中，其中每個都可以動態修改其內容，因此需要更多空間。 它們都支持末尾的省略號，以便它們正確表示它們是否縮小。

目標是基於剩余可用空間自動計算寬度的TextView不會被移出布局，被其他TextView裁剪或重疊。 現在發生這種情況，使用ConstraintLayout或LinearLayout ，以防包裝其內容的TextView具有相當大的寬度。

碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">
    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <TextView
                android:id="@+id/textView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"

                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toStartOf="@id/textView2"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"

                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left"
        />
        <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@id/textView"
                app:layout_constraintEnd_toEndOf="parent"

                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)"
        />
    </androidx.constraintlayout.widget.ConstraintLayout>
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"

                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left"
        />
        <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)"
        />
    </LinearLayout>
</LinearLayout>

上面的代碼表示以下布局：

-^^^^^^^^^^^^^^^-------------------------------------
| Left TextView |          Right TextView           |
-^^^^^^^^^^^^^^^-------------------------------------
| Left TextView |          Right TextView           |
-^^^^^^^^^^^^^^^-------------------------------------

一個垂直的LinearLayout包裝一個ConstraintLayout和一個水平的LinearLayout每個行都有相同的內容 - 前面提到的兩個並排的TextView 。 左側TextView設置為占用剩余可用寬度，右側包含其內容，后者在上面的示例中有意設置為寬度大於父級寬度。 這是結果：

似乎允許View擴展並占用剩余空間是雙刃刀：此設置還允許將View擠壓到其內容的大小以下。 這里，要搜索的左側TextView的邏輯解決方法設置是關於最小寬度的。 ConstraintLayout是唯一允許使用類似設置修復此問題的布局，即使不是完全修復。 添加以下行：

app:layout_constraintWidth_min="wrap"

到ConstraintLayout左側TextView的屬性，導致以下UI：

這里的奇怪行為是，好像可擴展TextView的寬度的一半被設置為ConstraintLayout左側和右側的負水平邊距。 無論左側TextView內容的寬度如何，將左側TextView的寬度設置為負水平邊距的百分比始終相同：

有時，這種作物比例不同於50％。

任何想法如何水平容納兩個單行TextView ，以便右對齊，左邊允許占用剩余空間，不可能將其縮小到其內容的大小或其他合理的大小？

Answer 1

我已經閱讀了您的代碼。您已將ConstraintLayout用作父級，並在其中使用了兩個文本視圖。 在你的代碼中一些小問題。 您已設置文本視圖寬度0dp但未設置任何類型的權重，因此視圖未根據您的要求進行設置。

設置權重以水平設置兩個文本視圖

像這樣：

<TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left"
                />
            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:layout_weight=".5"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)"
                />

嘗試完整此代碼

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/textView"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintHorizontal_weight=".5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toStartOf="@id/textView2"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left" />
            <TextView
                android:id="@+id/textView2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintHorizontal_weight=".5"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@id/textView"
                app:layout_constraintEnd_toEndOf="parent"
                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)" />
        </android.support.constraint.ConstraintLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:id="@+id/textView3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".5"
                android:singleLine="true"
                android:ellipsize="end"
                android:background="@android:color/holo_orange_dark"
                android:textSize="32dp"
                android:text="Left"
                />
            <TextView
                android:id="@+id/textView4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:layout_weight=".5"
                android:ellipsize="end"
                android:background="@android:color/holo_blue_bright"
                android:textSize="32dp"
                android:text="1234567890 (1) 123456789 (2)"
                />
        </LinearLayout>
    </LinearLayout>