文章目录
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 , 因此 其紧贴 目标组件的右侧 ;
- ① 目标组件 : 该组件的 android:visibility 属性稍后会被设置 View.GONE;
- 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