首页 > 解决方案 > Android-Layout:将两个TextView并排放置,并根据第一个TextView的大小调整第二个TextView的大小

问题描述

我有一个CardView布局,我将其提供给RecyclerView。有六 (6)个TextView ,每行有两 (2) 个TextView 。左边的TextView是标题,而右边的是从数据库中提取的值。

我希望标题的宽度与最长标题的宽度相匹配,并且这些值填充CardView内的其余空间,如下所示:

在此处输入图像描述

在此示例中,主题是最长的单词,因此其余标题与主题的宽度相匹配

我尝试使用约束布局:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    app:cardCornerRadius="4dp"
    android:elevation="8dp"
    android:focusable="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:orientation="vertical"
        android:paddingStart="8dp"
        android:paddingTop="8dp"
        android:paddingEnd="8dp"
        android:paddingBottom="8dp">

        <TextView
            android:id="@+id/to"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@string/to"
            android:textColor="#000000"
            android:textSize="16sp"
            app:layout_constraintTop_toBottomOf="@id/date"/>

        <TextView
            android:id="@+id/from"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@string/from"
            android:textColor="#000000"
            android:textSize="16sp"
            app:layout_constraintTop_toBottomOf="@id/to"/>

        <TextView
            android:id="@+id/subjectLabelTextView"
            android:layout_width="96dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@string/subject"
            android:textColor="#000000"
            android:textSize="16sp"
            android:textStyle="bold"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/subject"
            app:layout_constraintTop_toBottomOf="@id/from" />

        <TextView
            android:id="@+id/subject"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Yo, it's summertime. It's rainy though mate. Let's hangout at Macy's later."
            android:textColor="#000000"
            android:textSize="18sp"
            app:layout_constraintLeft_toRightOf="@id/subjectLabelTextView"
            app:layout_constraintTop_toTopOf="@id/subjectLabelTextView" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

这里的问题是当文本太长时,右边的TextView的值被挤出了屏幕。

所以我尝试了嵌套线性布局,如下所示:

https://stackoverflow.com/a/55251997/7764977

使用以下代码:

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test test test test test test test test test test test test test test test"
                android:layout_weight="1"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello world"
                android:layout_weight="0"/>
    </LinearLayout>

    <Space android:layout_width="wrap_content" android:layout_height="20dp"/>

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

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="test test test test test test test test "
                android:layout_weight="1"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello world"
                android:layout_weight="0"/>
    </LinearLayout>

</LinearLayout>

它几乎是完美的。但是,每一行都位于不同的 LinearLayout 中。所以我不能得到一个标题来匹配最长标题的宽度。

标签: androidandroid-layoutandroid-linearlayoutandroid-constraintlayout

解决方案


您可以使用 aBarrier进行此类安排。所以所有 3 个 TitleTextViews都将是 的约束开始,Barrier所有 3 个内容TextViews将是Barrier. 因此,任何左侧 TextView 的宽度都会增加,它会将内容TextViews推向末尾.. 尝试以下布局:-

 <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        app:cardCornerRadius="4dp"
        android:elevation="8dp"
        android:focusable="true">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            android:orientation="vertical"
            android:paddingStart="8dp"
            android:paddingTop="8dp"
            android:paddingEnd="8dp"
            android:paddingBottom="8dp">

        <TextView
                android:id="@+id/to"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="To"
                android:textColor="#000000"
                android:textSize="16sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        <TextView
                android:id="@+id/from"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="From"
                android:textColor="#000000"
                android:textSize="16sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/toContent" />

        <TextView
                android:id="@+id/subjectLabelTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="Subject"
                android:textColor="#000000"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@id/fromContent" />

        <androidx.constraintlayout.widget.Barrier
                android:id="@+id/barrier"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:barrierDirection="end"
                app:constraint_referenced_ids="to,subjectLabelTextView,from"
                tools:layout_editor_absoluteX="395dp"
                tools:layout_editor_absoluteY="8dp" />

        <TextView
                android:id="@+id/subject"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Yo, it's summertime. It's rainy though mate. Let's hangout at Macy's later."
                android:textColor="#000000"
                android:layout_marginStart="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                android:textSize="18sp"
                app:layout_constraintStart_toEndOf="@id/barrier"
                app:layout_constraintTop_toTopOf="@id/subjectLabelTextView" />


        <TextView
                android:id="@+id/toContent"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Me ertime. It's rainy though mate. Let's hangouMacy'"
                android:textColor="#000000"
                android:textSize="18sp"
                android:layout_marginStart="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/barrier"
                app:layout_constraintTop_toTopOf="@id/to" />

        <TextView
                android:id="@+id/fromContent"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="it's me"
                android:textColor="#000000"
                android:textSize="18sp"
                android:layout_marginStart="10dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/barrier"
                app:layout_constraintTop_toTopOf="@id/from" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

推荐阅读