logo标签列表

ConstraintLayout视图的View.GONE用法

androidandroid-constraintlayout
17

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

让我困惑的是，如何尽可能优雅地解决这个“难题”？

看起来不错的蓝图 外观不佳的蓝图

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

我能想到的唯一解决方案是使用ViewGroup来组合这3个视图，并将最后一行的视图与它相连。

我是否忽略了ConstraintLayout中可以帮助我的某些属性？也许有一些回退（或多个）约束，如果其中一个应用于GONE视图，则可以帮助我吗？

如果我的解释似乎很抽象，可能图片会更有帮助 :)

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

似乎你的视图依赖于 View.GONE 视图，这并不是一个好主意。 - Murat Karagöz
还有没有其他方法可以对齐它们，使用不同的视图配置呢？顺序必须保持不变，那些水平对齐的视图每个都可以消失。 - DoruAdryan
我会将每一行作为一个容器，让子元素决定如何对齐，如果某些内容消失了。 - Murat Karagöz
请使用XML代码更新您的问题。您不需要嵌套视图组。 - Rami Jemli
@RamiJemli 已更新。 - DoruAdryan
@MuratK，感谢您的回复，但我希望尽可能少地使用嵌套的ViewGroup。没有其他解决方案，我将选择那个。 - DoruAdryan
1个回答
26
您可以使用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>
现在，最后一行取决于屏障而不是第三行的一个视图。由于屏障取决于第二行的三个视图，您将不会遇到缺少边距的问题。
另外，我注意到您不需要指南线。右侧段可以直接依赖于图像视图。
如果您对屏障不熟悉，这里有一个链接来帮助您：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变得越来越有用，几乎取代了所有其他非可滚动的ViewGroup。感谢您对我的问题的关注！ - DoruAdryan
ConstraintLayout 真的很棒。你应该去看看最新 beta 版本中的新功能，比如 groups 和 placeholders。很高兴它能帮到你。 - Rami Jemli
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接