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 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

Sublime 常用快捷键

1962
来自专栏web

sublime快捷键

1493
来自专栏hotqin888的专栏

ppt(Powerpoint)中插入swf(flash)动画方式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1062
来自专栏开发之途

约束布局(ConstraintLayout)1.1.2 版本的新特性

1.1K4
来自专栏非著名程序员

android:descendantFocusability用法简析

导语 由于今天比较忙,今天就来介绍一下,我之前在博客中写过的东西吧,今天我们就来介绍一下android:descendantFocusability这个属性。...

1995
来自专栏深度学习之tensorflow实战篇

HTML5与HTML4的区别,新增的元素有哪些?

注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。 1. HTML5推出的理由 解决Web上存在的问题: Web浏览器间的兼容性低:在...

3876
来自专栏阿凯的Excel

快捷键-提速版

今天和大家分享的是快捷键提速版!!(什么是提速版,就是可以迅速提高你的工作速度哇!!貌似所有的Excel技巧都可以提高工作速度) 快捷键提速版正式开始 1、...

2633
来自专栏我的博客

phpstorm使用

1.设置多个项目并存 步骤:File–>Settings–>Directories–>Add Content Root 2.常用快捷键 Ctrl+y删除一行...

2172
来自专栏Web项目聚集地

CSS布局解决方案(全屏布局)

原文连接:https://segmentfault.com/a/1190000013565024#articleHeader1

2284
来自专栏CDA数据分析师

最全Excel 快捷键总结,告别鼠标!

本文为知乎答主宇轩原创,CDA数据分析师已获得授权 这里正在更新完毕最常用的快捷键和最完整的EXCEL快捷键,并且把最有用的都突出显示了。 快捷键的内容分三类...

2246

扫码关注云+社区