文档章节

Android ConstraintLayout详解

短短的歼击机
 短短的歼击机
发布于 2017/06/12 14:31
字数 1743
阅读 79
收藏 1

1. 概述

在本篇文章中,你会学习到有关ConstraintLayout -- 一种构建于弹性Constraints(约束)系统的新型Android Layout。最终你将会在Android Studio中编辑与构建一个相对复杂的Layout。

收获

  • 新Layout Manager所使用的Constraints系统
  • 创建Constraints来构建弹性高效的Layouts
  • 新Layout编辑器的各种功能

需求

2. 获取示例代码

3. 运行示例代码

  1. 打开Android Studio,选择 File>New>Import Project,选择步骤2下载的示例代码的文件夹constraint-layout-start
  2. 点击Gradle sync按钮。
  3. Project面板内打开 res/layout/activity_main_done.xml
  4. 选择Design选项显示最终的layout编辑界面
  5. 在编辑器左上角选择Virtual Device to render the layout withNexus 5x
  6. 完工

4. Constraints 系统概览

Layout引擎使用Contraints指定每个widget来决定他们在layout中的位置。你可以使用Android Studio Layout编辑器界面来手动或者自动指定约束。要更好的理解他,需要我们了解一下他对一个选中的widget的基本控键。

Constraints

Constraints帮助你保持widgets对齐。你可以使用箭头来决定各widgets的对齐规则。例如(图示 A),从button 2左侧控键设置一个constraint到button 1的右侧控键意味着:button 2会放置于button 1右侧56dp

图示 A

控键类型

图示 B:不同类型的控键

  • 调整尺寸控键 - 类似于其他设计/绘图应用,该控键允许你调整widget尺寸

  • 侧约束控键 - 该控键让你指定widget的位置。例如,你可以使用widget的左侧控键到其他widget的右侧控键相隔24dp

  • 基线约束控键 - 该控键帮助你对齐任意两个widget的文字部分,与widget的大小无关。例如你有两个不同尺寸的widget但是你想要他们的文字部分对齐。

《ConstraintLayout从入门到放弃》

太长;别读

5. ConstraintLayout应用

一)开启

现在,让我们开始来构建你自己的Constraint Layout。

从左侧导航栏打开 res/layout/activity_main_start.xml

  • 载入constraint-layout依赖
    constraint-layout依赖构建在一个分离的支持库里,该依赖支持从Android2.3(Gingerbread)到最新的版本。这个项目在app/build.gradle里已经包含了该依赖

    dependencies {
    ...
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'
    }
  • 回到 res/layout/activity_main_start.xml

    该layout已经有了一个空的ConstraintLayout

<?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:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

在编辑器底部转换到Design选项

  • 添加ImageView
    添加一个ImageView到layout。在编辑器内,找到ImageView拖到layout内。


ImageView一旦拖到layout中,UI会提示需要resource。constraint-layout-start已经包含了resources,请选择@drawable/singaporeresource。
一旦选中ImageView,你可以点击并按住调整尺寸控键来调整图片大小。

  • 添加TextView
    找到TextView并拖到layout内。


    我们会看到一些警告,因为在ImageView以及TextView内没有contentDescription属性。内容描述(Content Description)属性对于构建可访问应用非常重要。让我们为该属性添加@string/dummy
    在右侧,Inspector面板可以改变已选择widget的各种属性。

  1. 选择ImageView并添加@string/dummycontentDescription属性
  2. 在Inspector面板,你可以看到ImageView的其他属性。修改scaleTypecenterCrop
  3. 接着,我们选择TextView,使用该面板修改text值为@string/singapore

二)手动创建Constraints

创建一个约束,你需要在widget的某个控键上点击并按住,然后拖到两一个widget的约束控键内。一旦显示绿色,你就可以松手了最终约束就会被创建。

注意:该部分讲有关手动创建约束的,需要将左上角的自动创建约束按钮关闭

在开始之前,确保ImageViewTextView在layout内。我们的目标是在容器、ImageView以及TextView之间创建约束。

假设我们想要TextView置于ImageView下方。我们可以在TextView的顶部控键与ImageView的底部控键创建一个约束,如图:

