Android 如何使用ConstraintLayout将多个视图居中？ 背景

谷歌已经宣布了一个名为“”的新布局，它应该是最终的布局，可以取代所有的布局，同时保持平面（没有嵌套布局），并具有更好的性能

问题 问题是，除了谷歌IO上的视频外，我几乎看不到任何能帮助我解决这个问题的教程

我想做的是，假设我在另一个布局中有一个垂直居中的线性布局-将它们都转换为一个ConstraintLayout

毕竟，这就是这个新布局的目的

我希望处理的布局如下所示：

请注意，中间的视图仅垂直居中，两个文本视图位于ImageView的右侧，ImageView也垂直居中

这一切都适用于RelativeLayout，它具有两个文本视图中的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>

我试过的 我试着读了一些关于谷歌的文章和视频：

这没用，所以我试着使用它，希望我能自己找到如何使用它。 但我不知道怎么做。我尝试使用该功能来转换布局，但这会使视图变得非常混乱，并增加我不希望的额外边距

问题

---

如何将这两个布局转换为单个ConstraintLayout

将

app:layout\u constraintVertical\u 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>

，布局非常相似，不过我将东西放在屏幕高度的1/3处

编辑：这个答案是在链可用之前写的。请立即使用链条，请参见上面的答案：


目前，我相信您唯一的选择是将两个文本视图包装在另一个布局中—可能线性布局最适合这种情况

但constraint layout背后的团队表示，他们希望引入“虚拟容器”，它正好服务于这个用例：将两个或多个视图分组在一起，并在容器上设置一个约束（如垂直居中）。其思想是，它不是约束布局内部的完整嵌套布局，而是约束布局用来定位其子级的东西——因此它应该提供比嵌套更好的性能

他们提到这件事（与确切时间有关）。所以我想请继续关注。
看看我的例子（）

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


更新：回复您的评论如下：

我已经安装了你的应用程序，这是我目前唯一能想到的。因为它是一个ViewHolder布局，所以可以将布局高度设置为“包裹内容”，或者如果愿意，也可以对其进行修复。如果您愿意，我可以向您发送xml，我不想大量给出答案

Top TextView左约束约束约束为ImageView的右约束。此外，top TextView->top constraint被约束到容器的顶部，这也是正确的。底部文本视图被约束到容器的底部。中间文本视图被限制为匹配顶部文本视图的宽度，与IVIEVIEW没有连接。
看看我的答案。
包含一项功能-
链
，可实现您的要求：

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

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

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


在可用空间中展开元素
链也可以“打包”，在这种情况下，元素分组在一起


对于您的案例，您必须打包您的
标签
和
说明
文本视图，并将它们垂直居中放置：

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


):
现在，在constraint layout 1.1.3中，我们必须使用
app:layout\u constraint Horizontal\u chainStyle=“packed”
而不是
app:layout\u constraint Vertical\u chainPacked=“true”
要垂直或水平居中，请在布局上设置一个

垂直居中

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

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

水平居中

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

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

这一个：？@pskink，但是居中视图有两个文本视图，一个在另一个下面。一个也没有。目前，它们位于居中的线性布局内。此外，线性布局位于右视图和左视图之间。您是否尝试过在设计窗格中进行自动转换？“转换为ConstraintLayout”@DevrimTuncer是。结果并没有让它变平。你可以在这里看到我的尝试：我不明白。我有两个文本视图。我可能会有更多。我希望它们垂直居中。我该怎么办？我的布局有两个文本视图。我只给出了一个如何在ConstraintLayout内垂直居中1个视图的示例。如果需要一组，请为每个对象设置“偏移”属性。在我的例子中，我只设置了1个文本视图，并将其用作另一个文本视图的锚。您能为我介绍的案例演示如何执行该操作吗？一个文本视图位于另一个文本视图之上，而两者一起居中？您在我的回答中看到Github文件了吗？这几乎是一样的，只需将布局中的偏差值更改为0.5而不是0.3。