Question

我在列表项中使用Constraint Layout，尽管在preview pane中正确显示了代码，但是在编译代码时很难使其正常工作。我可以使用Relative Layout，但仍然想知道为什么它不起作用，因为在许多其他情况下我都遇到这种有问题的行为。

在下图中，这是所有孩子的布局根据需要进行约束。

为清楚起见，下图分别显示了每个孩子的约束条件

这就是它在recycler view中的呈现方式：

列表项向下滚动：

此布局的源代码：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_recent_activity">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civ_user_avatar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:src="@color/primary"/>

        <TextView
            android:id="@+id/tv_status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="TextView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />

        <TextView
            android:id="@+id/tv_candidate_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginLeft="24dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            android:textAppearance="@style/TextTitle"
            app:layout_constraintBottom_toTopOf="@+id/tv_candidate_email"
            app:layout_constraintEnd_toStartOf="@+id/tv_status"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/civ_user_avatar"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />

        <TextView
            android:id="@+id/tv_candidate_email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            android:textAppearance="@style/TextSecondary"
            app:layout_constraintEnd_toStartOf="@+id/tv_status"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_candidate_name" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:text="Assessment : "
            android:textColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_candidate_email" />

        <TextView
            android:id="@+id/tv_assessment_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            android:textAppearance="@style/TextTitleBold"
            app:layout_constraintBottom_toBottomOf="@+id/textView7"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/textView7"
            app:layout_constraintTop_toTopOf="@+id/textView7" />
    </android.support.constraint.ConstraintLayout>
</layout>

是否有对此行为的解释，以便我可以了解约束布局实际上是如何工作的？

更新：删除了Imageview和textView7约束的底部约束后，布局如下所示：

Answer 1

请尝试以下布局：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/civ_user_avatar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="16dp"
            android:src="@color/primary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:text="TextView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />

        <TextView
            android:id="@+id/tv_candidate_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginLeft="24dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            app:layout_constraintEnd_toStartOf="@+id/tv_status"
            app:layout_constraintStart_toEndOf="@+id/civ_user_avatar"
            app:layout_constraintTop_toTopOf="@+id/civ_user_avatar" />


    <TextView
        android:id="@+id/tv_candidate_email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:text="TextView"
        android:textAppearance="@style/TextSecondary"
        app:layout_constraintEnd_toStartOf="@+id/tv_status"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
        app:layout_constraintTop_toBottomOf="@+id/tv_candidate_name" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:maxLines="1"
            android:text="Assessment : "
            android:textColor="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_candidate_name"
            app:layout_constraintTop_toBottomOf="@+id/tv_candidate_email" />

        <TextView
            android:id="@+id/tv_assessment_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="@+id/textView7"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/textView7"
            app:layout_constraintTop_toTopOf="@+id/textView7" />
    </android.support.constraint.ConstraintLayout>
</layout>

Answer 2

针对所有视图而不是match_parent

在xml中使用0dp或在设计视图中选择match_constraint

Answer 3

尝试使用“准则”，例如水平，您可以在此处更轻松地适应所有视图。如果将其与2或3个垂直（准则）结合使用，将更容易获得它。

尽管添加了约束，约束布局仍无法正常工作

3 个答案: