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

Question

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

下面有一个障碍，我设法将下面的文本很好地限制在 imgage/text 中最大的文本。

但是我的父视图有问题。图像与边距一起包含在父级中。因此，当文本变大时，它就会出现在视图之外。

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

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

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

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

How to use barrier to constraint views to top of parent

android

barrier

android-constraintlayout