当前位置： 首页 > news >正文

android 页面布局（1）

news 来源：原创 2024/9/28 4:27:33

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的右侧

<TextViewandroid:id="@+id/TextView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="21313123"/><TextViewandroid: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.Barrierandroid:id="@+id/barrier"android:layout_width="wrap_content"android:layout_height="wrap_content"app:barrierDirection="right"app:constraint_referenced_ids="TextView1,TextView2" /><TextViewandroid:id="@+id/TextView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="13213321"app:layout_constraintLeft_toRightOf="@+id/barrier" />

Group

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

<androidx.constraintlayout.widget.Groupandroid: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，使这个控件移动到占位符的位置。

<androidx.constraintlayout.widget.Placeholderandroid: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" /><TextViewandroid: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时则为距离左边)

<androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"app:layout_constraintGuide_begin="50dp" /><androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.5" />

相关文章：

  • 章管家 listUploadIntelligent.htm SQL注入漏洞
  • matlab r2024a、matlab R2024b保姆级安装教程
  • 语音识别(非实时)
  • Python编程：08- pycharm使用技巧
  • NLP 序列标注任务核心梳理
  • compose remember 作用
  • Vue3+el-menu 递归 emit失效
  • 掌握MATLAB仪器控制工具箱：自动化测试与数据采集的利器
  • python的 __name__和__doc__属性
  • 测温传感器应用
  • 基于TypeScript+React+AntDesign 的车辆车型管理页面
  • 相亲交友系统的社会影响：家庭结构的变化
  • mysql索引 -- 全文索引介绍(如何创建,使用),explain关键字
  • 《AI时代程序员的核心技能升级之路》
  • LInux操作系统安装Jenkins
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • Android 控件背景颜色处理
  • Android系统模拟器绘制实现概述
  • gulp 教程
  • JavaScript设计模式系列一：工厂模式
  • JS正则表达式精简教程（JavaScript RegExp 对象）
  • 当SetTimeout遇到了字符串
  • 体验javascript之美-第五课 匿名函数自执行和闭包是一回事儿吗？
  • 一份游戏开发学习路线
  • media数据库操作，可以进行增删改查，实现回收站，隐私照片功能 SharedPreferences存储地址：
  • # SpringBoot 如何让指定的Bean先加载
  • # 睡眠3秒_床上这样睡觉的人，睡眠质量多半不好
  • # 详解 JS 中的事件循环、宏/微任务、Primise对象、定时器函数，以及其在工作中的应用和注意事项
  • #window11设置系统变量#
  • #Z0458. 树的中心2
  • （2021|NIPS，扩散，无条件分数估计，条件分数估计）无分类器引导扩散
  • (zt)基于Facebook和Flash平台的应用架构解析
  • （翻译）Quartz官方教程——第一课：Quartz入门
  • （每日持续更新）信息系统项目管理（第四版）（高级项目管理）考试重点整理 第13章 项目资源管理（七）
  • （算法二）滑动窗口
  • (微服务实战)预付卡平台支付交易系统卡充值业务流程设计
  • （转）http协议
  • (转贴)用VML开发工作流设计器 UCML.NET工作流管理系统
  • **PyTorch月学习计划 - 第一周；第6-7天: 自动梯度（Autograd）**
  • .NET CF命令行调试器MDbg入门（三） 进程控制
  • .NET Core 项目指定SDK版本
  • .net dataexcel winform控件 更新 日志
  • .NET Reactor简单使用教程
  • .NET 某和OA办公系统全局绕过漏洞分析
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .net快速开发框架源码分享
  • .net下简单快捷的数值高低位切换
  • .NET与 java通用的3DES加密解密方法
  • .NET周刊【7月第4期 2024-07-28】
  • [《百万宝贝》观后]To be or not to be？
  • [2010-8-30]
  • [android] 请求码和结果码的作用
  • [Ariticle] 厚黑之道 一 小狐狸听故事
  • [c#基础]DataTable的Select方法
  • [C#学习笔记]注释