还在用Android正经布局来写页面吗?

ConstraintLayout布局出来已经很久了,刚出来那会儿就想尝试一下的,结果半天都没适应,前两天看到一篇ConstraintLayout实战的文章,看完之后发现这布局贼鸡儿好用啊,日常开发中的大多数布局使用它都可以完成,而且也不需要嵌套。

介绍

ConstraintLayout又称约束布局,是谷歌在2016年开发者大会上推出的,之后在Android Studio上成为了默认布局,该布局能减少布局的层级嵌套,我们都知道,View嵌套的越多,在加载的过程中解析起来就越费时间,该布局几乎能做到LinearLayoutRelativeLayout嵌套完成的任何布局,下面跟着一波小demo来深入了解谷歌推荐的ConstraintLayout

用法简介

1、xxx_toyyyOf属性

xxx是当前的控件,yyy是指定控件,这个指定控件也可以是容器本身(parent)

ConstraintLayout中有以下多种这样的属性:

  • layout_constraintLeft_toLeftOf
  • layout_constraintLeft_toRightOf
  • layout_constraintRight_toLeftOf
  • layout_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

参照上图给出的解释,以上属性都可以这样用,有点类似RelativeLayout中的toLeftOftoRightOf,上面的属性中还有一个关于Baseline的,我们通过另外一张图来了解一下:

Baseline是控件中文字的基准线,这里可以理解为参照某个控件中的文字底部对齐,来看看样式:

如果不加基准线对齐的话,那么ButtonA的位置就在容器的左上角。

2、设置margin边距

边距,和传统的布局是一样的用法,但是这里要注意的是,必须要设置自己的相对位置(先要指定自己在容器中的位置,可以是相对容器的,也可以是相对某个控件的),如果不设置的话,那么设置margin是无效的,大家可以试试,在一个ConstraintLayout布局中放一个按钮,除了边距之外什么都不设置,这样是没有效果的,因为你没有在布局中给它设置相对位置。

3、隐藏空间设置边距

ConstraintLayout中有以下多种这样的属性:

  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

平常我们在开发过程中会遇到这样一个问题,当一个控件被设置成gone之后,与之关联的控件的位置常常也会发生改变,来看看样式:

平常我们写标题栏的时候应该都遇到过右边放两个按钮的情况,而且是可以控制显示隐藏的,当最右边的按钮隐藏之后,左边的按钮也要距离右边有一个边距,这种情况下我们就可以使用上面这些属性来配置布局。

4、居中和偏移

  • 水平居中
1app:layout_constraintLeft_toLeftOf="parent"
2app:layout_constraintRight_toRightOf="parent"

这个很好理解,设置与容器的左边和右边分别对齐,这样的话就能让控件水平居中了,同理垂直居中和中心对齐也是这样。可能有人会吐槽了,写这么多还不如我用LinearLayoutRelativeLayout写一句代码来的快呢?老铁还真是个急性子,接着往下看。

  • 垂直居中
1app:layout_constraintTop_toTopOf="parent"
2app:layout_constraintBottom_toBottomOf="parent"
  • 中心对齐
1app:layout_constraintLeft_toLeftOf="parent"
2app:layout_constraintRight_toRightOf="parent"
3app:layout_constraintTop_toTopOf="parent"
4app:layout_constraintBottom_toBottomOf="parent"

下面来实现一个这样的功能,让一个控件在距离左边和距离右边的比例是1:3,来看看正经写法:

 1<LinearLayout>
 2
 3    <View
 4        android:layout_width="0dp"
 5        android:layout_height="match_parent"
 6        android:layout_weight="1" />
 7
 8    <Button
 9        android:layout_width="100dp"
10        android:layout_height="match_parent" />
11
12    <View
13        android:layout_width="0dp"
14        android:layout_height="match_parent"
15        android:layout_weight="3" />
16
17</LinearLayout>

相信大多数老铁都会这么写,那么我们现在来看看不正经的写法:

 1<android.support.constraint.ConstraintLayout>
 2
 3    <Button 
 4        android:id="@+id/button"
 5        app:layout_constraintHorizontal_bias="0.33"
 6        app:layout_constraintLeft_toLeftOf="parent"
 7        app:layout_constraintRight_toRightOf="parent />
 8
 9</android.support.constraint.ConstraintLayout>
10

看到这个是不是惊呆了,一行代码就搞定了,简直不要太简洁。

5、CircleRadius角度定位(在版本1.1中加入)

官网给出的解释是,你可以以角度和距离约束窗口小部件中心相对于另一个窗口小部件中心。可能有些人看不太懂,我也没看懂(哈哈,LZ你是来搞笑的吗),但是看官网给出的图我大概明白是什么意思了,简单来说就是可以根据两个控件的中心来形成约束关系,然后可以通过设置角度来控制这个约束关系(还看不懂的话那就来实践一把)

