【约束布局】ConstraintLayout 组件可见性 View.GONE 处理与 Margin 属性 ( 约束布局可见性处理 | goneMargin 属性 )

韩曙亮

发布于 2023-03-27 16:33:55

1.1K0

发布于 2023-03-27 16:33:55

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

文章目录

I . 相对定位 Margin 属性

相对定位 Margin 简介 :

1.Margin 作用对象 : 如果某一边对应的 Margin 属性被设置 , 这些 Margin 会被应用于对应的约束 ;
2.Margin 作用效果 : 设置 Margin 属性会强制在被约束的边 ( 源边 Source Side ) 和约束到的位置之间填充指定尺寸的空间 ;
3.Margin 属性类型及取值范围 : Margin 属性值是尺寸类型 , 设置 dip , px 等数值属性 , 其值必须大于等于0 ;
4.常用的相对定位 Margin 属性 :

//左侧边的空白
android:layout_marginStart
//右侧边的空白
android:layout_marginEnd

//左侧边的空白
android:layout_marginLeft
//右侧边的空白
android:layout_marginRight

//顶部边的空白
android:layout_marginTop
//底部边的空白
android:layout_marginBottom

II . 可见性改变后的行为处理 ( Visibility Behavior )

约束布局组件可见性说明 :

1.讨论情况 : 约束布局中 , 当组件被设置成 View.GONE 可见性时 , 针对该组件的处理方式 ;
2.通常处理方案 ( 其它布局 ) : 被设置成 View.GONE 属性的组件 , 一般情况下进行如下处理 :
- ① 取消显示 : 首先其先取消显示 ;
- ② 布局移除 : 然后将该组件从布局中移除 ;
- ③ 尺寸不变 : 但组件的实际的尺寸不会被修改 ;
3.约束布局消失的组件处理方式 :
- ① 取消显示 : 该组件消失 , 不可见 ;
- ② 布局保留 : 该组件仍然是布局中的一部分 ;
- ③ 尺寸修改 : 该组件的宽高尺寸会被设置成 0 , 即该组件收缩成一个点 ;
- ④ 约束保留 : 该组件四个方向的约束仍然有效 , 其所在位置不会改变 ;
- ⑤ Margin 置 0 : 该组件所有方向的 Margin 属性都被设置成 0 ; 即下面的 6 种 Margin 属性清零 ;

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

III . 组件设置 GONE 属性示例

组件设置 GONE 属性改变示例 :

1.布局示例 : 该布局中 , 含有约束组件和被约束组件 , 代码如下 :

<?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"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <!--
        被 约束 的组件
        该组件 垂直方向 居中于整体布局
        其左侧 紧贴 目标组件 , 右侧约束于 父容器
    -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被约束组件"

        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <!--
        约束 到的 目标组件
        该组件 垂直方向 居中于整体布局
        其左侧紧贴布局左边缘 , 但是有 50dip 的边距 Margin
        如果该组件设置不可见 , 就会变成一个点 , 其 50dip 的边距也会消失
        如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效
    -->
    <Button
        android:id="@+id/button"
        android:layout_width="188dp"
        android:layout_height="188dp"
        android:text="目标组件"

        android:visibility="visible"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        android:layout_marginLeft="50dip"


        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

</android.support.constraint.ConstraintLayout>

2.布局截图 :

3.布局说明 :
- ① 目标组件 : 该组件的 android:visibility 属性稍后会被设置 View.GONE;
  - 1> 垂直方向 : 居中于布局 ;
  - 2> 水平方向 : 其约束与父容器左右 , Bias 属性为 0 , 因此其紧贴左侧 , 由于设置了 layout_marginLeft 属性为 50dip , 其组件的左侧举例父容器左边缘有 50dip 的空隙 ;
- ② 被约束组件 : 该组件被约束与目标组件 , 主要是查看目标组件消失后 , 其被约束的状况 ;
  - 1> 垂直方向 : 居中于布局 ;
  - 2> 水平方向 : 其左侧约束与目标组件右侧 , 其右侧约束与父容器右侧 , Bias 属性为 0 , 因此其紧贴目标组件的右侧 ;
4.设置目标组件 GONE 属性 :

android:visibility="visible"

5.设置 GONE 属性后代码 : 与上面的代码唯一不同就是 button 组件 ( 目标组件 ) 可见性被设置成了 GONE ;

<?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"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <!--
        被 约束 的组件
        该组件 垂直方向 居中于整体布局
        其左侧 紧贴 目标组件 , 右侧约束于 父容器
    -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被约束组件"

        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <!--
        约束 到的 目标组件
        该组件 垂直方向 居中于整体布局
        其左侧紧贴布局左边缘 , 但是有 50dip 的边距 Margin
        如果该组件设置不可见 , 就会变成一个点 , 其 50dip 的边距也会消失
        如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效
    -->
    <Button
        android:id="@+id/button"
        android:layout_width="188dp"
        android:layout_height="188dp"
        android:text="目标组件"

        android:visibility="gone"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        android:layout_marginLeft="50dip"


        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

