android 页面布局(1)
Android系统提供五种常用布局分别为LinearLayout(线性布局)、RelativeLayout(相对布局)、FrameLayout(帧布局)、TableLayout(表格布局)、ConstraintLayout(约束布局)
- LinearLayout(线性布局)使用用于简单的页面。
- RelativeLayout(相对布局)悬浮叠加的页面布局,如居中的头像、悬浮的按钮
- FrameLayout(帧布局)定义一个区域,在区域内加载控件,控件按顺序从下向上加载控件,可以叠加加载
- TableLayout(表格布局、没用到过)采用行、列的形式来管理控件,它不需要明确声明包含多少行、多少列,而是通过在TableLayout(表格布局)中添加TableLayout(表格布局)或控件来控制表格的行数,可以在TableRow布局中添加控件来控制表格的列数。
- ConstraintLayout(约束布局,最多用到),通过这种布局可以很好的适配不同的屏幕大小
ConstraintLayout(约束布局)
1. 相对定位
相对定位是在ConstraintLayout(约束布局)中创建布局的基本构件方法之一。
ConstraintLayout(约束布局)中的扣减可以在横向和纵向上以添加约束关系的方式进行相对定位,其中,横向边包括left、start、right、end,纵向边包括top、bottom、baseline(文本底部的基准线)。
相对定位关系的属性
属性名称 功能描述
layout_constraintLeft_toLeftOf 控件的左边与另外一个控件的左边对齐
layout_constraintLeft_toRightOf 控件的左边与另外一个控件的右边对齐
layout_constraintRight_toLeftOf 控件的右边与另外一个控件的左边对齐
layout_constraintRight_toRightOf 控件的右边与另外一个控件的右边对齐
layout_constraintTop_toTopOf 控件的上边与另外一个控件的上边对齐
layout_constraintTop_toBottomOf 控件的上边与另外一个控件的底部对齐
layout_constraintBottom_toBottomOf 控件间的文本内容基准线对齐
layout_constraintStart_toEndOf 控件的起始边与另外一个控件的尾部对齐
layout_constraintStart_toStartOf 控件的起始边与另外一个控件的起始边对齐
layout_constraintEnd_toStartOf 控件的尾部与另外一个控件的起始边对齐
layout_constraintEnd_toEndOf 控件的尾部与另外一个控件的尾部对齐
百分比宽高所占容器的百分比,可以很好的解决屏幕适配问题,这时需要设置宽度或者高度为0dp
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.25"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.25"
自身宽高比
app:layout_constraintDimensionRatio="0.5"
2. 居中定位和倾向
在ConstraintLayout(约束布局)中,不仅两个控件之间可以通过添加约束的方式确定控件的相对位置,控件也可以通过添加约束的方式确定该控件在父布局【ConstraintLayout(约束布局)】中的相对位置。当相同方向上(横向或纵向),控件两边同时向ConstraintLayout(约束布局)添加剧中显示的控件。
间隔属性
属性名称 功能描述
layout_constraintHorizontal_bias 横向的倾向
layout_constraintVertical_bias 纵向的倾向
需要注意的是,如果ConstraintLayout(约束布局)中的控件在居中方向(横向或者纵向)上和父布局ConstraintLayout(约束布局)的尺寸一致,此时该方向的居中约束和倾向没有意义。也就是没有间隔的话,控制间隔没有意义
3、Chain
Chain(链)是一种特殊的约束,它使我们能够对一组水平或竖直方向互相关的控件进行统一管理。一组控件通过一个双向的约束关系链接起来。
水平方向的链必须采用一种约束语句:left/right或者start/end必须统一,负责可能无效
链头 ( Chains Head ) 设置 :
1.链的行为控制:通过设置链的第一个 控件的参数的属性,可以控制 Chains 约束的各种行为;这个控件成为 Chains Head (链头) ;
2.链头元素选定 :
① 水平方向 : 水平方向上,头是最左侧的控件;
② 垂直方向 : 垂直方向上,链头是最顶部的控件;
链的间距:
- 设置边距:链中的控件,如果设置了链的某个方向上的边 ,边距效果会体现出来
- 空间计算:在CHAIN_SPREAD样式下,如果设置了Margin,该距离会从剩余的空间中扣除
链的三种风格
( 1 ) 链风格设置
通过为链设置不同的风 ,可以控制链的行为;
1.链风格设置:设置链头(链的第一个控件)的属性,即可为链设置不同的风格 ;
2.垂直方向链风格设置:设置链头控件的layout_constraintVertical_chainStyle属性,即添加垂直方向链的风格;
3.水平方向链风格设置:设置链头控件的layout_constraintHorizontal_chainStyle属性,即添加 水平方向链的风格;
( 2 ) 链的三种风格
1、CHAIN_SPREAD风格:链中的控件,均匀分布在垂直或水平的空间中,设置链头属性值" spread " ; 设置链头如下属性:
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintVertical_chainStyle="spread"
2.CHAIN_SPREAD_INSIDE风格:与 CHAIN_SPREAD 类似,但是 链 两端的控件紧贴被约束的控件位置,三个控件还是平均占用指定方向的空间;设置链头如下属性spread_inside :
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"
3.CHAIN_PACKED风格:链上的控件被打包在一起,三个控件的位置可以通过控制 app:layout_constraintHorizontal_bias 或 app:layout_constraintVertical_bias 属性值改变 来修改 ; 设置链头如下属性packed :
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.5"
链的权重设置:该行为与 LinearLayout 中设置 Weight 属性类似 ;
//设置水平方向的权重
app:layout_constraintHorizontal_weight="1"
//设置垂直方向的权重
app:layout_constraintVertical_weight="1"
( 1 ) 链 的 权重设置
Chain ( 链 ) 的 Weight ( 权重 ) 设置 :
1.前提 ( CHAIN_SPREAD 风格 ) : Weight 权重 设置 是在 CHAIN_SPREAD 风格下设置的 ;
2.单个 控件 设置 MATCH_CONSTRAINT 尺寸 : 将 链 上控件 的尺寸设置为 MATCH_CONSTRAINT 属性值 , 该控件会将 链上的 水平 或 垂直 方向的剩余空间 全部占满 ;
3.多个 控件 设置 MATCH_CONSTRAINT 尺寸 : 如果为 链 上的 多个控件的尺寸设置 MATCH_CONSTRAINT 属性 , 那么这些控件将平均占用链上的剩余空间 ;
4.MATCH_CONSTRAINT 尺寸说明 : MATCH_CONSTRAINT 尺寸 等价于 0dip ;
5、.多个 控件 设置 Weight 属性 : 要设置权重的控件 , 对应方向的尺寸设置 0dip , 下面的示例 , 中间控件设置权重 2 , 两侧控件设置权重 1 ; 该行为与 LinearLayout 中设置 Weight 属性类似 ;