安卓约束布局 - 两个布局的顶部约束

Question

安卓约束布局 - 两个布局的顶部约束

androidandroid-layoutconstraintsandroid-constraintlayout

8

我卡在了ConstraintLayout上，不知道该使用哪个属性来实现我的想法。

根据下面的图片，我想将“Details”的顶部约束分别设置为“OrderTakenBy”的“TextView”或“OrderCollectedBy”的“TextView”，具体取决于该视图的高度。

场景：

如果我将详细信息视图的顶部约束设置为OrderTakenBy TextView的底部，如果它占用更多行，则会重叠（如下图），OrderCollectedBy Textview的视图也是如此。反之亦然。

注意：接单人或取货人可能包含两行或三行。

那么我该如何处理适用于动态高度的顶部约束条件？

编辑：

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

有人可以帮忙吗？

- Pratik Butani

如果我将Detail视图的顶部约束设置为OrderCollectedbyBy TextView的底部，那么如果它占用更多行，则会重叠（如下图所示）OrderTakenBy Textview的视图。 - Pratik Butani

1

在下面的电视上使用像线性布局这样的容器，以ordercollected为顺序，可能还要使用ScrollView，并在其中添加您的TextView。 - Pemba Tamang

或者在添加电视时设置约束条件，就像这样 https://dev59.com/IlcO5IYBdhLWcg3ww0Zt#45264822 - Pemba Tamang

1

当然，使用约束布局，我建议将“ordercollected”下的电视机包装在线性布局中，或者以编程方式设置约束条件。 - Pemba Tamang

1

屏障会根据视图的高度自动将顶部约束设置为最高约束。 - Shweta Chauhan

显示剩余3条评论

3个回答

9

使用底部障碍物将 "Deatils" 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>

- Shweta Chauhan

这正是我想要的，虽然上面的答案相同，但我无法从那个答案中得到答案。谢谢。 - raj

-1

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

- Pavel Poley

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jaymin · Accepted Answer

您可以使用障碍物来解决此问题。

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

这里是障碍物的文档。

在app:constraint_referenced_ids="view1,view2"中添加Order Taken By或Order Collected By，并将Detail View的顶部设置为障碍物的底部。 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"/>

这是输出结果：

这是一个链接：