移除约束:移除某个约束只需点击指定约束的控键;移除全部约束需要点击如下按钮:

下一步,创建ImageView跟容器顶部的约束

最后,创建ImageView左右两侧的约束

89f057b3a8ea3e0b.png

创建基线约束 - 连接widget的基线控键到另一个的基线

三)熟悉Inspector

在此部分,我们会了解一下Inspector。它在UI编辑器的右侧。附带有已选择widget的各种相关属性,而且还显示了该视图是如何对齐与约束的。

  • 移除TextView
  • 添加ImageView底部约束

此时,UI构建起如下图:

以下部分描述了不同的元素和他们的使用方法:

Margins - widget的外围上下左右为margins。你可以点击按钮设置不同的值来改变margins。在上边截图中,margins设置为16dp

移除constraint - 在Inspector内点击连接widget与container的线,可以移除约束。当然也可以点击已设置约束的控键来移除。

相对于约束来放置widget - 当在一个widget有至少两个相对的连接,比如说顶部和底部,或者左侧和右侧,然后就可以使用滑动条来调节widget在链接中的位置。你还可以改变屏幕方向来进一步调整方位。

控制widget内部尺寸 - Inspector内部的线让你可以控制widget内部尺寸。

Fixed - 可以调整widget的宽度和高度

AnySize - 使得widget占据所有可用的控键来满足约束

AnySize应用之前

AnySize应用之后

Wrap Content - 含有text或者drawable的widget扩大到填满整个容器

四)自动创建Constraints

Autoconnect自动创建widgets之间的连接。开始之前

  • 打开res/layout/activity_main_autoconnect.xml
  • 开启Autoconnect(译注:小磁铁图标)

接下来,选中ImageView并且拖到layout的中心,如下图所示:

下一步,下方的动图展示了以下几个步骤

10210fd273ea1a86.png

  1. ImageView对齐顶部并使用Inspector(AnySize)来确保他扩展到两侧
  2. 放置两个button在右下角。使用Inspector面板来修改最右边button的text@string/upload以及左侧改为@string/discard
  3. 将一个TextView和一个Plain Text放到layout中。
  4. 调整TextViewPlain Text48dp。并自动创建约束。
  5. 同样的选中上传button放置到右侧。
  6. 最后放置取消button离上传button32dp的位置

五)使用Inference创建Constraints

(译注:待更新)

原文链接:Using ConstraintLayout to design your views

本文转载自:Using ConstraintLayout to design your views

短短的歼击机

短短的歼击机

粉丝 82
博文 268
码字总数 269797
作品 0
武汉
高级程序员
私信 提问
一份关于 Java、Kotlin 与 Android 的学习笔记

JavaKotlinAndroidLearn 这是一份关于 Java 、Kotlin 、Android 的学习笔记,既包含对基础知识点的介绍,也包含对一些重要知识点的源码解析,笔记的大纲如下所示: Java 重拾Java(0)-基础知...

叶应是叶
2018/08/08
0
0
Android ConstraintLayout 使用详解

Android在遇到复杂布局的时候,避免不了嵌套布局,渲染起来也影响了应用的性能,而且在维护的时候会有些烦躁,至少我是这样,还有百分比等,这时我们的 ConstraintLayout 就是为了解决这些问...

aidlFor
2018/07/19
0
0
Android新布局-ConstraintLayout详解

先放上Google的官方解析地址:点击链接 ,虽然这个地址我从来没进去过,现在另外附上一份这个官方Demo的Github地址,git: https://github.com/googlecodelabs/constraint-layout.git 如果在...

亭子happy
02/28
18
0
Android布局与容器(ViewGroup)

Android的几大布局,如LinearLayout的父类是ViewGroup;ViewGroup下可以有子View。 ViewGroup的遍历,遍历子View。 > Android布局与容器(ViewGroup) 1.线性布局(LinearLayout) 2.相对布局(Re...

desaco
01/25
0
0
ConstraintLayoutDemo【约束性布局知识梳理】【基于1.1.3】

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在较新版本的Android Studio中新建项目默认使用 ConstraintLayout进行布局的。 ConstraintLayout是一个允许您以灵活的方式定位和...

HaiyuKing
04/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
13
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
12
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
12
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部