android 页面布局(1)

Android系统提供五种常用布局分别为LinearLayout(线性布局)、RelativeLayout(相对布局)、FrameLayout(帧布局)、TableLayout(表格布局)、ConstraintLayout(约束布局)

  1. LinearLayout(线性布局)使用用于简单的页面。
  2. RelativeLayout(相对布局)悬浮叠加的页面布局,如居中的头像、悬浮的按钮
  3. FrameLayout(帧布局)定义一个区域,在区域内加载控件,控件按顺序从下向上加载控件,可以叠加加载
  4. TableLayout(表格布局、没用到过)采用行、列的形式来管理控件,它不需要明确声明包含多少行、多少列,而是通过在TableLayout(表格布局)中添加TableLayout(表格布局)或控件来控制表格的行数,可以在TableRow布局中添加控件来控制表格的列数。
  5. 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"

layout_constraintWidth_min和layout_constraintHeight_min:将设置此维度的最小大小

layout_constraintWidth_max和layout_constraintHeight_max:将设置此维度的最大大小

自身宽高比

app:layout_constraintDimensionRatio="0.5"

app:layout_constraintDimensionRatio="1:1"

app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3

app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

当控件用到wrap_content时,我们应当添加对应维度的下列属性,避免布局或者内容混乱

app:layout_constrainedHeight="true"

app:layout_constrainedWidth="true"

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.链头元素选定 :

① 水平方向 : 水平方向上,头是最左侧的控件;

② 垂直方向 : 垂直方向上,链头是最顶部的控件;

链的间距:

  1. 设置边距:链中的控件,如果设置了链的某个方向上的边 ,边距效果会体现出来
  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.单个控件设置为0dp , 该控件会将链上的水平或垂直方向的剩余空间全部占满

2.多个控件设置为0dp , 那么这些控件将平均占用链上的剩余空间

3、.多个控件设置Weight属性: 要设置权重的控件,对应方向的尺寸设置 0dip,该行为与 LinearLayout 中设置 Weight 属性类似,按比例分布

4、辅助工具

Optimizer

当我们使用 MATCH_CONSTRAINT 时,ConstraintLayout 将对控件进行 2 次测量,ConstraintLayout在1.1中可以通过设置 layout_optimizationLevel 进行优化,可设置的值有:

none:无优化

standard:仅优化直接约束和屏障约束(默认)

direct:优化直接约束

barrier:优化屏障约束

chain:优化链约束

dimensions:优化尺寸测量

Barrier

屏障,记录所关联控件的某个方向上的最远的边,用于其他控件进行约束,例如关联控件A和B,方向为右,C控件可以约束自己的左侧到此控件,就可以实现C控件在A和B的右侧

XML 复制代码
    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="21313123"/>

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="22222222222222222222222222"
        app:layout_constraintTop_toBottomOf="@+id/TextView1" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="TextView1,TextView2" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="13213321"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />

Group

Group可以把多个控件归为一组,方便隐藏或显示一组控件,隐藏控件占据的位置还在

XML 复制代码
    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="t1,t3" />

Placeholder

Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id,使这个控件移动到占位符的位置。

XML 复制代码
    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/textview"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:padding="16dp"
        android:text="TextView"
        android:textColor="#000000"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Guideline

Guildline辅助线

Guildline的主要属性:

android:orientation 垂直vertical,水平horizontal

layout_constraintGuide_begin 与布局开始位置的距离

layout_constraintGuide_end 与布局结束位置的位置

layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)

XML 复制代码
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="50dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />
相关推荐
城东米粉儿2 小时前
Android AIDL 笔记
android
城东米粉儿2 小时前
Android 进程间传递大数据 笔记
android
城东米粉儿2 小时前
Android KMP 笔记
android
冬奇Lab4 小时前
WMS核心机制:窗口管理与层级控制深度解析
android·源码阅读
松仔log4 小时前
JetPack——Paging
android·rxjava
城东米粉儿5 小时前
Android Kotlin DSL 笔记
android
城东米粉儿5 小时前
Android Gradle 笔记
android
城东米粉儿5 小时前
Android Monkey 笔记
android
城东米粉儿5 小时前
Android 组件化 笔记
android