参考文章:

约束布局ConstraintLayout看这一篇就够了

ConstraintLayout - 属性篇

介绍

Android ConstraintLayout是谷歌推出替代PrecentLayout的组件。

支持相对布局、线性布局、帧布局,看来更像是FrameLayoutLinearLayout、`RelativeLayout·三者的结合体,并且比这三者更强大的是实现了百分比布局。

大家都知道安卓碎片严重,使用百分比适配,那么将彻底解决适配问题

总结:我最近也是刚学,学完之后,发现这个布局已经将上述的所有布局的特点全部融合在一起了,使用起来简单方便的不要不要的,就是学习的属性有点多啊。

不过,多也是正常的,毕竟融合了五大布局的所有特点,学完这个布局,各种界面UI都难不倒我们了

添加依赖

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

我使用的是Android Studio3.0.1版本,已经自动导入了,默认使用的就是这个布局

属性及对应的方法

我们先了解一下一些基本的概念

这里提一下,start和left其实都是指控件的左边,end和right都事指控件的右边

基本属性

注意,这里的属性都得使用命名空间来才能使用

宽高属性与之前的layout相同,wrap_contentmatch_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为屏障所在的位置,可设置的值有:bottomendleftrightstarttop

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_weightlayout_constraintVertical_weight来设置weigh权重

style为pack的,使用layout_constraintHorizontal_biaslayout_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 约束布局的更多相关文章

  1. Android Material Design控件学习(三)——使用TextInputLayout实现酷市场登录效果

    前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--Navigation ...

  2. Android Material Design控件学习(一)——TabLayout的用法

    前言 Google官方在14年Google I/O上推出了全新的设计语言--Material Design.一并推出了一系列实现Material Design效果的控件库--Android Desig ...

  3. Android Material Design控件学习(二)——NavigationView的学习和使用

    前言 上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件--NavigationView. 正如其名,NavigationView,导航View.一般 ...

  4. Android Material Design控件使用(四)——下拉刷新 SwipeRefreshLayout

    使用下拉刷新SwipeRefreshLayout 说明 SwipeRefreshLayout是Android官方的一个下拉刷新控件,一般我们使用此布局和一个RecyclerView嵌套使用 使用 xm ...

  5. Android Material Design控件使用(二)——FloatButton TextInputEditText TextInputLayout 按钮和输入框

    FloatingActionButton 1. 使用FloatingActionButton的情形 FAB代表一个App或一个页面中最主要的操作,如果一个App的每个页面都有FAB,则通常表示该App ...

  6. Android Material Design 控件常用的属性

    android:fitsSystemWindows="true" 是一个boolean值的内部属性,让view可以根据系统窗口(如status bar)来调整自己的布局,如果值为t ...

  7. Android Material Design控件使用(三)——CardView 卡片布局和SnackBar使用

    cardview 预览图 常用属性 属性名 说明 cardBackgroundColor 设置背景颜色 cardCornerRadius 设置圆角大小 cardElevation 设置z轴的阴影 ca ...

  8. Android Support Design 控件 FloatingActionButton

    经常刚可以看到悬浮控件,比如印象笔记的下面那个绿色的悬浮按钮,这个控件非常简单也是来自Design Support Library中同理需要在android studio中加入依赖库:design库 ...

  9. Material Design控件使用学习 TabLayout+SwipeRefreshlayout

    效果: Tablayout有点类似之前接触过的开源ViewPagerIndicator,将其与viewpager绑定,可实现viewpager的导航功能. SwipeRefreshLayout是官方出 ...

随机推荐

  1. Java的内存泄露

    Java的内存泄露 1.静态集合类引起内存泄漏 像HashMap.Vector等的使用最容易出现内存泄露,这些静态变量的生命周期和应用程序一致,他们所引用的所有的对象Object也不能被释放,因为他们 ...

  2. 实验二 request、out对象使用

    request.out对象使用 一.实验目的 1.掌握代码片段中的注释的应用: 2.掌握JSP脚本标示---Java代码片段的应用. 二.实验内容 1.设计教师与学生不同登陆界面,如下图: 2.验证码 ...

  3. 如何让用户登录Dynamics 365 Customer Engagement后自动登录到Unified Interface App?

    微软动态CRM专家罗勇 ,回复324或者20190422可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! Dynamics 365 Customer Engagement ...

  4. 3.App Inventor 2项目导入与导出

    首先熟悉导入.导出项目是为了养成良好的备份习惯. 一.登陆App Inventor 2编程界面都大同小异,在项目菜单下面有导入项目和导出项目菜单. 二.打开导入项目界面,选择要导入的aia文件. 三. ...

  5. Android resource compilation failed

    报错:Android resource compilation failed D:\android\EasySports\app\build\intermediates\incremental\mer ...

  6. PHP Socket编程(转)

    [PHPsocket编程专题(理论篇)]初步理解TCP/IP.Http.Socket.md [PHPsocket编程专题(实战篇①)]php-socket通信演示 [PHPsocket编程专题(实战篇 ...

  7. July 09th, 2018. Monday, Week 28th.

    Happiness is an inside job. 自内寻找,才能找到幸福. From William Arthur Ward. Nobody wants to suffer, and we al ...

  8. Certbot为域名申请免费SSL证书

    Certbot(Let's Encrypt)是一个非盈利性认证机构通过运行互联网安全研究小组(ISRG)提供X.509 证书的传输层安全性不收取任何费用(TLS)加密.证书有效期为90天,在此期间可以 ...

  9. WinForm 工作流设计 1

    从事软件行业那么多年,一直很少写博.很多技术,长时间不用都慢慢淡忘. 把自己学到的用笔记下来,可以巩固和发现不足,也可以把自己对技术的一些 理解,分享出来供大家批评指正. 废话不多说,进入正题.工作流 ...

  10. iOS可视化动态绘制八种排序过程(Swift版)

    前面几篇博客都是关于排序的,在之前陆陆续续发布的博客中,我们先后介绍了冒泡排序.选择排序.插入排序.希尔排序.堆排序.归并排序以及快速排序.俗话说的好,做事儿要善始善终,本篇博客就算是对之前那几篇博客 ...