使用ConstraintLayout

Question

我目前正遇到一个相对复杂的基于ConstraintLayout的设计实现。

设计是一排物品，如上所示。这些行是静态的，根据某些与数据相关的条件来显示/隐藏。

我遇到的问题是，我没有找到一种可靠的方法来正确地容纳布局中分隔线/屏障之间的每一行。

如您在上图中所看到的，我的约束布局不符合预期的障碍/分隔线。我在下面包含了此布局的XML。

 <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp">

                <ImageView
                    android:id="@+id/timeIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_clock"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/timeTextView"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:textColor="#FF354052"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    app:layout_constraintEnd_toStartOf="@id/statusTextView"
                    app:layout_constraintStart_toEndOf="@+id/textGuideline"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:text="4:20 PM" />

                <com.weedmaps.driver.android.view.StatusTextView
                    android:id="@+id/statusTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:paddingBottom="4dp"
                    android:paddingEnd="27dp"
                    android:paddingStart="27dp"
                    android:paddingTop="4dp"
                    android:textAllCaps="true"
                    android:textSize="12sp"
                    android:textStyle="bold"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:background="@color/accepted_blue" />

                <android.support.constraint.Barrier
                    android:id="@+id/headerDividerTopBarrier"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="top"
                    app:constraint_referenced_ids="headerDivider" />

                <!-- / end delivery status section -->

                <android.support.constraint.Barrier
                    android:id="@+id/deliveryStatusSectionBottomBarrier"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="bottom"
                    app:constraint_referenced_ids="statusTextView, timeTextView, timeIcon" />

                <View
                    android:id="@+id/headerDivider"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#FFE6EAEE"
                    app:layout_constraintTop_toBottomOf="@id/deliveryStatusSectionBottomBarrier"
                    app:layout_constraintBottom_toTopOf="@id/destinationInfoSectionTopBarrier" />

                <android.support.constraint.Barrier
                    android:id="@+id/destinationInfoSectionTopBarrier"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="top"
                    app:constraint_referenced_ids="directionsIcon, addressTextContainer, locationIcon" />

                <ImageView
                    android:id="@+id/locationIcon"
                    android:layout_width="16dp"
                    android:layout_height="20dp"
                    android:src="@drawable/ic_location_pin"
                    app:layout_constraintTop_toBottomOf="@id/headerDivider"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintBottom_toTopOf="@id/customerInfoSectionTopBarrier" />

                <android.support.constraint.Barrier
                    android:id="@+id/locationIconBarrier"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="end"
                    app:constraint_referenced_ids="locationIcon" />

                <LinearLayout
                    android:id="@+id/addressTextContainer"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="12dp"
                    android:orientation="vertical"
                    app:layout_constraintTop_toBottomOf="@id/headerDivider"
                    app:layout_constraintEnd_toStartOf="@id/directionsIconBarrier"
                    app:layout_constraintStart_toEndOf="@+id/textGuideline"
                    app:layout_constraintBottom_toTopOf="@id/customerInfoSectionTopBarrier">

                    <TextView
                        android:id="@+id/addressTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="#FF354052"
                        android:textSize="14sp"
                        android:textStyle="bold"
                        tools:text="423 Clyde Ford Apt. 25" />

                    <TextView
                        android:id="@+id/cityStateZipTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="#FF354052"
                        android:textSize="14sp"
                        tools:text="Irvine, CA 92602" />

                </LinearLayout>

                <android.support.constraint.Barrier
                    android:id="@+id/directionsIconBarrier"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="start"
                    app:constraint_referenced_ids="directionsIcon" />

                <ImageView
                    android:id="@+id/directionsIcon"
                    android:layout_width="47dp"
                    android:layout_height="47dp"
                    android:src="@drawable/ic_directions"
                    app:layout_constraintTop_toBottomOf="@id/headerDivider"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintBottom_toTopOf="@id/customerInfoSectionTopBarrier" />

                <android.support.constraint.Barrier
                    android:id="@+id/destinationInfoSectionBottomBarrier"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="bottom"
                    app:constraint_referenced_ids="directionsIcon, addressTextContainer, locationIcon" />

                <!-- / end destination info section -->

                <View
                    android:id="@+id/destinationDivider"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#FFE6EAEE"
                    app:layout_constraintTop_toBottomOf="@+id/destinationInfoSectionBottomBarrier" />

                <android.support.constraint.Barrier
                    android:id="@+id/customerInfoSectionTopBarrier"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="top"
                    app:constraint_referenced_ids="customerNotesLayout, smsIcon, phoneIcon, customerInfoLayout, personIcon" />

                <ImageView
                    android:id="@+id/personIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_person"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="@id/customerInfoLayout" />

                <LinearLayout
                    android:id="@+id/customerInfoLayout"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:paddingEnd="8dp"
                    app:layout_constraintBottom_toTopOf="@id/customerNotesLayout"
                    app:layout_constraintEnd_toStartOf="@id/phoneIcon"
                    app:layout_constraintStart_toEndOf="@+id/textGuideline"
                    app:layout_constraintTop_toBottomOf="@id/destinationDivider">

                    <TextView
                        android:id="@+id/nameTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:singleLine="true"
                        android:textColor="#FF354052"
                        android:textSize="14sp"
                        android:textStyle="bold"
                        tools:text="423 Clyde Ford Apt. 25ssdfsdasvewwevsrdggreve vevevrsv gaervavrvsevsevve0" />

                    <TextView
                        android:id="@+id/viewDocumentsTextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/delivery_detail_view_documents"
                        android:textColor="#FF354052"
                        android:textSize="14sp"
                        app:layout_constraintStart_toEndOf="@id/personIcon"
                        app:layout_constraintTop_toBottomOf="@+id/nameTextView" />

                </LinearLayout>

                <ImageView
                    android:id="@+id/phoneIcon"
                    android:layout_width="47dp"
                    android:layout_height="47dp"
                    android:layout_marginEnd="8dp"
                    android:src="@drawable/ic_call"
                    android:visibility="gone"
                    app:layout_constraintBottom_toTopOf="@+id/customerNotesLayout"
                    app:layout_constraintEnd_toStartOf="@id/smsIcon"
                    app:layout_constraintStart_toEndOf="@id/customerInfoLayout"
                    app:layout_constraintTop_toBottomOf="@id/destinationInfoSectionBottomBarrier"
                    tools:visibility="visible" />

                <ImageView
                    android:id="@+id/smsIcon"
                    android:layout_width="47dp"
                    android:layout_height="47dp"
                    android:src="@drawable/ic_chat"
                    android:visibility="gone"
                    app:layout_constraintBottom_toTopOf="@id/customerNotesLayout"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@id/phoneIcon"
                    app:layout_constraintTop_toBottomOf="@id/destinationInfoSectionBottomBarrier"
                    tools:visibility="visible" />

                <android.support.constraint.Barrier
                    android:id="@+id/customerInfoAndIconBarrierBottom"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="bottom"
                    app:constraint_referenced_ids="personIcon, customerInfoLayout, phoneIcon, smsIcon" />

                <FrameLayout android:id="@+id/customerNotesLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:visibility="gone"
                    app:layout_constraintTop_toBottomOf="@id/customerInfoAndIconBarrierBottom"
                    tools:visibility="visible">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/customer_notes_gray"
                        android:orientation="vertical"
                        android:layout_marginTop="16dp"
                        android:paddingStart="32dp"
                        android:paddingTop="16dp"
                        android:paddingEnd="16dp"
                        android:paddingBottom="16dp">

                        <TextView
                            android:id="@+id/customer_note_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="5dp"
                            android:text="@string/customer_notes_title"
                            android:textColor="@color/darker_gray"
                            android:textSize="12sp"
                            android:textStyle="bold" />

                        <TextView
                            android:id="@+id/customerNote"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:lineSpacingMultiplier="1.25"
                            android:textColor="@color/darker_gray"
                            android:textSize="14sp"
                            tools:text="iojsdfij siodfjosid fisdfj oidfj osidj fos fghfg hfhfg hgf hfgh fgh fgh fh fgh fghfgh fg fghf gh fgh f gf fgh f fgh gh fg fhfgh fhf hfghfghgfhfghfg hfgfisddjf " />

                    </LinearLayout>

                </FrameLayout>

                <android.support.constraint.Barrier
                    android:id="@+id/customerInfoSectionBottomBarrier"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="bottom"
                    app:constraint_referenced_ids="customerNotesLayout, smsIcon, phoneIcon, customerInfoLayout, personIcon" />

                <!-- / end customer info section -->

                <View
                    android:id="@+id/customerDivider"
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#FFE6EAEE"
                    app:layout_constraintTop_toBottomOf="@id/customerInfoSectionBottomBarrier" />

