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

Question

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

您会看到TextView文本Requested time，我希望此视图始终对齐LinearLayout（即在其上方）下方以及右侧的评级栏下方。为此，我已将其上锚点锚定到 LinearLayout，但似乎无法将其限制为在右侧的评级栏下方对齐。我的意思是，我只能为每条边设置一个约束，对吗？

请注意，我也无法对LinearLayout始终大于或小于（图像视图 + 评分栏）的高度做出任何假设。因此，两者更深入的观点应该是Requested time的最终位置的决定因素 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>

这个解决方案有它自己的问题，我发布了另一个没有答案的问题：TextView 的颜色在带有 ConstraintLayout 的真实设备上显示为白色

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

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

Answer 1

这是Button下面的示例2TextView使用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>

注意：在此示例中，barrierDirectionis "bottom"，您可以将另一个值用于其他目的，例如"top", "start", "end", "left","right"