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

如果我理解正确，您不需要屏障这个视图。您只需要将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" />

如何将约束视图的屏障用于父级的顶部

1 个答案: