关于Android ConstraintLayout：Android ConstraintLayout – 两个布局的顶部约束

中天 • 2022年8月7日 pm6:02 • 问答 • 132 阅读

Android ConstraintLayout - Top constraint for two layout

我被 ConstraintLayout 卡住了，并且对使用哪个属性来做我想做的事情感到困惑。

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

场景：

如果我将详细视图的顶部约束作为 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"

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"

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"

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"

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"

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"

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 的电视上使用类似线性布局的容器，也可能是滚动视图并在那里添加你的文本视图
或者您需要在添加电视时设置约束，例如stackoverflow.com/a/45264822/8528047
我可以只使用 ConstraintLayout 吗？
你确定约束布局我说要么将电视package在线性布局中的 ordercollected 下，要么以编程方式设置约束
你必须为此使用屏障。如果您分享一些代码，我将使用屏障添加答案。
屏障根据该视图的高度自动采取顶部约束

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

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

这里是屏障的文档

将接受的订单或收集的订单添加为 app:constraint_referenced_ids="view1,view2" 并将详细信息视图设置为巴里的底部。

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

这是输出：

Use bottom barrier
Use Deatils textview top constraint to barrier and barrier reference to 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>

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