如何使用屏障将视图约束到父级顶部

Question

我正在尝试构建一个图像和文本并排并居中对齐的布局。在这两个之下我有另一种看法。

通过下方的障碍，我设法将以下文本很好地限制为最大的图像/文本。

但是我的父视图有问题。图像对父级具有边距。因此，当文本增长时，它就会出现在视图之外。

我试图删除对图像的约束并添加一个屏障（包含图像和文本）并通过整个视图消失来限制父级顶部的屏障。

欢迎提供帮助，因为我已经为此花费了数小时。

<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="wrap_content"
    android:layout_marginBottom="8dp"
    android:background="@color/message_background"
    android:orientation="vertical">


    <ImageView
        android:id="@+id/screen_img_arrow_info"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"

        app:layout_constraintBottom_toBottomOf="@+id/screen_img_info"
        app:layout_constraintLeft_toRightOf="@+id/screen_img_info"
        app:layout_constraintTop_toTopOf="@+id/screen_img_info"
        app:srcCompat="@drawable/ic_keyboard_arrow_right_white_48dp"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1" />


    <ImageView
        android:id="@+id/screen_img_info"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@null"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/info"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1" />

    <TextView
        android:id="@+id/screen_txt_message_info"
        style="@style/messagebox_info"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:inputType="textMultiLine"
        android:text="small text"
        app:layout_constraintBottom_toBottomOf="@+id/screen_img_arrow_info"
        app:layout_constraintLeft_toRightOf="@+id/screen_img_arrow_info"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/screen_img_arrow_info" />

    <android.support.constraint.Barrier
        android:id="@+id/barrierBottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="screen_txt_message_info,screen_img_info,screen_img_arrow_info" />

    <TextView
        android:id="@+id/textbottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/barrierBottom"
        tools:text="Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare." />


</android.support.constraint.ConstraintLayout>

Answer 1

如果我理解正确，则此视图不需要 Barrier。您只需要将您的 textView 定义为低于父级，并将您的 imageView 定义为位于您的 textView 的中心。 为您的 textView 定义这些约束：

app:layout_constraintStart_toEndOf="@+id/screen_img_arrow_info"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"

并为您的 ImageView 定义这些约束：

app:layout_constraintBottom_toBottomOf="@+id/screen_txt_message_info"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/screen_txt_message_info"

结果会是这样

这里是完整的代码：

<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="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="vertical">


<ImageView
    android:id="@+id/screen_img_arrow_info"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/screen_img_info"
    app:layout_constraintLeft_toRightOf="@+id/screen_img_info"
    app:layout_constraintTop_toTopOf="@+id/screen_img_info"
    app:srcCompat="@drawable/ic_accept"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1"
    tools:layout_constraintTop_creator="1" />


<ImageView
    android:id="@+id/screen_img_info"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@null"
    app:layout_constraintBottom_toBottomOf="@+id/screen_txt_message_info"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/screen_txt_message_info"
    app:srcCompat="@drawable/ic_location"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1"
    tools:layout_constraintTop_creator="1" />

<TextView
    android:id="@+id/screen_txt_message_info"
    android:layout_width="270dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:inputType="textMultiLine"
    android:text="small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text "
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/screen_img_arrow_info"
    app:layout_constraintTop_toTopOf="parent" />