ConstraintLayout View.GONE 用法

Question

我最近开始使用 ConstraintLayout。正如我发现的那样，大多数功能都非常简单明了，并且在带有示例、文本和视频教程等的文档中得到了很好的解释。

我想到的是如何尽可能优雅地解决这个问题'puzzle'？

如您所见，在布局的右侧部分，我有多个左对齐的视图。在最后一行，有 3 个水平对齐的视图（它们也彼此顶部对齐）。问题是：如果我将该行的第一个视图的可见性设置为 GONE，则其他两个（在同一行中）按预期向左移动，但下面的一个（垂直对齐的最后一行）越过前一行（因为它constraintTop 属性设置为 View 设置为 GONE 的底部）。

我能想到的唯一解决方案是使用 ViewGroup 将这 3 个视图分组并将约束添加到最后一行视图。

我是否在 ConstraintLayout 上遗漏了一些属性可以帮助我的情况？如果在 GONE View 上设置其中一个约束，可能是某种回退（或多个）约束？

抱歉，如果我的解释看起来很深奥，也许图片会对您有更多帮助:)

LE: 添加布局：https://gist.github.com/DoruAdryan/7e7920a783f07b865489b1af0d933570

Answer 1

您可以使用 ConstraintLayout 的新 Barriers 功能。

    <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.support.v7.widget.AppCompatImageView
            android:id="@+id/iv_item_small_product_image"
            android:layout_width="113dp"
            android:layout_height="113dp"
            android:layout_marginLeft="7dp"
            android:layout_marginStart="7dp"
            android:background="@android:drawable/btn_radio"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <android.support.v7.widget.AppCompatImageView
            android:id="@+id/iv_row_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:background="@android:drawable/bottom_bar"
app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ro.emag.android.views.FontTextView
            android:id="@+id/tv_row_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="3dp"
            android:ellipsize="end"
            android:maxLines="2"
            app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/iv_row_1"
            app:layout_goneMarginTop="0dp"
            tools:text="Some text long enough to be split on multiple lines on some devices." />

        <android.support.v7.widget.AppCompatRatingBar
            android:id="@+id/rb_row_3_1"
            style="@style/Widget.AppCompat.RatingBar.Small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="9dp"
            android:isIndicator="true"
            android:numStars="5"
            android:stepSize="0.1"
            app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
            app:layout_constraintTop_toBottomOf="@id/tv_row_2" />

        <TextView
            android:id="@+id/tv_row_3_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginStart="6dp"
            android:layout_marginTop="9dp"
            app:layout_constraintLeft_toRightOf="@+id/rb_row_3_1"
            app:layout_constraintTop_toBottomOf="@id/tv_row_2"
            tools:text="106" />

        <TextView
            android:id="@+id/tv_row_3_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginStart="6dp"
            android:layout_marginTop="9dp"
            app:layout_constraintLeft_toRightOf="@+id/tv_row_3_2"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tv_row_2"
            app:layout_goneMarginLeft="0dp"
            app:layout_goneMarginStart="0dp"
            tools:text="Options available" />

        <android.support.constraint.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="rb_row_3_1, tv_row_3_2, tv_row_3_3" />

        <TextView
            android:id="@+id/tv_row_4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="3dp"
            android:ellipsize="end"
            android:maxLines="1"
            app:layout_constraintLeft_toRightOf="@+id/iv_item_small_product_image"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/barrier"
            tools:text="Some text on last row" />

    </android.support.constraint.ConstraintLayout>

现在，最后一行取决于屏障而不是第三行的其中一个视图。由于障碍取决于第二行的三个视图，因此您不会遇到边距消失的问题。
另外，我注意到您不需要指南。右段可以直接依赖imageview

如果您不熟悉障碍，这里有一个 link 可以帮助您。

由于此功能仅在 ConstraintLayout 的 1.1.0 beta1 版本中可用，请不要忘记将此行添加到您的 build.gradle 文件中。

compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1'

确保包含 maven { url "https://maven.google.com" }

ConstraintLayout View.GONE 用法

ConstraintLayout View.GONE usage

android

android-constraintlayout