Android ConstraintLayout - 两个布局的顶部约束答案

【问题标题】：Android ConstraintLayout - Top constraint for two layoutAndroid ConstraintLayout - 两个布局的顶部约束
【发布时间】：2023-03-17 01:06:02
【问题描述】：

我被 ConstraintLayout 卡住了，不知道使用哪个属性来做我想做的事。

根据下图，我想根据该视图的高度将Details 的顶部约束赋予TextView 或OrderTakenBy 或OrderCollectedBy。

场景：

如果我将 Detail 视图的顶部约束作为 OrderTakenBy TextView 的底部，它将与 OrderCollectedBy 的视图重叠（如下图） > Textview 如果它有更多的行。反之亦然。

注意：Order Taken By 或 Order Collected By 可能包含两行或三行。

那么对于可以同时适用于两个动态高度的顶部约束，我能做些什么呢？

编辑：

        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                tools:context=".activity.AccountMasterAddActivity"
                tools:showIn="@layout/activity_account_master_add">

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="4dp"
                    android:text="@string/hint_order_no"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toStartOf="@+id/guideline"
                    app:layout_constraintStart_toStartOf="@+id/supplierNameTextView"
                    app:layout_constraintTop_toBottomOf="@+id/supplierNameTextView" />

                <TextView
                    android:id="@+id/orderNoTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView2"
                    app:layout_constraintStart_toStartOf="@+id/textView2"
                    app:layout_constraintTop_toBottomOf="@+id/textView2"
                    tools:text="TextView" />

                <TextView
                    android:id="@+id/textView4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="8dp"
                    android:text="@string/hint_supplier_name"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/supplierNameTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView4"
                    app:layout_constraintStart_toStartOf="@+id/textView4"
                    app:layout_constraintTop_toBottomOf="@+id/textView4"
                    tools:text="TextView" />

                <TextView
                    android:id="@+id/textView6"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="4dp"
                    android:gravity="end"
                    android:text="@string/hint_order_date"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="@+id/supplierNameTextView"
                    app:layout_constraintStart_toStartOf="@+id/guideline"
                    app:layout_constraintTop_toTopOf="@+id/textView2" />

                <TextView
                    android:id="@+id/orderDateTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:gravity="end"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView6"
                    app:layout_constraintStart_toStartOf="@+id/textView6"
                    app:layout_constraintTop_toBottomOf="@+id/textView6"
                    tools:text="TextView" />

                <TextView
                    android:id="@+id/textView8"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="4dp"
                    android:text="@string/hint_order_taken_by"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toStartOf="@+id/guideline"
                    app:layout_constraintStart_toStartOf="@+id/orderNoTextView"
                    app:layout_constraintTop_toBottomOf="@+id/orderNoTextView" />

                <TextView
                    android:id="@+id/orderTakenByTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="TextView TextView"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView8"
                    app:layout_constraintStart_toStartOf="@+id/textView8"
                    app:layout_constraintTop_toBottomOf="@+id/textView8" />

                <TextView
                    android:id="@+id/textView10"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:gravity="end"
                    android:text="@string/hint_order_collected_by"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="@+id/orderDateTextView"
                    app:layout_constraintStart_toStartOf="@+id/orderDateTextView"
                    app:layout_constraintTop_toTopOf="@+id/textView8" />

                <TextView
                    android:id="@+id/orderCollectedByTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:gravity="end"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView10"
                    app:layout_constraintStart_toStartOf="@+id/textView10"
                    app:layout_constraintTop_toBottomOf="@+id/textView10"
                    tools:text="TextView TextView TextView TextView TextView" />

                <TextView
                    android:id="@+id/textView12"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:text="@string/hint_details"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="@+id/orderCollectedByTextView"
                    app:layout_constraintStart_toStartOf="@+id/orderTakenByTextView"
                    app:layout_constraintTop_toBottomOf="@+id/orderCollectedByTextView" />

                <TextView
                    android:id="@+id/detailsTextView"
                    style="@style/TextAppearance.AppCompat.Medium"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:autoLink="phone"
                    android:textColor="@color/colorPrimary"
                    app:layout_constraintEnd_toEndOf="@+id/textView12"
                    app:layout_constraintStart_toStartOf="@+id/textView12"
                    app:layout_constraintTop_toBottomOf="@+id/textView12"
                    tools:text="TextView" />

                <TextView
                    android:id="@+id/productLabel"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:text="Products"
                    android:textColor="@color/colorAccent"
                    app:layout_constraintEnd_toEndOf="@+id/detailsTextView"
                    app:layout_constraintStart_toStartOf="@+id/detailsTextView"
                    app:layout_constraintTop_toBottomOf="@+id/detailsTextView" />

                <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/guideline"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintGuide_percent="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/recyclerView"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:layout_marginTop="2dp"
                    android:layout_marginBottom="4dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="@+id/productLabel"
                    app:layout_constraintStart_toStartOf="@+id/productLabel"
                    app:layout_constraintTop_toBottomOf="@+id/productLabel" />

            </androidx.constraintlayout.widget.ConstraintLayout>

有人可以帮忙吗？

【问题讨论】：

将详细视图的顶部连接到 OrderCollectedbyBy 的最后一个文本视图的底部
如果我将详细视图的顶部约束作为 OrderCollectedbyBy TextView 的底部，如果它获得更多行，它将与 OrderTakenBy Textview 的视图重叠（如下图）。
在下面的电视上使用类似线性布局的容器 ordercollected 也可以是滚动视图，并在那里添加您的文本视图
你肯定有约束布局我说要么将电视包装在线性布局中的 ordercollected 下，要么以编程方式设置约束
屏障根据该视图的高度自动采取顶部约束

标签： android android-layout constraints android-constraintlayout

【解决方案1】：

您可以使用障碍来克服这个问题。

Barrier 引用多个小部件作为输入，并根据指定侧上最极端的小部件创建虚拟指南。例如，左屏障将与所有引用视图的左侧对齐。

这是Barrier的文档

将接受的订单或收集的订单添加为app:constraint_referenced_ids="view1,view2"，并将详细视图设置为Barrie的顶部到底部。

XML 参考：

 <androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="411dp"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="order_taken_by,order_collected_by"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="21dp"/>


<androidx.appcompat.widget.AppCompatTextView
    android:id="@+id/detail"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="New"
    android:textSize="@dimen/_16sp"
    app:layout_constraintTop_toBottomOf="@+id/barrier"/>

这是输出：

【讨论】：

【解决方案2】：

使用底部屏障使用 Details textview 顶部约束来设置障碍和障碍对 OrderTakenBy、OrderCollectedBy textview 的引用。

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/OrderTakenBy"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:text="warehouse sdgjklsdj jgkjskg"
            app:layout_constraintEnd_toStartOf="@+id/OrderCollectedBy"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/OrderCollectedBy"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:text="hospital fhkhsf "
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/OrderTakenBy"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="OrderCollectedBy, OrderTakenBy" />

        <TextView
            android:id="@+id/Details"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="10dp"
            android:text="lorem_ipsum"
            android:gravity="center"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/barrier" />

    </androidx.constraintlayout.widget.ConstraintLayout>

【讨论】：

【解决方案3】：

我认为您可以将order taken by 和order collected by 包装在另一个constraint layout 中，或者以编程方式检查TextView's 的高度（在设置文本之后）并以编程方式更改顶部约束。

【讨论】：