Question

我需要包含三个元素的布局：

TextView1，具有固定宽度
TextView2具有动态宽度
再固定宽度的TextView3

所有元素必须同时在屏幕上可见。

如果TextView2包含大量文本，则布局应如下所示：

如果TextView2包含的文字很少，则布局应如下所示：

如何使用ConstraintLayout创建它？

Answer 1

这是示例代码：

看看：

Design.xml

# Save the currently effective culture and switch to the French culture
$prev = [cultureinfo]::CurrentCulture
[cultureinfo]::CurrentCulture = 'fr-FR'

# Format with the desired format string.
"{0:$($culture.DateTimeFormat.$pattern)}" -f $time

[cultureinfo]::CurrentCulture = $prev

输出：

Answer 2

您可以使用以下代码创建视图，但唯一的限制是必须为居中文本视图提供最大宽度

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout17"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/hint_color">

    <TextView
        android:id="@+id/txt1"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:gravity="center"
        android:padding="5dp"
        android:text="text1"
        android:textColor="@color/txt_color"
        android:textSize="@dimen/labels_size"
        app:layout_constraintBottom_toBottomOf="@+id/txt2"
        app:layout_constraintEnd_toStartOf="@+id/txt2"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/txt2" />

    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:gravity="center"
        android:padding="5dp"
        android:maxWidth="200dp"
        android:text="text2asdadadasdaasdasdddadadadaddadadasdasdasdasdasdasddadasdasdadasdasdasdasdasdasdasdasdasddadadadadadada"
        android:textColor="@color/txt_color"
        android:textSize="@dimen/labels_size"
        app:layout_constraintBottom_toBottomOf="@+id/txt3"
        app:layout_constraintEnd_toStartOf="@+id/txt3"
        app:layout_constraintTop_toTopOf="@+id/txt3" />

    <TextView
        android:id="@+id/txt3"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:gravity="center"
        android:padding="5dp"
        android:text="text3"
        android:textColor="@color/txt_color"
        android:textSize="@dimen/labels_size"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Answer 3

将您的TextViews放在水平1的水平打包链中，以使其与父级end对齐。为了确保中间的TextView不与其他Views重叠并且满足其约束，您需要为其设置app:layout_constrainedWidth="true"属性。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        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">

    <TextView
            android:id="@+id/view1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintHorizontal_bias="1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/view2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:text="view1"/>

    <TextView
            android:id="@+id/view2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constrainedWidth="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/view3"
            app:layout_constraintStart_toEndOf="@id/view1"
            app:layout_constraintTop_toTopOf="parent"
            android:text="view2"/>

    <TextView
            android:id="@+id/view3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/view2"
            app:layout_constraintTop_toTopOf="parent"
            android:text="view3"/>

</androidx.constraintlayout.widget.ConstraintLayout>

占用ConstraintLayout中元素之间的所有可用空间

3 个答案: