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



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 . 相关资源代码

相关代码地址 :


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值