在 ConstraintLayout 中对视图进行分组以将它们视为单个视图

Question

我需要对 ConstraintLayout 中的一组视图应用一些约束。我想将这些视图分组并继续编辑，而 Android 工作室中的布局设计师将它们视为单个视图。有没有办法在不使用 ViewGroup （另一种布局）实际包装视图的情况下这样做？如果需要这样的包装器，也许 ConstraintLayout 附带了一个包装器布局，允许对对象进行分组，而无需创建像 RelativeLayout?

这样的繁重布局

Answer 1

约束布局链

Android 开发人员最近发布了 ConstraintLayout (1.0.2 as of today). This version contains a new major feature - Chains, which allows us to group views in ConstraintLayout.

的新版本

Chains provide group-like behavior in a single axis (horizontally or vertically).

A set of widgets are considered a chain if they a linked together via a bi-directional connection

Once a chain is created, there are two possibilities:

Spread the elements in the available space

A chain can also be "packed", in that case the elements are grouped together

目前，您需要使用以下 gradle 依赖项才能使用此功能（因为它是 alpha 版）：

 compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha9'

Here 您可能会找到 ConstraintLayout 的最新版本以用于您的项目。

直到评论中提到 Android Studio 2.3, Android Studio user interface designer did not support creating chains since you couldn't add bi-directional constraints in it. The solution was to create these constraints in manually XML, as mentioned by TranslucentCloud. From Android Studio 2.3 (currently only on canary channel), chains are supported in a UI editor as well (as GoRoS。

例子

以下是如何使用 ConstraintLayout 和 chains 将两个视图放在屏幕中间的示例：

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


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintVertical_chainPacked="true"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>
</android.support.constraint.ConstraintLayout>

@Mateus Gondim

更新（2018 年 1 月）

在最近的版本中，您应该使用app:layout_constraintVertical_chainStyle="packed"而不是app:layout_constraintVertical_chainPacked="true"

Answer 2

您可以使用

android.support.constraint.Guideline

将元素组合在一起。

添加辅助线（垂直或水平），然后将其用作其他视图的锚点。这是一个水平居中两个分组文本视图的简单示例：（在 AS 中显示设计视图）

<?xml version="1.0" encoding="utf-8"?>
<ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="@android:color/white"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">


    <TextView
        android:id="@+id/top_text"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@android:color/holo_red_light"
        android:textSize="16sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:text="Above"
        tools:text="Above" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <TextView
        android:id="@+id/bottom_text"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_bright"
        android:textSize="16sp"
        app:layout_constraintTop_toBottomOf="@+id/guideline"
        android:text="Below"
        tools:text="Below" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Right vertically centered"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Right vertically centered"/>
</ConstraintLayout>

Answer 3

我只想在公认的最佳答案中添加一些图形。非常简单：

在布局设计视图中 > select 所有要分组的视图 > right-click 它们 > 链 > 创建水平链：

将它们居中也很简单：

Select组的head视图 > Organize > Pack Horizontally > 将第一个视图的开始约束和最后一个视图的结束约束设置为其parent:

Answer 4

您可以使用高度 0dp 和组织视图垂直 .

在相对布局中我们可以像

一样使用上下布局

<FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_nav"
        android:layout_below="@+id/toolbar"
        />

在约束布局中，必须提供高度，因此您可以提供 0 高度。然后你可以像这样将你的视图设置在其他视图下面

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tablayout" />

您可以使用 constraintTop_toBottomOf 和 constraintBottom_toTopOf 属性将您的视图调整到其他视图的上方或下方. 谢谢

在 ConstraintLayout 中对视图进行分组以将它们视为单个视图

Group views in ConstraintLayout to treat them as a single view

android

android-studio

android-constraintlayout

constraint-layout-chains

约束布局链

例子

@Mateus Gondim