</android.support.constraint.ConstraintLayout>

我有一种误解，认为我在这里误用了约束布局，但是我不确定100％会是什么。

任何对此问题的见解将不胜感激。谢谢！

Answer 1

我已经在上面的布局中牢记了您想要实现的几乎所有用例，但是仍然需要涵盖其中的任何其他内容；请进一步询问并仔细阅读代码。

XML代码：

<?xml version="1.0" encoding="utf-8"?>

<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="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <ImageView
        android:id="@+id/iv_time_icon"
        android:layout_width="36dp"
        android:layout_height="42dp"
        android:src="@android:drawable/btn_star_big_on"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="#FF354052"
        android:textSize="14sp"
        android:textStyle="bold"
        android:layout_marginStart="10dp"
        app:layout_constraintStart_toEndOf="@id/iv_time_icon"
        app:layout_constraintTop_toTopOf="@id/iv_time_icon"
        app:layout_constraintEnd_toStartOf="@id/tv_status"
        app:layout_constraintBottom_toBottomOf="@+id/iv_time_icon"
        tools:text="4:20 PM" />

    <TextView
        android:id="@+id/tv_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="27dp"
        android:paddingEnd="27dp"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:textSize="12sp"
        android:textStyle="bold"
        tools:text="ACCEPTED"
        android:textColor="@android:color/white"
        android:background="@android:color/holo_blue_dark"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/iv_time_icon"
        app:layout_constraintBottom_toBottomOf="@id/iv_time_icon" />

    <View
        android:id="@+id/v_divider_line_one"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="#FFE6EAEE"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/iv_time_icon"
        app:layout_constraintEnd_toEndOf="parent" />

    <ImageView
        android:id="@+id/iv_location_icon"
        android:layout_width="36dp"
        android:layout_height="32dp"
        android:src="@android:drawable/btn_star_big_on"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/v_divider_line_one"
        app:layout_constraintBottom_toBottomOf="@id/barrier_below_complete_address" />

    <LinearLayout
        android:id="@+id/ll_complete_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingStart="0dp"
        android:paddingTop="10dp"
        android:paddingEnd="20dp"
        android:paddingBottom="10dp"
        android:layout_marginStart="10dp"
        android:orientation="vertical"
        app:layout_constraintStart_toEndOf="@+id/iv_location_icon"
        app:layout_constraintTop_toBottomOf="@id/v_divider_line_one"
        app:layout_constraintBottom_toTopOf="@id/barrier_below_complete_address"
        app:layout_constraintEnd_toStartOf="@id/iv_directions_icon">

        <TextView
            android:id="@+id/tv_address"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FF354052"
            android:textSize="14sp"
            android:textStyle="bold"
            tools:text="423 Clyde Ford Apt. 25 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" />

        <!--
        Also, try:
        tools:text="423 Clyde Ford Apt. 25"
        In the TextView just above (i.e. with
        the id="@+id/tv_address").

        Works fine (for me) as per the use case.  -->

        <TextView
            android:id="@+id/tv_city_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FF354052"
            android:textSize="14sp"
            tools:text="Irvine, CA 92602" />

    </LinearLayout>

    <!--
    Barrier to place the views appropriately
    in case of increase or decrease in the
    address text i.e. the text placed within
    the TextView with the id="@+id/tv_address".  -->

    <android.support.constraint.Barrier
        android:id="@+id/barrier_below_complete_address"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="ll_complete_address" />

    <ImageView
        android:id="@+id/iv_directions_icon"
        android:layout_width="46dp"
        android:layout_height="46dp"
        android:src="@android:drawable/btn_star_big_on"
        app:layout_constraintTop_toBottomOf="@id/v_divider_line_one"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/barrier_below_complete_address" />

    <View
        android:id="@+id/v_divider_line_two"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="#FFE6EAEE"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier_below_complete_address"
        app:layout_constraintEnd_toEndOf="parent" />

    <ImageView
        android:id="@+id/iv_person_icon"
        android:layout_width="36dp"
        android:layout_height="44dp"
        android:layout_marginTop="5dp"
        android:paddingTop="6dp"
        android:paddingBottom="6dp"
        android:src="@android:drawable/btn_star_big_on"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/v_divider_line_two" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:paddingStart="0dp"
        android:paddingEnd="20dp"
        android:textColor="#FF354052"
        android:textSize="14sp"
        android:textStyle="bold"
        android:layout_marginTop="5dp"
        android:layout_marginStart="10dp"
        tools:text="423 Clyde Ford Apt. 25 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
        app:layout_constraintStart_toEndOf="@id/iv_person_icon"
        app:layout_constraintTop_toTopOf="@+id/iv_person_icon"
        app:layout_constraintEnd_toStartOf="@id/iv_call_icon"
        app:layout_constraintHorizontal_bias="0.0" />

    <TextView
        android:id="@+id/tv_view_documents"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="View Documents"
        android:textColor="#FF354052"
        android:textSize="14sp"
        app:layout_constraintStart_toStartOf="@id/tv_name"
        app:layout_constraintTop_toBottomOf="@+id/tv_name" />

    <ImageView
        android:id="@+id/iv_message_icon"
        android:layout_width="46dp"
        android:layout_height="46dp"
        android:src="@android:drawable/btn_star_big_on"
        app:layout_constraintTop_toTopOf="@+id/tv_name"
        app:layout_constraintEnd_toEndOf="parent" />

    <ImageView
        android:id="@+id/iv_call_icon"
        android:layout_width="46dp"
        android:layout_height="46dp"
        android:src="@android:drawable/btn_star_big_on"
        android:layout_marginEnd="10dp"
        app:layout_constraintTop_toTopOf="@id/iv_message_icon"
        app:layout_constraintEnd_toStartOf="@id/iv_message_icon" />

    <LinearLayout
        android:id="@+id/ll_customer_notes"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:orientation="vertical"
        android:layout_marginTop="10dp"
        android:paddingStart="32dp"
        android:paddingEnd="32dp"
        android:paddingTop="16dp"
        android:paddingBottom="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_message_icon">

        <TextView
            android:id="@+id/tv_title_customer_notes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            tools:text="CUSTOMER NOTES"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_customer_notes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:lineSpacingMultiplier="1.25"
            tools:text="Please don't knock on the door. I have a dog. Just call when you're here. Thank you. Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum."
            android:textColor="@android:color/black"
            android:textSize="14sp" />

    </LinearLayout>

    <View
        android:id="@+id/v_divider_line_three"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="15dp"
        android:background="#FFE6EAEE"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/ll_customer_notes"
        app:layout_constraintEnd_toEndOf="parent" />

    <!--
    To manage the visibility of each row,
    refer the grouping logic as applied
    below for each row (including its
    separator/divider line; which is just
    below it).

    Try changing the 'visibility' of each
    group to "gone".  -->

    <android.support.constraint.Group
        android:id="@+id/group_row_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="iv_time_icon, tv_time, tv_status, v_divider_line_one" />

    <android.support.constraint.Group
        android:id="@+id/group_row_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="iv_location_icon, ll_complete_address, iv_directions_icon, v_divider_line_two" />

    <android.support.constraint.Group
        android:id="@+id/group_row_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="iv_person_icon, tv_name, tv_view_documents, iv_call_icon, iv_message_icon, v_divider_line_three, ll_customer_notes" />

</android.support.constraint.ConstraintLayout>

屏幕截图（用于以上代码）：

1]具有更多的地址文本。

2]带有更少的地址文本。

我希望这对您有所帮助，也可以增进您对ConstraintLayout中某些事物的理解，例如Barrier，Group等。