在约束布局中切换链组的可见性

Question

在以前的 xml 布局中，我有多个视图组，里面的元素很少。隐藏每个视图组也将隐藏其所有子元素。因为我想要扁平结构并尝试了 ConstraintLayout。酷我知道如何将元素与传播链接以正确对齐。由于平面结构没有包裹 LinearLayout，所以现在我有 3 个视图可以隐藏。我想知道是否有其他方法可以实现这一目标。

无约束布局

<RelativeLayout....
..........
..........
<LinearLayout
        android:visibility="gone"
        tools:visibility="visible"
        android:id="@+id/filter_area"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/lblTerminal"
            android:background="@color/lightGray"
            style="@style/PurpleSubtitle"
            android:drawableRight="@drawable/i_down_yellow"
            android:drawableEnd="@drawable/i_down_yellow"
            android:padding="10dp"
            android:text="@string/lblTerminal"
            android:layout_weight="5"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <View
            android:background="@android:color/black"
            android:layout_width="1dp"
            android:layout_height="match_parent"/>

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/lblCategory"
            android:background="@color/lightGray"
            android:padding="10dp"
            android:drawableRight="@drawable/i_down_yellow"
            android:drawableEnd="@drawable/i_down_yellow"
            style="@style/PurpleSubtitle"
            android:text="@string/lblCategory"
            android:layout_weight="5"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />


    </LinearLayout>
  .......
  .......
  </RelativeLayout>

带约束布局

    <android.support.constraint.ConstraintLayout
    .....
    .....
    .....
       #happy that i no longer need LinearLayout for align properly
       <android.support.v7.widget.AppCompatTextView
            android:id="@+id/lblTerminal"
            android:background="@color/lightGray"
            style="@style/PurpleSubtitle"
            android:drawableRight="@drawable/i_down_yellow"
            android:drawableEnd="@drawable/i_down_yellow"
            android:padding="10dp"
            android:text="@string/lblTerminal"
            android:layout_weight="5"
            android:layout_width="0dp"
            android:layout_height="50dp"
            app:layout_constraintTop_toBottomOf="@+id/txt_search"
            app:layout_constraintRight_toLeftOf="@+id/view3"
            app:layout_constraintLeft_toLeftOf="@+id/guideline2"
            app:layout_constraintHorizontal_chainStyle="spread"/>

        <View
            android:background="@android:color/black"
            android:layout_width="1dp"
            android:layout_height="50dp"
            android:id="@+id/view3"
            app:layout_constraintTop_toBottomOf="@+id/txt_search"
            app:layout_constraintRight_toLeftOf="@+id/lblCategory"
            app:layout_constraintLeft_toRightOf="@+id/lblTerminal" />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/lblCategory"
            android:background="@color/lightGray"
            android:padding="10dp"
            android:drawableRight="@drawable/i_down_yellow"
            android:drawableEnd="@drawable/i_down_yellow"
            style="@style/PurpleSubtitle"
            android:text="@string/lblCategory"
            android:layout_width="0dp"
            android:layout_height="50dp"
            app:layout_constraintTop_toTopOf="@+id/view3"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/view3" />



  ......
  ......
  ......

  </android.support.constraint.ConstraintLayout>

Answer 1

是的，所以现在在 ConstraintLayout 中，我们也可以使用 Group 处理特定视图组的可见性

这是 ConstraintLayout 中引入的一项新功能，目前处于 Beta 版本。

如何将 beta ConstraintLayout 添加到您的项目中？请按照以下步骤操作：

在项目 gradle 文件中添加 maven 支持，如下所示

allprojects {
    repositories {
        maven { url 'https://maven.google.com' }
        jcenter()
    }
}

然后在app gradle dependencies中添加ConstraintLayout库依赖

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

现在您必须在您的ConstraintLayout 中添加一个Group，如下所示

<android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="button7,button3,button2"
        android:id="@+id/group" />  

在Group中，参考id...

app:constraint_referenced_ids="button7,button3,button2"

... 包含 您要处理运行时的逗号分隔的视图 ID，因此，在 Activity 中，您只需如下绑定 Group 并处理可见性

import android.support.constraint.Group; //import statement in activity

Group group=(Group)findViewById(R.id.group); //bind view from xml
group.setVisibility(View.VISIBLE); //this will visible all views
group.setVisibility(View.GONE); //this will set Gone to all views
group.setVisibility(View.INVISIBLE); //this will set INVISIBLE to all view

编辑：ConstraintLayout 1.1.0 稳定版于 2018 年 4 月 12 日发布 https://androidstudio.googleblog.com/2018/04/constraintlayout-110.html

implementation 'com.android.support.constraint:constraint-layout:1.1.0'

Android X 的编辑：如果有人在使用 Android X 包，你可以找到包 信息在这里

https://developer.android.com/jetpack/androidx/migrate

Answer 2

如果您使用的是 beta 版的约束布局，请关注@pavan 的answer

如果您使用的是AndroidX，请按照以下步骤集成约束布局和组：

1)在你的项目中添加AndroidX约束布局依赖：

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

2) 在您的项目中使用 ConstraintLayout Group，如下所示：

<androidx.constraintlayout.widget.Group
                    android:id="@+id/groupDetails"
                    android:layout_width="wrap_content"
                    android:visibility="gone" // Default visibility for group views
                    app:constraint_referenced_ids="textViewUserName, ..." // id's which you want to include in group
                    android:layout_height="wrap_content"/>

3) 以下是切换可见性的编码部分：

private lateinit var groupDetails:Group

...
groupDetails = findViewById(R.id.groupDetails)
groupDetails.visibility = View.GONE // Change visibility

希望对使用 AndroidX 有帮助。

Answer 3

您也可以使用相同的线性布局作为约束布局的子级，或者您也可以将所有这 3 个小部件作为另一个约束布局的子级，并将该布局作为主约束布局的子级。

然后你就可以像以前一样保持可见性和其他东西了。