如何使用ConstraintLayout将多个视图集中在一起？

Question

背景

谷歌宣布了一个名为＆＃34; ConstraintLayout＆＃34;这应该是最终的布局，可以在保持平坦（没有嵌套布局）的同时取代所有布局，并且具有更好的性能。

问题

事情是，我几乎没有看到任何可以帮助我解决这个问题的教程，除了在Google IO上展示的视频。

我想要做的是，假设我在另一个布局中有一个垂直居中的LinearLayout - 将它们转换为单个ConstraintLayout。

毕竟，这就是这种新布局的目的......

我想要处理的布局如下：

请注意，中心的视图仅垂直居中，并且2个textView位于ImageView的右侧，也是垂直居中的。

这一切都适用于RelativeLayout，它具有2个TextViews的LinearLayout，但我想知道如何将它们转换为单个ConstraintLayout。

以下是我所展示的XML示例：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="wrap_content"
    android:minHeight="?attr/listPreferredItemHeightSmall">

    <ImageView
        android:id="@+id/appIconImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
        android:src="@android:drawable/sym_def_app_icon"
        tools:ignore="ContentDescription"/>

    <LinearLayout
        android:id="@+id/appDetailsContainer"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/appIconImageView"
        android:layout_toLeftOf="@+id/overflowView"
        android:layout_toRightOf="@+id/appIconImageView"
        android:layout_toStartOf="@+id/overflowView"
        android:orientation="vertical">

        <TextView
            android:id="@+id/appLabelTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:text="label"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>

        <TextView
            android:id="@+id/appDescriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:minLines="3"
            android:text="description"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/overflowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:padding="10dp"
        app:srcCompat="@drawable/ic_more_vert_black_24dp"

        tools:src="@drawable/ic_more_vert_black_24dp"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/isSystemAppImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/overflowView"
        android:layout_alignLeft="@+id/overflowView"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/overflowView"
        android:layout_alignStart="@+id/overflowView"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        app:srcCompat="@drawable/ic_warning_black_24dp"
        tools:ignore="ContentDescription"
        tools:src="@drawable/ic_warning_black_24dp"/>

</RelativeLayout>

我尝试了什么

我尝试阅读一些文章并观看Google的一些视频：

• https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#0
• https://www.youtube.com/watch?v=sO9aX87hq9c
• https://youtu.be/csaXml4xtN8?t=1693

那没有帮助，所以我尝试使用它，希望我自己能找到如何使用它。 但我无法找到如何做到这一点。我尝试使用该功能转换布局，但这会使视图变得非常混乱，并增加了我不想要的额外边距。

问题

如何将2个布局转换为单个ConstraintLayout？

Answer 1

看看我的回答here。

ContraintLayout包含一项功能 - Chains - 可以实现您的要求：

  

链条在单个轴上提供类似行为的行为（水平或   垂直地）。

     

如果一组小部件链接在一起，则它们被视为链   双向连接

     

创建链后，有两种可能性：

     

  
• 在可用空间中展开元素
  
• 链条也可以打包＃34;在这种情况下，元素组合在一起
  

就您的情况而言，您必须打包label和description TextView并将它们垂直居中于您的父级：

（确保使用支持链的ConstraintLayout版本）

<?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_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainPacked="true"/>

    <TextView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button\nMkay"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/textView"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:srcCompat="@mipmap/ic_launcher"/>
</android.support.constraint.ConstraintLayout>

Answer 2

要垂直或水平居中，请在布局上设置opposing constraint。

垂直居中

    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"

水平居中

    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"

Answer 3

将app:layout_constraintVertical_bias="0.5"设置为需要垂直居中的视图，偏置属性仅在您指定边界的约束时有效（例如，垂直偏差的顶部和底部，水平偏差的左侧和右侧）

一个例子：

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/constraintLayout">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="@id/constraintLayout"
        app:layout_constraintBottom_toBottomOf="@id/constraintLayout"
        app:layout_constraintVertical_bias="0.5" />

</android.support.constraint.ConstraintLayout>

让我的布局工作在这里：https://github.com/hidroh/tldroid/blob/master/app/src/main/res/layout/activity_main.xml，几乎相似的布局，不过我把东西定位在屏幕高度的1/3处。

Answer 4

编辑：这个答案是在链条可用之前编写的。请立即使用链条，请参阅上面的答案：https://stackoverflow.com/a/40102296/1402641

现在我相信你唯一的选择是将两个文本视图包装在另一个布局中 - 可能线性布局最适合这种情况。

但是约束布局背后的团队表示他们想要引入“虚拟容器”，它正好用于这个用例：您将两个或多个视图组合在一起并在容器上设置约束（如垂直居中）。这个想法是它不是约束布局中的完整嵌套布局，而只是约束布局用于定位它的子项的东西 - 因此它应该提供比嵌套更好的性能。

他们在their I/O talk中提及它（与确切时间相关联）。所以我想请继续关注。

Answer 5

看一下我的例子（Center components in ConstraintLayout）

现在你可以居中＆＃34;图像＆＃34; （约束左上 - 下），约束＆＃34;标签＆＃34;顶部到＆＃34;图像＆＃34;顶部，约束＆＃34;描述＆＃34;顶部＆＃34;标签＆＃34;底部。 在下面的示例中，我将按钮高度与右侧的两个文本视图匹配（这是您的情况）。其他文字视图受限于上面的链接。

更新：回复下面的评论：

我已经安装了你的应用程序，这只是我能想到的。由于它是ViewHolder布局，layout_height可以设置为wrap_content，或者如果您愿意，可以修复它。如果你愿意，我可以寄给你xml，我不想淹没答案。

Top TextView左约束被约束为ImageView的右约束。另外，顶部TextView - ＆gt; top约束被约束到容器的顶部，所以是正确的。底部TextView被约束到容器的底部。中间的TextViews被约束为匹配顶部TextView的宽度，并且与ImageView没有任何关联。