Android studio约束布局 ConstraintLayout
2016-12-13 17:34
1101 查看
ConstraintLayout(约束布局), 是2016年![](http://upload-images.jianshu.io/upload_images/749674-b3b7e0677d29e778.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
主页面使用ListView展示多个项, 每项都是不同的布局. 点击项发送不同的Intent, 填充所要显示的页面.
ConstraintLayout的属性设置, 最重要的就是理解属性的表示含义.
Base
Bias
Guide Line
Measure
Ratio
Google I/O最新推出的Android布局, 目前还在完善阶段. 从推出的力度而言, 应该会成为主流布局样式. 在最新版本的
Android Studio中, ConstraintLayout已经成为默认布局.
![](http://upload-images.jianshu.io/upload_images/749674-b3b7e0677d29e778.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
概念
ConstraintLayout约束布局的含义: 根据布局中的其他元素或视图, 确定View在屏幕中的位置. 包含三个重要信息, 根据其他视图设置位置, 根据父容器设置位置, 根据基准线设置位置.layout_constraint[本源]_[目标]="[目标ID]"例如:
app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"约束
当前View的底部至
目标View的底部, 目标View是constraintLayout. 表明, 把当前View放置到constraintLayout(父容器)的底部, 并且底部一致.为了演示多个示例, 使用复用的Activity页面. 根据参数设置标题和布局Id.
基础
ConstraintLayout布局最基本的使用方式, 就是直接指定位置.取消按钮的底部对齐
constraintLayout(父容器)的底部, 左侧对齐父容器的左侧.
下一步按钮的底部对齐父容器的底部, 而左侧对齐
取消按钮的右侧. 并且每个按钮边缘有Margin空隙.
![](http://upload-images.jianshu.io/upload_images/749674-b353f4776b665574.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
比例
ConstraintLayout布局除了对齐属性, 还有重要的比例属性.中心(Center)按钮需要把全部边界与
constraintLayout(父容器)边界对齐, 则为居中. 同时还可以设置水平与竖直的比例, 如0.25.
Bias按钮设置水平与竖直的比例是0.25, 表示左侧与右侧比例是1:4, 上部与下部的比例是1:4.
constraintHorizontal_bias设置水平比例,
constraintVertical_bias设置竖直比例.
tools:layout_editor_absoluteX属性对于视图起到辅助作用, 理解边界的真实距离, 点击可视化布局会自动生成.
![](http://upload-images.jianshu.io/upload_images/749674-f38d9df8a498ab43.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
引导线
ConstraintLayout布局除了与布局对齐以外, 还可以与引导线(Guideline)对齐. 设置
竖直引导线(Guideline)距离左侧
72dp. 按钮(Button)的左侧都与引导线对齐, 上下使用比例的方式排列, 一个0.25比例, 一个0.75比例.
![](http://upload-images.jianshu.io/upload_images/749674-00ba9473f6b343ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
视图尺寸
ConstraintLayout布局中的控件也可以设置填充尺寸. 控件把宽度设置为0dp会自动根据位置进行填充. 如
Large按钮, 左侧对齐与
Small按钮的左侧, 右侧对齐与
constraintLayout父控件的右侧, 宽度设置为
0dp, 实际会填充全部位置.
![](http://upload-images.jianshu.io/upload_images/749674-90a869a87981e054.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
视图纵横比
ConstraintLayout布局还可以使用constraintDimensionRatio设置视图的纵横比, 则需要把
宽(layout_width)或者
高(layout_height)设置为0dp, 根据另一个属性和比例, 计算当前属性, 如两个图片控件的显示大小.
![](http://upload-images.jianshu.io/upload_images/749674-59210569c57c70de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
ConstraintLayout约束布局的基本使用方式就是这些, 可以观察到ConstraintLayout布局兼顾LinearLayout与RelativeLayout的优点, 非常适合构建复杂布局, 会成为Android的主流布局方式.
相关文章推荐
- Android Studio如何把约束布局(ConstraintLayout)改为相对布局(RelativeLayout)
- 约束布局ConstraintLayout加快布局速度
- ConstraintLayout约束布局学习笔记
- ConstraintLayout (约束布局)属性详情
- Android 约束布局(ConstraintLayout)详解
- 谷歌约束控件(ConstraintLayout)扁平化布局入门
- 约束布局constraint-layout导入失败的解决方案 - 转
- 详解Android ConstraintLayout 约束布局的用法
- 哲♂学三幻神带你学习ConstraintLayout(约束布局)
- 使用约束布局(ConstraintLayout)构建灵活的UI
- Android Studio 2.2新增布局——ConstraintLayout完全解析
- androidStudio升级到2.3之后新建Activity布局变成了约束(ConstraintLayout)布局
- android ConstraintLayout约束布局详解
- Android Studio 2.2新增布局——ConstraintLayout完全解析
- 谷歌约束控件(ConstraintLayout)扁平化布局入门
- ConstraintLayout约束布局的概念与使用
- ConstraintLayout约束布局
- androidStudio升级到2.3之后新建Activity布局变成了约束(ConstraintLayout)布局
- 谷歌约束控件(ConstraintLayout)扁平化布局入门
- Android 减少布局层次—— ConstraintLayout 约束布局 的使用