</android.support.constraint.ConstraintLayout>

6.组件设置 GONE 属性布局截图 :

7.组件设置 GONE 属性后的说明 :
- ① 可见性与宽高 : 目标组件仍然在布局中存在 , 只是变成了一个点 , 宽高变成 0 , 不可见 ;
- ② 约束存在 : 目标组件的约束仍然有效 , 垂直方向上 , 仍然居中 , 水平方向紧贴左侧 , 符合约束设置 ;
- ③ Margin 清零 : 左侧 Margin 被设置成了 0dip , 原来的值是 50dip , 组件消失后 , 其值变成 0 ;

被约束到不可见组件后 Margin 属性表现

当被约束组件的某位置 ( Left, Right, Top, Bottom ) 被约束到的目标组件可见性 ( Visibility ) 是 View.GONE 时 , 可以使用下面的属性值 , 设置一个不同的 Margin 属性值 ;

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

注意 : 该属性是设置给可见组件的 , 当该组件被约束到的组件不可见时 , 该属性生效 ;

IV . goneMargin 属性示例

goneMargin 属性示例 :

1.目标组件可见时代码 :

<?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"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <!--
        被 约束 的组件
        该组件 垂直方向 居中于整体布局
        其左侧 紧贴 目标组件 , 右侧约束于 父容器
    -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被约束组件"

        app:layout_goneMarginLeft="50dip"

        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <!--
        约束 到的 目标组件
        该组件 垂直方向 居中于整体布局
        其左侧紧贴布局左边缘 , 但是有 50dip 的边距 Margin
        如果该组件设置不可见 , 就会变成一个点 , 其 50dip 的边距也会消失
        如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效
    -->
    <Button
        android:id="@+id/button"
        android:layout_width="188dp"
        android:layout_height="188dp"
        android:text="目标组件"

        android:visibility="visible"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        android:layout_marginLeft="50dip"


        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

</android.support.constraint.ConstraintLayout>

2.目标组件可见时截图 :

3.目标组件不可见时且没有 goneMargin 属性时的代码 :

<?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"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <!--
        被 约束 的组件
        该组件 垂直方向 居中于整体布局
        其左侧 紧贴 目标组件 , 右侧约束于 父容器
    -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被约束组件"

        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <!--
        约束 到的 目标组件
        该组件 垂直方向 居中于整体布局
        其左侧紧贴布局左边缘 , 但是有 50dip 的边距 Margin
        如果该组件设置不可见 , 就会变成一个点 , 其 50dip 的边距也会消失
        如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效
    -->
    <Button
        android:id="@+id/button"
        android:layout_width="188dp"
        android:layout_height="188dp"
        android:text="目标组件"

        android:visibility="gone"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        android:layout_marginLeft="50dip"


        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

</android.support.constraint.ConstraintLayout>

4.目标组件不可见时且没有 goneMargin 属性时的截图 :

5.目标组件不可见时且有 goneMargin 属性时的代码 :

<?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"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <!--
        被 约束 的组件
        该组件 垂直方向 居中于整体布局
        其左侧 紧贴 目标组件 , 右侧约束于 父容器
    -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被约束组件"

        app:layout_goneMarginLeft="50dip"

        app:layout_constraintStart_toEndOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <!--
        约束 到的 目标组件
        该组件 垂直方向 居中于整体布局
        其左侧紧贴布局左边缘 , 但是有 50dip 的边距 Margin
        如果该组件设置不可见 , 就会变成一个点 , 其 50dip 的边距也会消失
        如果设置了 layout_goneMarginLeft 属性 , 其消失状态下 , 该边距有效
    -->
    <Button
        android:id="@+id/button"
        android:layout_width="188dp"
        android:layout_height="188dp"
        android:text="目标组件"

        android:visibility="gone"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"

        android:layout_marginLeft="50dip"


        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

</android.support.constraint.ConstraintLayout>

6.目标组件不可见时且有 goneMargin 属性时的截图 :

V . 相关资源代码

相关代码地址 :

1.GitHub 项目展示地址 : UI_Demos_4_CSDN_Blog
2.本博客相关代码地址 :
- ① 目标组件可见时且没有 goneMargin 属性时的代码 : activity_gone_behavior_visibile.xml
- ② 目标组件不可见时且没有 goneMargin 属性时的代码 : activity_gone_behavior_gone.xml
- ③ 目标组件可见时且有 goneMargin 属性时的代码 : activity_gone_behavior_gone_margin_visible.xml
- ④ 目标组件不可见时且有 goneMargin 属性时的代码 : activity_gone_behavior_gone_margin_gone.xml