文档章节

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

Android攻城狮
 Android攻城狮
发布于 2016/07/29 15:40
字数 2717
阅读 9
收藏 0
点赞 0
评论 0

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'
}
  • 1
  • 2
  • 3

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

初尝禁果

首先我们建立 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

在这个代码中我们定义了根布局为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" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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

    <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" />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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

当然为了证明水平居中,我们限定图片宽度为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 
博客:blog.csdn.net/qiujuer 
网站:www.qiujuer.net 
开源库:github.com/qiujuer/Genius-Android 
开源库:github.com/qiujuer/Blink 
转载请注明出处:http://blog.csdn.net/qiujuer/article/details/51462471 
—— 学之开源,用于开源;初学者的心态,与君共勉!

本文转载自:http://blog.csdn.net/qiujuer/article/details/51462471 

共有 人打赏支持
Android攻城狮
粉丝 0
博文 29
码字总数 0
作品 0
朝阳
程序员
谷歌约束控件(ConstraintLayout)扁平化布局入门

序 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束的库。 简单来说,她是相对布局的升级版本,但是区别与相对布局更加强调约束。何为约束,即控件之间的...

Qiujuer ⋅ 2016/05/20 ⋅ 11

ConstraintLayout在项目中实践与总结

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

宇是我 ⋅ 2017/11/30 ⋅ 0

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

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

coder_pig ⋅ 2017/12/22 ⋅ 0

ConstraintLayout使用解析

AndroidStudio3.0创建Project默认的布局就是ConstraintLayout。 AndroidStudio3.0前的可以自己修改,使用ConstraintLayout。 为了要使用ConstraintLayout,我们需要在app/build.gradle文件中...

_OUTMAN_ ⋅ 06/20 ⋅ 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 23分钟前 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

前言 我是上学期学的汇编,因为有vs又不想用课上教的麻烦的dosbox以及masm32,但是一直没找到高亮插件和能调试的(难在运行不了而找不到答案上,出现的错误在最后放出,还请先达们不吝指点)...

simpower ⋅ 32分钟前 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 35分钟前 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 42分钟前 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 44分钟前 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 51分钟前 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 55分钟前 ⋅ 0

Java对象的序列化与反序列化

Java对象的序列化与反序列化

Cobbage ⋅ 今天 ⋅ 0

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 今天 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部