Android Material Design控件使用(一)——ConstraintLayout 约束布局
参考文章:
约束布局ConstraintLayout看这一篇就够了
ConstraintLayout - 属性篇
介绍
Android
ConstraintLayout
是谷歌推出替代PrecentLayout
的组件。
支持相对布局、线性布局、帧布局,看来更像是
FrameLayout
、LinearLayou
t、`RelativeLayout·三者的结合体,并且比这三者更强大的是实现了百分比布局。
大家都知道安卓碎片严重,使用百分比适配,那么将彻底解决适配问题
总结:我最近也是刚学,学完之后,发现这个布局已经将上述的所有布局的特点全部融合在一起了,使用起来简单方便的不要不要的,就是学习的属性有点多啊。
不过,多也是正常的,毕竟融合了五大布局的所有特点,学完这个布局,各种界面UI都难不倒我们了
添加依赖
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
我使用的是Android Studio3.0.1版本,已经自动导入了,默认使用的就是这个布局
属性及对应的方法
我们先了解一下一些基本的概念
这里提一下,start和left其实都是指控件的左边,end和right都事指控件的右边
基本属性
注意,这里的属性都得使用命名空间来才能使用
宽高属性与之前的layout相同,wrap_content
和match_parent
,但除此之外,还多出了一种,名为match contraint
实际上,这个多出来的相当于0dp
,如果之前使用过LinearLayout
的权重的话,应该对0dp
有印象.
这里,约束布局应该是继承了Linearlayout
的特性,之后我们设置权重与Linearlayout
的操作也是类似,具体的请往后面看,这可是实现了百分比布局的强大布局。
属性值为控件id
layout_constraintLeft_toLeftOf
当前控件的左边依赖于属性控件的左边layout_constraintLeft_toRightOf
当前控件的左边依赖于属性控件的右边layout_constraintRight_toLeftOf
ayout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
当前的控件基线与属性控件的基线对齐layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
示例:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btnA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btnB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
A左边依赖总布局的左边,顶部则是依赖总布局的顶部,B则是左边依赖于A的右边,顶部依赖父布局的顶部
其他的就不一一列举了,举一反三,挺容易的
mragin 边距
只有在设置了依赖,之后设置边距才会效果
这个属性不需要使用app开头,属于原本的属性
android:layout_marginStart
设置左边的边距android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
例如:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btnA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:layout_marginLeft="30dp"
android:layout_marginTop="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btnB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="60dp"
android:text="B"
app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
示例:
使控件B与A垂直对齐
B的左边依赖A的左边,B的右边依赖A的右边即可
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btnA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="124dp"
android:layout_marginTop="16dp"
android:text="A"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="@+id/btnB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:text="B"
app:layout_constraintEnd_toEndOf="@+id/btnA"
app:layout_constraintStart_toStartOf="@+id/btnA"
app:layout_constraintTop_toBottomOf="@+id/btnA"/>
</android.support.constraint.ConstraintLayout>
辅助类或属性使用
1. Barrier 屏障 控件
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
app:constraint_referenced_ids="TextView1,TextView2" />
app:barrierDirection
为屏障所在的位置,可设置的值有:bottom
、end
、left
、right
、start
、top
app:constraint_referenced_ids
为屏障引用的控件,可设置多个(用“,”隔开)
2. Gruop 组 控件
Group可以把多个控件归为一组,方便隐藏或显示一组控件,举个例子:
<android.support.constraint.Group
android:id="@+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
app:constraint_referenced_ids="TextView1,TextView3" />
3. Placeholder 占位符 控件
设置好占位符控件的位置,之后调用setContent,把指定id的控件放在占位符的位置
app:content=
4. Guideline 辅助线 控件
可以使用这个控件达到百分比布局的效果,或者是当前的控件没有符合条件的参照物的情况使用
Guideline
还有三个重要的属性,每个Guideline
只能指定其中一个:
layout_constraintGuide_begin
,指定左侧或顶部的固定距离,如100dp,在距离左侧或者顶部100dp的位置会出现一条辅助线layout_constraintGuide_end
,指定右侧或底部的固定距离,如30dp,在距离右侧或底部30dp的位置会出现一条辅助线layout_constraintGuide_percent
,指定在父控件中的宽度或高度的百分比,如0.8,表示距离顶部或者左侧的80%的距离。android:orientation
设置垂直或者是水平
Guideline
是隐藏的,不用我们进行多余的设置,虽然外面在预览面板可以死看到它的存在
例子:使一个按钮的长度占满屏幕一半
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guidelineBegin"
app:layout_constraintGuide_percent="0.5"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guidelineBegin"
app:layout_constraintTop_toTopOf="parent" />
Radio 比例 属性
方便快捷调整控件的宽高比,结合Guideline使用更佳
例子:
app:layout_constraintDimensionRatio
想要宽度与总布局一样,但高度是宽度的三分之一
宽高比为3:1
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="3:1"/>
Chain 链 属性
可以把这个当做成一个加强版的LinearLayout
由上图,很好的知道了A与B的约束,A的左边是父控件的左边,右边则是B,B的左边是A,B的右边的是父控件的右边
chainstyle
有三种属性,分别是spread
,spread_inside
,pack
,效果如下图
spread
元素将展开(默认)spread_inside
元素展开,但链的端点不会展开pack
链中的元素将包裹在一起。子控件的水平或垂直方向的偏置bias
属性会影响包裹中元素的位置
剩下的两种则是通过添加属性实现的
weighted chain
是在spread chain
的基础上,而packed chain with bias
则是在weight chain
的基础上
style为spread
的,使用layout_constraintHorizontal_weight
或layout_constraintVertical_weight
来设置weigh
权重
style为pack
的,使用layout_constraintHorizontal_bias
或layout_constraintVertical_bias
进行偏移设置,属性值0-1,也是百分比,改第一个元素
这里需要说明的是,除了水平,还可以是垂直排列,不过,不能通过属性来更改,而是通过约束来更改,把左边改为顶端,右边改为底部
如果是水平的,使用属性layout_constraintHorizontal_chainStyle
进行chainstyle属性的更改
垂直的则是使用layout_constraintVertical_chainStyle
例子:
三个按钮平分宽度(只需要将宽度设置为0dp
就可以达到目的)
<Button
android:id="@+id/btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintEnd_toStartOf="@id/btn1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintStart_toEndOf="@id/btn"
app:layout_constraintEnd_toStartOf="@id/btn2"/>
<Button
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintStart_toEndOf="@id/btn1"
app:layout_constraintEnd_toEndOf="parent"/>
Android Material Design控件使用(一)——ConstraintLayout 约束布局的更多相关文章
- Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果
前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...
- Android Material Design控件学习(一)——TabLayout的用法
前言 Google官方在14年Google I/O上推出了全新的设计语言--Material Design.一并推出了一系列实现Material Design效果的控件库--Android Desig ...
- Android Material Design控件学习(二)——NavigationView的学习和使用
前言 上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件--NavigationView. 正如其名,NavigationView,导航View.一般 ...
- Android Material Design控件使用(四)——下拉刷新 SwipeRefreshLayout
使用下拉刷新SwipeRefreshLayout 说明 SwipeRefreshLayout是Android官方的一个下拉刷新控件,一般我们使用此布局和一个RecyclerView嵌套使用 使用 xm ...
- Android Material Design控件使用(二)——FloatButton TextInputEditText TextInputLayout 按钮和输入框
FloatingActionButton 1. 使用FloatingActionButton的情形 FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App ...
- Android Material Design 控件常用的属性
android:fitsSystemWindows="true" 是一个boolean值的内部属性,让view可以根据系统窗口(如status bar)来调整自己的布局,如果值为t ...
- Android Material Design控件使用(三)——CardView 卡片布局和SnackBar使用
cardview 预览图 常用属性 属性名 说明 cardBackgroundColor 设置背景颜色 cardCornerRadius 设置圆角大小 cardElevation 设置z轴的阴影 ca ...
- Android Support Design 控件 FloatingActionButton
经常刚可以看到悬浮控件,比如印象笔记的下面那个绿色的悬浮按钮,这个控件非常简单也是来自Design Support Library中同理需要在android studio中加入依赖库:design库 ...
- Material Design控件使用学习 TabLayout+SwipeRefreshlayout
效果: Tablayout有点类似之前接触过的开源ViewPagerIndicator,将其与viewpager绑定,可实现viewpager的导航功能. SwipeRefreshLayout是官方出 ...
随机推荐
- Java的内存泄露
Java的内存泄露 1.静态集合类引起内存泄漏 像HashMap.Vector等的使用最容易出现内存泄露,这些静态变量的生命周期和应用程序一致,他们所引用的所有的对象Object也不能被释放,因为他们 ...
- 实验二 request、out对象使用
request.out对象使用 一.实验目的 1.掌握代码片段中的注释的应用: 2.掌握JSP脚本标示---Java代码片段的应用. 二.实验内容 1.设计教师与学生不同登陆界面,如下图: 2.验证码 ...
- 如何让用户登录Dynamics 365 Customer Engagement后自动登录到Unified Interface App?
微软动态CRM专家罗勇 ,回复324或者20190422可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! Dynamics 365 Customer Engagement ...
- 3.App Inventor 2项目导入与导出
首先熟悉导入.导出项目是为了养成良好的备份习惯. 一.登陆App Inventor 2编程界面都大同小异,在项目菜单下面有导入项目和导出项目菜单. 二.打开导入项目界面,选择要导入的aia文件. 三. ...
- Android resource compilation failed
报错:Android resource compilation failed D:\android\EasySports\app\build\intermediates\incremental\mer ...
- PHP Socket编程(转)
[PHPsocket编程专题(理论篇)]初步理解TCP/IP.Http.Socket.md [PHPsocket编程专题(实战篇①)]php-socket通信演示 [PHPsocket编程专题(实战篇 ...
- July 09th, 2018. Monday, Week 28th.
Happiness is an inside job. 自内寻找,才能找到幸福. From William Arthur Ward. Nobody wants to suffer, and we al ...
- Certbot为域名申请免费SSL证书
Certbot(Let's Encrypt)是一个非盈利性认证机构通过运行互联网安全研究小组(ISRG)提供X.509 证书的传输层安全性不收取任何费用(TLS)加密.证书有效期为90天,在此期间可以 ...
- WinForm 工作流设计 1
从事软件行业那么多年,一直很少写博.很多技术,长时间不用都慢慢淡忘. 把自己学到的用笔记下来,可以巩固和发现不足,也可以把自己对技术的一些 理解,分享出来供大家批评指正. 废话不多说,进入正题.工作流 ...
- iOS可视化动态绘制八种排序过程(Swift版)
前面几篇博客都是关于排序的,在之前陆陆续续发布的博客中,我们先后介绍了冒泡排序.选择排序.插入排序.希尔排序.堆排序.归并排序以及快速排序.俗话说的好,做事儿要善始善终,本篇博客就算是对之前那几篇博客 ...