ConstraintLayout 之 Guideline、Barrier、Chains和Groups

前言

今天来了解一下ConstraintLayout的新功能,即标准线、隔离线、链和组。 其中一些功能需要使用Android Studio 3.0 Beta 版和ConstraintLayout的beta版本。为了能使用这些功能,请在应用程序级别的build.gradle文件中添加如下代码:

 implementation 'com.android.support.constraint:constraint-layout:1.1.0-beta1'

Guidelines

可以简化视图布局的对齐方式,特别是如果您在许多元素上重复使用了相同的边界值。 Guidelines可以指定一个开始的dp值和结束的dp值或者可以相对于屏幕的百分比。要查看不同的准则模式,您可以单击guidelines顶部的圆形图标。

效果图如下:

constraintlayout_guideline_android.gif

布局代码如下:

  <android.support.constraint.Guideline
        android:id="@+id/id_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp" />

Barrier

Barrier是一个很好的功能。Barrier是一个看不见的视图,其中包含您用来形成“Barrier”的观点。如果其中一个视图增长,则Barrier将其大小调整为所引用项目的最大高度或宽度。Barrier可以是垂直或水平的,并且可以创建到引用视图的顶部、底部、左侧或右侧。 以下示例可以看出,当调整TextView的大小时,Barrier调整其大小和受限视图移动。

Barrier_constraintlayout_bigger.gif

布局代码:

 <android.support.constraint.Barrier
        android:id="@+id/id_barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="id_btn_example,id_tv_status" />

属性 app:constraint_referenced_ids 是用来包含形成Barrier的视图ID列表。

Chains

链允许您控制元素之间的空间以及元素如何使用空间。要创建链,需要选择要组成链的一部分元素,然后右键单击“链”-“创建水平/垂直链”

constraintlayout_android_chains.gif

然后您就可以查看链的不同模式了。有四种不同的模式:spread_inside,packed,spread和weighted。

constraint_layout_chain_modes.png

创建链时与其他略有不同,因为所有视图都具有对它们定义的约束,并且链中的第一个项指定了chainSyle。

 <Button
        android:id="@+id/id_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/id_btn_two"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/id_tv"
        tools:text="1" />

Groups

使用组,您可以将某些视图分组在一起。不要把这与Android中的普通ViewGroups混淆。ConstraintLayout中的一个组仅包含对视图ID的引用,而不将组合中的视图嵌套。这样一来,您可以设置组中控件的可见性仅通过设置组的可见性就行了,而无需设置每个视图的可见性。这对于诸如错误屏幕或加载屏幕的事情是有用的,其中一些元素需要一次更改其可见性。 添加组-如下:

group_constraintlayout_bigger.gif

布局文件:

 <android.support.constraint.Group
        android:id="@+id/id_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="id_btn_load,id_tv_status" />

属性 app:constraint_referenced_ids 包含需要成为组的一部分的所有视图ID的列表。

2017.12.27更新 ConstraintLayout发布了1.1.0 beta3版本。这个版本中添加了Circular Positioning。循环定位允许你以一定角度和距离限制相对于另一个控件中心的控件中心。这样你可以在一个圆上定位一个控件。

示例代码

<?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">
    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button B"
        app:layout_constraintCircle="@id/buttonA"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="50dp"
        />
</android.support.constraint.ConstraintLayout>
  • layout_constraintCircle:引用另一个控件的ID
  • layout_constraintCircleRadius:到其他控件中心的距离
  • layout_constraintCircleAngle:控件所在角度的位置(取值范围:0~360)

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(6)——打印信息和设置等待时间

2606
来自专栏编程之旅

Swift中的"警卫队"

大半个月没有更新自己的博客了,最近在忙一个新项目时间非常紧张,所以最近的博客更新进度就要稍微放缓一点了。

601
来自专栏青枫的专栏

传智播客_毕姥爷_2012年毕向东Java基础教程_毕向东老师

视频百度网盘下载链接:https://pan.baidu.com/s/1bpD3P07#list/path=%2F

391
来自专栏大数据钻研

献给前端的小伙伴,祝大家面试顺利!

HTML相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTM...

2715
来自专栏Google Dart

AngularDart4.0 指南- 显示数据 顶

您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地...

311
来自专栏24K纯开源

ChartDirector应用笔记(二)

关于Simple Bar Chart Simple bar chart是XYChart大类中的Bar chart类型中的最简单的例子。Bar chart的表现形...

1845
来自专栏代码世界

HTML DOM Event 对象

1142
来自专栏我杨某人的青春满是悔恨

委托与回调函数

这一段Swift代码稀疏平常,平常到可能有的同学从未想过这段代码背后做了什么。这里其实使用了一个同样稀疏平常却广为流传的设计模式——delegate模式。Del...

943
来自专栏Python入门

这4个Python实战项目,让你瞬间读懂Python!

Python当下真的很火。Python实战项目,也一直尤为关注,接下来,和大家介绍下十个Python练手的实战项目

1424
来自专栏更流畅、简洁的软件开发方式

Attribute(特性),怎么用才更好?

前几年:   2008年的某一天,我坐火车去北京。硬卧上铺,一晚上就到北京了。爬到上铺之后发现,旁边上铺有一老兄抱着一个笔记本,一开始还以为是看电影呢,仔细一...

2329

扫码关注云+社区