布局之ConstraintLayout 约束布局

简介: 布局之ConstraintLayout 约束布局

布局之ConstraintLayout 约束布局


ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout大约高40%!使用的性能检测工具是Android 7.0(API 级别 24)中引入的 OnFrameMetricsAvailableListener通过该类,你可以收集有关应用界面渲染的逐帧时间信息,进而比较分析不同布局每次测量和布局操作所花费的时间。


Android引用方式

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

Androidx引用方式

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

androidStudio支持一键将已有的布局文件转成ConstraintLayout

image.png

属性


1、layout_constraintXXX_toYYYOf


xxx表示该控件在什么个方向的约束,YYY表示该控件参考的控件的方向,它们的可以是 left/right/top/bottom/start/end的任意一种,包含了水平方向和垂直方向的约束,属性的值为目标控件的id

例如:layout_constraintLeft_toRightOf:该控件的左边在参考控件的右边

image.png

2. match_constraint

充满布局match_parent已不再适用 如设置match_parent会把其他布局覆盖 ,在ConstraintLayout 应设置相应方向0dp,在调整相应方向的app:layout_constraintXXX_toYYYOf=“parent”,

设置该控件在布局同方向上。


设置match_parent:

image.png

设置0dp 奇迹了


image.png

3. 宽高比layout_constraintDimensionRatio

感觉设置了layout_constraintDimensionRatio属性屏幕适配都搞定了(只是感觉)


app:layout_constraintDimensionRatio="2:1属性表示宽高比为2:1,在已经限定控件宽度为300dp时,高度指定为0dp则可自己算出实际高度

image.png

目录
相关文章
|
3月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
3月前
|
数据可视化 Android开发
Android布局——约束布局
Android布局——约束布局
|
3月前
|
XML 数据可视化 Java
Android布局——线性布局、相对布局、帧布局、表格布局、网格布局、约束布局
Android布局——线性布局、相对布局、帧布局、表格布局、网格布局、约束布局
|
3月前
布局
​ 可选值: ​ visible. 默认值 子元素会从父元素中溢出,在父元素外部的位置显示 ​ hidden 溢出的内容将会被裁剪不会显示 (一剪没) ​ scroll 滚 ,生成两个滚动条,通过滚动条来查看完整的内容 ​ auto 根据我们需要生成滚动条 ​ overflow-x:单独处理水平的 ​ overflow-y: 单独处理垂直的
|
9月前
|
Web App开发 设计模式 前端开发
DIV+CSS布局总结
DIV+CSS布局总结
|
XML Android开发 数据格式
像ConstraintLayout一样分解你的布局
A.布局 简单总结一下,不要记忆,记忆,记忆,重要的事情说三遍
148 0
像ConstraintLayout一样分解你的布局
|
Android开发 容器
Android 实现控件对称布局(约束布局和线性布局)
画界面时会遇到很多界面上的布局,虽然很简单,但是每次做起来不熟练,总结一下一些日常的
|
Android开发 iOS开发
IOS开发之UIScrollView约束布局
IOS开发之UIScrollView约束布局
393 0
ConstraintLayout实战小技巧—实现布局跟随效果
ConstraintLayout实战小技巧—实现布局跟随效果
|
数据可视化
Constraintlayout约束布局三问
Constraintlayout——约束布局,作为Jetpack的一个组件推出。今天的面试三问就是关于布局的
198 0