文档章节

谷歌约束控件(ConstraintLayout)扁平化布局入门

Qiujuer
 Qiujuer
发布于 2016/05/20 18:16
字数 2805
阅读 3172
收藏 80
点赞 4
评论 11

Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束的库。

简单来说,她是相对布局的升级版本,但是区别与相对布局更加强调约束。何为约束,即控件之间的关系。
她能让你的布局更加扁平化,一般来说一个界面一层就够了;同时借助于AS我们能极其简单的完成界面布局。

准备

1.准备好Android Studio 2.2预览版,在这里给大家准备好了下载链接:

为什么需要预览版,其实就库来说并不需要AS最新版本,但是这样我们只能使用代码来进行布局,而ConstraintLayout让布局回归原始,拖动即可。比起常规控件拖动基本是分分钟高潮的节奏。

2.首先在项目中添加依赖:

dependencies { compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1' }

注意:正式版本还未发布。

初尝禁果

首先我们建立 activity_start.xml 布局,并添加如下代码:

<?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" android:id="@+id/lay_root" android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView  android:id="@+id/iv_head" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dog" />

</android.support.constraint.ConstraintLayout>

在这个代码中我们定义了根布局为ConstraintLayout,然后添加了一个ImageView。请注意在代码中尽量为每一个控件都加上id名称,因为约束布局需要知道每一个控件之间的关系。
要让图片布局水平居中哪么我们更改ImageView部分代码为:

    <ImageView  android:id="@+id/iv_head" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dog" app:layout_constraintLeft_toLeftOf="@+id/lay_root" app:layout_constraintRight_toRightOf="@+id/lay_root" />

如果要垂直居中,哪么我们继续添加代码:

    <ImageView
        android:id="@+id/iv_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/dog"
        app:layout_constraintBottom_toBottomOf="@id/lay_root"
        app:layout_constraintLeft_toLeftOf="@+id/lay_root"
        app:layout_constraintRight_toRightOf="@+id/lay_root"
        app:layout_constraintTop_toTopOf="@id/lay_root" />

此时我们的控件已经居中在最中央了。

当然为了证明水平居中,我们限定图片宽度为100dp:
这里写图片描述

工作区

我们先来看看 Android Studio 2.2 Preview1 提供的工作区。
这里写图片描述

在工作区中有两种预览,一种设计预览,一种叫做蓝图的东西。两者可以辅助进行布局预览,非常Nice。

这里写图片描述
眼睛图标:用来控制是否显示约束的东西。

这里写图片描述
磁铁图标:用来自动吸附的东西,就是说两个按钮放在一起的时候会自动按照一定的约束条件进行链接。

这里写图片描述
清理图标:用来清除所有的约束,当鼠标放倒一个控件上时也会有一个清理图标出现,点击可以清除当前选中的控件的约束。

这里写图片描述
灯泡图标:用来自动推断约束条件的东西,运用这个可以更加智能快速的完成布局。

基础

在布局引擎中,能为你的控件手动或者自动的创建一定的布局约束;为了更好的理解约束,下面来看一些案例(源于谷歌案例)。

约束

简单来说约束可以帮助你按照某种相互关系进行布局,可以让控件对齐等等操作,在这里我们操作后面的按钮并链接到前一个按钮的右端,并且间隔56dp。哪么此时无论我移动按钮1到哪儿,按钮2都将在按钮1的右边并间距56dp。

这里写图片描述

手柄类型

这里写图片描述
在这个图中我们看见有3种不同的手柄。

调整手柄

这里写图片描述

拖动该手柄能帮助你调整整个控件的大小。

约束手柄

这里写图片描述

这个约束手柄位于控件的四边,在四边上有四个小圆点,拖动该圆点并指向另外的控件的一边,哪么可以让该控件对其到指向的控件。
当然你可以设置margin来提供对应的间距。如果需要清理掉单个约束,点击该圆点即可。

手柄限制:

  • 左右两边的手柄只能链接到另外一个控件的左右两边,上下手柄同样。

基线手柄

这里写图片描述

该手柄仅仅出现在有文字的控件中使用,或者继承TextView的控件中使用,其作用是对齐两个控件的文字基线。

基线限制:

  • 基线只能链接到另一个控件的基线。
  • 基线也不能与手柄进行链接。

谷歌的案例

1.首先选择一个约束手柄,并按住鼠标拖动到另外一个控件的手柄原点上,当链接线变成绿色的时候松开鼠标即可创建一个约束。

这里写图片描述

2.添加图片控件,链接TextView控件的顶部手柄到ImageView底部手柄,并拖动一定间距。可以看出约束添加时文本控件自动吸附到了图片的底部。
这里写图片描述

3.拖动图片控件顶部手柄到根布局顶部。
这里写图片描述

4.最后我们同时添加图片左边与右边的约束使其居中对齐。
这里写图片描述

5.添加基线约束。
这里写图片描述

是不是很简单?从未感觉布局如此简单,如果使用传统布局进行拖动必定不能做到多屏幕适配的问题,而约束布局却不会,约束强调相互关系,并不固定位置。

属性面板

上面的是一些基本用法,下面来看看属性面板。在这里将学到更加Nice的自定义化设置。

首先我们在屏幕上添加一个图片控件,并添加四边约束到根布局,此时我们看见的界面是这样的:
这里写图片描述

在属性面板的上面部分是我们的检查员(Inspector),在这个视图中显示了当前选中的控件的约束情况。

  • Margins:间距,在这个面板中我们可以看见当前图片控件相对约束的控件来说四边都具有16dp的间距。

  • 删除约束:鼠标放到检查器上中间正方形边上会出现一个删除按钮,点击此按钮即可删除当前方向的约束。

  • 百分比定位:当你同时创建了左右两边的约束的时候,你会在监视器上看见一个水瓶的进度条,默认情况是50的值,意味着相对你的左右两边的控件约束进行居中对齐。你可以拖动这个进度条进行更改;同理上下同时创建约束后也将有一个垂直方向的进度条出现。
    这里写图片描述

  • 控件自身尺寸:对于控件自身的大小控制有3种不同的类型,你可以通过点击中间正方形上的线来进行切换。
    这里写图片描述
    这里写图片描述
    Fixed: 该模式下为固定尺寸,你可以设置控件的width/height属性来控制高和宽。
    这里写图片描述
    AnySize: 该模式可以让控件占据所有可用的空间来满足约束。换句话说,这更像是匹配约束。不同于match_parent,是占据父视图的所有可用空间;AnySize模式下是满足约束的情况下尽量满足控件的大小空间。
    这里写图片描述
    Wrap Content: 在该模式下,控件所占有的空间是可缩放的,相当于“wrap_content“属性。

    我们来看一个从Fixed模式调整为AnySize模式的对比图:
    这里写图片描述
    调整图片的宽度占有属性为AnySize模式之后:
    这里写图片描述

到这里基本是使用是OK了,下面再说两点额外的操作。

更多

自动链接

还记得上面说到工作区的时候说的自动链接磁铁图标么?
这里写图片描述
首先我们启用该功能。然后新建界面并且拖动一个图片控件到中心部分,然后放开,此时会看见编辑器自动为我们添加了图片四边的约束。

这里写图片描述

自动推断

这里写图片描述
自动推断也是用来辅助用户创建控件约束的;其原理是综合控件之间的关系创建对应的约束条件。

与自动链接的区别:
自动链接,自动推断都是辅助创建约束。但是自动链接是在用户拖动一个控件后为当前拖动的控件创建约束;而自动推断不同,自动推断会综合考虑全部控件之间的关系,然后根据布局创建控件之间的相互约束关系。

要测试自动推断,首先我们关闭自动链接功能,此时我们添加一些控件,控件的布局如下,因为我们关闭了自动链接,并且采用拖动关系进行创建,此时界面上控件之间是没有约束关系的。
这里写图片描述
此时我们在手机上看见的是这样:
这里写图片描述
全部被挤压到了一块儿。
此时我们点击顶部的��图标,自动推断约束,然后可以看见我们的布局变了:
这里写图片描述
此时再看看我们的手机上的效果:
这里写图片描述
Very Nice~~

总结

在本篇文章中仅仅只是说明了约束布局的操作,详细的约束布局创建的XML内容以及原理并没有在这一章中进行讲解,会在后续章节中讲解;当然说到布局XML,在约束布局中并不建议直接操作XML文件来完成布局,而建议使用鼠标拖动来添加对应的约束。

通过本篇文章的学习,基本上一个简单的不需要滚动的布局都可以使用约束布局来完成,也仅仅只需要一层就可以了,所有的控件无论在多一层足够了。

这是否意味着抛弃其他控件?并不是的!约束布局仅仅只是一种新的思路,其适用于界面不太复杂,并且不滚动的界面中布局,如果界面元素很多甚至超过屏幕,哪么并不建议使用约束布局。

另外约束布局仅仅是简单快捷的布局,其性能负担随着界面中的控件数量以及约束条件的增加而增加;所以使用时还需要多多考究。

文章的末尾处附上一份谷歌的案例效果:
这里写图片描述

文章中的项目托管到Github:

https://github.com/qiujuer/BeFoot/tree/master/blog/sample/ConstraintLayout

========================================================
作者:qiujuer
博客:http://my.oschina.net/qiujuer/blog
网站:www.qiujuer.net
开源库:github.com/qiujuer/Genius-Android
开源库:github.com/qiujuer/Blink
转载请注明出处:http://blog.csdn.net/qiujuer/article/details/51462471
—— 学之开源,用于开源;初学者的心态,与君共勉!

========================================================

© 著作权归作者所有

共有 人打赏支持
Qiujuer

Qiujuer

粉丝 138
博文 25
码字总数 60206
作品 2
深圳
程序员
加载中

评论(11)

r
renyuan_1991
赞赞赞
Qiujuer
Qiujuer

引用来自“月影南溪”的评论

初尝禁果是什么鬼?

自己第一次。
ios122
ios122
android小伙伴,一直都说,他们的布局方式如何比iOS好....O(∩_∩)O哈哈~
月影南溪
月影南溪
初尝禁果是什么鬼?
没问题先生
没问题先生
这样的文章很好,赞一个
o轻扬o
o轻扬o
现在才有,之前是用的啥
火文乐武
火文乐武
哇咔咔,看着跟CAD老像了,四年工程制图没有白学啊
z
zdglf
layout like ios 感觉跟ios差不多了[3]
dj_归去来兮
dj_归去来兮
linux版本的字体渲染好一点了
lanmingle
lanmingle
不错,不过现在很多都是用H5来做比较方便。
ConstraintLayout在项目中实践与总结

ConstraintLayout,让布局更优雅。 一、为什么要用ConstraintLayout image.jpg 上图是网易100分的选课首页,在Banner图的下部是推荐类目模块,其中数学、语言、小低和小高分别是推荐类目Ite...

宇是我 ⋅ 2017/11/30 ⋅ 0

ConstraintLayout在项目中实践与总结

ConstraintLayout,让布局更优雅。 一、为什么要用ConstraintLayout image.jpg 上图是网易100分的选课首页,在Banner图的下部是推荐类目模块,其中数学、语言、小低和小高分别是推荐类目Ite...

宇是我 ⋅ 2017/11/30 ⋅ 0

哲♂学三幻神带你学习ConstraintLayout(约束布局)

ConstraintLayout 是什么 其实已经不算什么新东西了,很多同学应该知道 或听过这个东西。人嘛,对陌生的事物总会本能性地去排斥,很多人都觉得 和已经够用了,没必要 去另外学一个新的布局;...

coder_pig ⋅ 2017/12/22 ⋅ 0

Android新特性介绍,ConstraintLayout完全解析

转载请注明出处:http://blog.csdn.net/guolinblog/article/details/53122387 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即可关注,每天都有文章更新。 今天给...

sinyu890807 ⋅ 2017/02/03 ⋅ 0

Android约束布局ConstraintLayout 项目实战攻略

前言 ConstraintLayout即约束布局, 在2016年由Google I/O推出. 从支持力度而言, 将成为主流布局样式, 完全代替其他布局, 减少布局的层级, 优化渲染性能. 且自Android Studio 2.3起创建新的A...

SilenceOO ⋅ 2017/11/21 ⋅ 0

项目需求讨论 — ConstraintLayout 详细使用教程

题外话 最近转方向参与到物联网的项目去了。看的都是C++和Node.js,表示从头学习,又变成了一个小菜鸟了。所以好久没写过文章了。 废话不多说,关于ConstraintLayout的文章网上一抓一大把,而...

青蛙要fly ⋅ 2017/12/17 ⋅ 0

ConstraintLayout 完全解析 快来优化你的布局吧

本文已在我的公众号hongyangAndroid原创首发。 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/78011599 本文出自张鸿洋的博客 本文已在我的公众号hongyangAndroid原创...

lmj623565791 ⋅ 2017/09/17 ⋅ 0

ConstraintLayout学习总结

学习参考 个人不推荐使用拖拽的方式,看的自己眼花缭乱,控件多了,很影响效率。必须掌握手写代码的方式直接在xml里面编写,可以参考鸿扬大神的这篇文章,这篇文章学完你基本上就掌握了所有相...

⋅ 01/23 ⋅ 0

Android Studio 2.2 的新鲜事

Android Studio 2.2 现在可以下载。Android Studio 2.2 已在 Google I/O 2016 上预展,是全球各地数百万 Android 开发者使用的 IDE 最新版本。 此版本包含增强功能,主要面向三大主题:速度、...

局长 ⋅ 2016/09/24 ⋅ 12

约束布局:开篇

随着Android Studio2.3正式版本的发布,约束布局(ConstraintLayout)也进入了1.0.1正式版,是时候进入安卓开发布局的新阶段了。 约束布局的概念第一次接触是在iOS开发的学习当中,苹果官方将约...

欧阳锋 ⋅ 2017/03/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 55分钟前 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部