在ConstraintLayout中对视图进行分组以将其视为单个视图 [英] Group views in ConstraintLayout to treat them as a single view

问题描述

我需要对 .我想对这些视图进行分组，然后继续编辑，而Android Studio中的布局设计器将它们视为单个视图.有没有一种方法，而无需实际用ViewGroup(另一种布局)包装视图?如果需要这样的包装器，也许ConstraintLayout附带了一个包装器布局，并且可以对对象进行分组而无需创建像RelativeLayout这样的繁重布局?

I need to apply some constraints to a group of views in ConstraintLayout. I want to group these views and continue editing while the layout designer in Android studio treats them as a single view. Is there a way to do so without actually wrapping the views with a ViewGroup (another layout)? If such a wrapper is necessary, maybe there is a wrapper layout that comes with ConstraintLayout and allows to group objects without creating heavy layouts like RelativeLayout?

推荐答案

ConstraintLayout链

Android开发人员最近发布了新版本的 ConstraintLayout (今天为 1.0.2 ).此版本包含一个新的主要功能-链，其中允许我们在 ConstraintLayout 中对视图进行分组.

ConstraintLayout Chains

Android developers recently released a new version of 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:

• 将元素散布在可用空间中
• 在这种情况下，元素也可以组合在一起，也可以被打包".

当前，您需要使用以下gradle依赖项才能使用此功能(因为它是Alpha版):

Currently, you need to use the following gradle dependency to use this feature (since it is an alpha):

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

此处，您可能会找到最新版本的ConstraintLayout在您的项目中使用.

Here you may find the newest version of ConstraintLayout to use in your projects.

直到 Android Studio 2.3 ，Android Studio用户界面设计者不支持创建链，因为您无法在其中添加双向约束.解决方案是手动创建XML约束，如 TranslucentCloud 所述.从Android Studio 2.3(目前仅在金丝雀频道中)开始，UI编辑器也支持链(如提到的 GoRoS 评论).

Until 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 mentioned in comments).

以下是如何使用ConstraintLayout和链将两个视图一起放置在屏幕中间的示例:

Following is an example of how to position two views together in the middle of a screen using ConstraintLayout and 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"

---

Update (Jan, 2018) by @Mateus Gondim

In the recent versions, you should use app:layout_constraintVertical_chainStyle="packed" instead of app:layout_constraintVertical_chainPacked="true"

这篇关于在ConstraintLayout中对视图进行分组以将其视为单个视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！