ConstraintLayout 之 Guideline、Bar

前言

今天来了解一下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顶部的圆形图标。

效果图如下：

image

布局代码如下：

  <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调整其大小和受限视图移动。

image

布局代码：

 <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

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

image

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

image

创建链时与其他略有不同，因为所有视图都具有对它们定义的约束，并且链中的第一个项指定了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的引用，而不将组合中的视图嵌套。这样一来，您可以设置组中控件的可见性仅通过设置组的可见性就行了，而无需设置每个视图的可见性。这对于诸如错误屏幕或加载屏幕的事情是有用的，其中一些元素需要一次更改其可见性。
添加组-如下：

image

布局文件：

 <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。循环定位允许你以一定角度和距离限制相对于另一个控件中心的控件中心。这样你可以在一个圆上定位一个控件。

image image

示例代码

<?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）

原文链接：https://www.jianshu.com/p/1ca5c53b96b2