在 ConstraintLayout 中换行文本

Question

我必须使用约束布局（版本 1.1.2）使用下图进行布局

这已经完成了，但是有一个问题。当任何字段的值大于可用宽度时，它会得到如下内容：

我想保持对齐，同时扭曲后续行中的值文本。这是一行的代码：

        <android.support.constraint.ConstraintLayout
        android:id="@+id/top_application_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constrainedWidth="true"
        app:layout_constraintWidth_default="wrap"
        android:padding="5dp"
        android:background="@drawable/bg_white_header"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/top_client_container"
        >
        <TextView
            android:id="@+id/top_application_label"
            style="?gsTrafficHistoryClientDetailLabel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:text="@string/top_application"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />
        <TextView
            android:id="@+id/top_application"
            style="?gsTrafficHistoryClientDetailValue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="20dp"
            android:text="YouTube.com YouTube.com YouTube.com"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/top_application_label"
            app:layout_constraintTop_toTopOf="parent"
            />
    </android.support.constraint.ConstraintLayout>

现在我尝试了相对布局，但我想使用约束布局来实现。非常感谢任何指点。

Answer 1

替换为以下代码

<android.support.constraint.ConstraintLayout
    android:id="@+id/top_application_container"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constrainedWidth="true"
    app:layout_constraintWidth_default="wrap"
    android:padding="5dp"
    android:background="@drawable/bg_white_header"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/top_client_container"
    >
    <TextView
        android:id="@+id/top_application_label"
        style="?gsTrafficHistoryClientDetailLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:text="@string/top_application"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
    <TextView
        android:id="@+id/top_application"
        style="?gsTrafficHistoryClientDetailValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:text="YouTube.com YouTube.com YouTube.com"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginStart="10dp"
        app:layout_constraintStart_toEndOf="@id/top_application_label"
        app:layout_constraintTop_toTopOf="parent"
        />
</android.support.constraint.ConstraintLayout>

Answer 2

尝试使用 constraintWidth_default 和 constraintWidth_percent，例如：

<android.support.constraint.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:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="top_application"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".5" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com YouTube.com"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent=".5" />

</android.support.constraint.ConstraintLayout>

Answer 3

将您的 TextView 宽度更改为 match_constraint，问题是 wrap_content。

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/top_application_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_white_header"
android:padding="5dp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/top_client_container"
app:layout_constraintWidth_default="wrap">

<TextView
    android:id="@+id/top_application_label"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    style="?gsTrafficHistoryClientDetailValue"
    android:layout_marginBottom="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="20dp"
    android:text="@string/top_application"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/top_application"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    style="?gsTrafficHistoryClientDetailValue"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="20dp"
    android:text="YouTube.com YouTube.com YouTube.com"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/top_application_label"
    app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Answer 4

将 app:layout_constrainedWidth="true" 属性添加到将要扩展 (id/top_application) 的 TextView 以允许 wrap_content 并同时实施约束。

Answer 5

尝试在约束布局中使用链的概念，我使用它实现了您想要的布局，如下所示

<android.support.constraint.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="wrap_content">

    <TextView
        android:id="@+id/tv_left1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:padding="20dp"
        android:text="Most active client"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_right1"
        app:layout_constraintEnd_toStartOf="@+id/tv_right1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/tv_right1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="20dp"
        android:text="YouTube.com YouTube.com YouTube.com"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv_left1"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/tv_left2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:padding="20dp"
        android:text="Most active client"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_right2"
        app:layout_constraintEnd_toStartOf="@+id/tv_right2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_left1"
        />

    <TextView
        android:id="@+id/tv_right2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="20dp"
        android:text="YouTube.com YouTube.com YouTube.com"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv_left2"
        app:layout_constraintTop_toBottomOf="@+id/tv_right1"
        />

    <TextView
        android:id="@+id/tv_left3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:padding="20dp"
        android:text="Most active client"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_right3"
        app:layout_constraintEnd_toStartOf="@+id/tv_right3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_left2"
        />

    <TextView
        android:id="@+id/tv_right3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="20dp"
        android:text="YouTube.com YouTube.com YouTube.com"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv_left3"
        app:layout_constraintTop_toBottomOf="@+id/tv_right2"
        />

</android.support.constraint.ConstraintLayout>

**注意：**除此之外，您还可以使用障碍的概念，您可以找到 here

在 ConstraintLayout 中换行文本

Wrap text in ConstraintLayout

android

android-layout

android-constraintlayout