layout_constraintCircle表示相对某一指定控件,上图中表示相对ButtonAlayout_constraintCircleRadius表示该控件的中心点到指定控件的中心点的距离(两点之间,直线最短);layout_constraintCircleAngle表示该控件的中心点在指定控件垂直方向上的角度(范围是0-360),具体看上图中标示的。

6、尺寸约束

ConstraintLayout布局中,你可以设置布局的最大和最小尺寸,而且你可通过三种方式来设置控件的大小:

  • 特定数值,比如123dp
  • 使用wrap_content,控件将自己计算大小
  • 使用0dp,相当于`MATCH_CONSTRAINT`

注意:match_parent官方不建议在ConstraintLayout布局中使用,可以通过设置MATCH_CONSTRAINT(真实数值是0dp)配合约束来定义布局

下面我们来看一个例子:

ButtonA是固定宽度且靠左,给ButtonB设置了约束,刚开始预期的是设置ButtonB的宽度慢慢增大,超过ButtonA之后不管设置多大都像ButtonCButtonD一样,但是ButtonA却把ButtonB覆盖了,显然这不是我们需要的,这时候MATCH_CONSTRAINT的作用就能体现出来了,怎么理解这个MATCH_CONSTRAINT,我们可以理解成为了配合约束布局而代替了match_parent

7、设置宽高比例

在使用百分比布局时,有两种形式可以设置:

  • layout_constraintDimensionRatio,给宽或者高其中一个设置为0dp,然后设置该属性是一个比例,宽和高的比(相对那个已知长度的),可能说的有点绕,下面我们直接看demo:
  • app:layout_constraintDimensionRatio,设置宽和高都为0dp,然后设置改属性的值为H,x:y 或者 W,x:y,看一下demo

8、Chains(链)

链条在同一方向上(水平或者垂直)为一组互相关联的控件作统一管理,并且链由链头(链的第一个元素)设置的属性控制,链头是水平链的最左侧的元素,是垂直链的最顶部的元素。我们来看看一些链的样式:

我们只需要设置layout_constraintHorizontal_chainStyle或者layout_constraintVertical_chainStyle的属性就好了,而这个属性有以下几种配置:

  • CHAIN_SPREAD模式:元素将展开(默认样式)
  • 加权链CHAIN_SPREAD模式:如果给元素的宽或者高设置了MATCH_CONSTRAINT(0dp),它们将分割宽高方向上的可用空间
  • CHAIN_SPREAD_INSIDE模式:类似于SPREAD,但链的端点不会分散
  • `CHAIN_PACKED`模式:链条的元素将被捆绑在一起。然后,子项的水平或垂直偏差属性将影响该链元素的定位

9、辅助布局Guildline

这是ConstraintLayout布局特有的功能,你可以用它来辅助你完成布局,类似于高中数学图形学中的辅助线,只不过这条辅助线只有两个方向,水平和垂直:

  • 当设置线的方向为horizontal时,辅助线的高度为0,宽度是容器的宽度。
  • 当设置线的方向为`vertical`时,辅助线的宽度为0,高度时容器的高度。

我们来看看Guildline的样式(需要注意的是,辅助线是不可见的,只有在预览的时候才能通过鼠标选中可见):

Guildline有三个常用的属性,用来控制辅助线的位置:

  • layout_constraintGuide_begin:指定辅助线距离左边或者顶部的距离
  • layout_constraintGuide_end:指定辅助线距离右边或者底部的距离
  • `layout_constraintGuide_percent`:指定在父控件中的宽度或高度的百分比

代码

以上demo的代码全都上传至

Github:https://github.com/24Kshign/ConstraintLayoutTest

最强布局解析,有兴趣的童鞋可以自行下载看看。

原文发布于微信公众号 - IT先森养成记(cyg_24kshign)

原文发表时间:2018-09-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

css中如何做到容器按比例缩放

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 在说容易按比例缩放前,我们先说下图片按比例缩放。 对于图片,默认只设置图片的...

2619
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

3199
来自专栏Youngxj

css美化文字选中时的颜色

1582
来自专栏前端知识分享

第54天:原生js实现轮播图效果

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

3701
来自专栏smy

事件委托与阻止冒泡

简单说下事件委托与阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="...

37810
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:在手机应用开发中如何实现跳转地图

882
来自专栏LinXunFeng的专栏

iOS - Swift UISearchController仿微信搜索框

2963
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

2010
来自专栏IMWeb前端团队

jQuery选择器总结

本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载 不得不说,jq是写代码是替代js的一种超级棒的选择。对于刚入门的小白都...

2275
来自专栏互联网杂技

orimuse作品上传_线框图

<script> window.onload=function(){ var cloth_name={ //衣服的款式图片 man:{ white_f...

3475

扫码关注云+社区

领取腾讯云代金券