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

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

<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" />

Answer 2

在app:layout_constrainedWidth="true"上添加TextView属性，该属性将展开（id/top_application）以允许wrap_content并同时实施约束。

Answer 3

替换为以下代码

<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 4

尝试使用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 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中换行

5 个答案: