Question

我已经使用ConstraintLayout一段时间了，到目前为止一直喜欢它但是遇到了布局对齐的问题。这就是我所拥有的：

您看到TextView有文字请求时间，我希望此视图始终位于LinearLayout（位于其上方）下方以及右侧的评级栏下方。为此，我已将其上锚点锚定到LinearLayout，但似乎无法限制它在右侧的评级栏下方对齐。我的意思是，我每个边缘只能放一个约束吗？

请注意，我也不能假设LinearLayout的高度总是大于或小于（图像视图+评级栏）的高度。因此，更深入的视图应该是请求时间的最终位置的决定因素 TextView

供您参考，这里是上面的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="4dp"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:background="@color/lightGrey"
    android:id="@+id/constraintLayout">


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintHorizontal_bias="0.0"
        android:id="@+id/linearLayout"
        tools:layout_editor_absoluteY="16dp">

        <TextView
            android:text="@string/tutor_name"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tutor_name"/>

        <TextView
            android:text="@string/tutor_skill_set"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:id="@+id/skill_set"/>

        <TextView
            android:text="@string/tutor_types"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:id="@+id/tutor_types" />

        <TextView
            android:text="@string/tutor_location"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/location"
            android:layout_marginTop="12dp" />

    </LinearLayout>


    <ImageView
        android:id="@+id/display_pic"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:adjustViewBounds="false"
        android:scaleType="centerCrop"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@android:color/holo_red_light" />

    <com.iarcuschin.simpleratingbar.SimpleRatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tutor_rating"
        android:layout_below="@+id/display_pic"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        app:srb_starSize="13dp"
        app:srb_numberOfStars="5"
        app:srb_borderColor="@color/colorAccent"
        app:srb_fillColor="@color/colorPrimary"
        app:srb_starBorderWidth="1"
        app:srb_isIndicator="true"
        app:layout_constraintRight_toRightOf="@+id/display_pic"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/display_pic"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintHorizontal_bias="1.0" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.6796875" />

    <TextView
        android:id="@+id/tutor_requested_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Requested time"
        android:textStyle="italic"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        tools:layout_editor_absoluteX="30dp"
        android:layout_marginTop="47dp"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout" />


</android.support.constraint.ConstraintLayout>

我尝试工作的半解决方案 （不是真的）：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_marginBottom="4dp"
    android:layout_marginLeft="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginEnd="8dp"
    android:background="@color/lightGrey">


    <android.support.constraint.ConstraintLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:paddingBottom="10dp"
        android:elevation="2dp"
        android:id="@+id/constraintLayout">


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="16dp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/guideline"
            android:layout_marginRight="8dp"
            android:layout_marginEnd="8dp"
            app:layout_constraintHorizontal_bias="0.0"
            android:id="@+id/linearLayout"
            tools:layout_editor_absoluteY="16dp">

            <TextView
                android:text="@string/tutor_name"
                android:textStyle="bold"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tutor_name"/>

            <TextView
                android:text="@string/tutor_skill_set"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/skill_set"/>

            <TextView
                android:text="@string/tutor_types"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:id="@+id/tutor_types" />

            <TextView
                android:text="@string/tutor_location"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/location"
                android:layout_marginTop="12dp" />

        </LinearLayout>


        <ImageView
            android:id="@+id/display_pic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginEnd="16dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="16dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:color/holo_red_light" />

        <com.iarcuschin.simpleratingbar.SimpleRatingBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tutor_rating"
            android:layout_below="@+id/display_pic"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            app:srb_starSize="13dp"
            app:srb_numberOfStars="5"
            app:srb_borderColor="@color/colorAccent"
            app:srb_fillColor="@color/colorPrimary"
            app:srb_starBorderWidth="1"
            app:srb_isIndicator="true"
            app:layout_constraintRight_toRightOf="@+id/display_pic"
            android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/display_pic"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            app:layout_constraintLeft_toLeftOf="@+id/guideline"
            app:layout_constraintHorizontal_bias="1.0" />

        <android.support.constraint.Guideline
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/guideline"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.6796875" />


    </android.support.constraint.ConstraintLayout>


    <TextView
        android:id="@+id/tutor_requested_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        android:text="Requested time"
        android:textStyle="italic"
        android:layout_marginStart="32dp"
        android:layout_marginBottom="8dp"
        android:layout_below="@+id/constraintLayout" />


</RelativeLayout>

此解决方案有自己的问题，我发布了另一个没有答案的问题：Color of TextView shows as white on a real device with ConstraintLayout

而且，它也有点违背了使用ConstraintLayout本身的目的......

那么，有没有人知道/有解决方案/想法解决上述问题？

Answer 1

ConstraintLayout中名为Barrier的新功能是您的答案。请参阅this accepted answer至＆＃34;带障碍的ConstraintLayout;如何根据尺寸＆＃34; 约束屏障的底部/顶部，如何做到这一点。

Answer 2

以下是Button低于2 TextView且使用android.support.constraint.Barrier的示例

<android.support.constraint.ConstraintLayout 
    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:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        android:text="TextView1 Line1\nLine2"
        android:background="#f00"
        />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="TextView2 Line1\nLine2\nLine3\nLine4"
        app:layout_constraintStart_toEndOf="@+id/text1"
        android:background="#0ff"
        />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="text1,text2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button below text 1 and text 2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/barrier"
        android:background="#eee"
        />
</android.support.constraint.ConstraintLayout>

注意：在此示例中，barrierDirection是"bottom"，您可以将另一个值用于其他用途，例如"top"，"start"，"end"，{ {1}}，"left"

如何在ConstraintLayout中将TextView与其他2个视图对齐？

2 个答案: