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

2024-05-04

背景

谷歌宣布了一个名为“约束布局 http://tools.android.com/tech-docs/layout-editor“这应该是最终的布局，它可以取代所有布局，同时保持平坦（没有嵌套布局）并具有更好的性能。

问题

事实是，除了 Google IO 上提供的视频之外，我几乎没有看到任何可以在这件事上帮助我的教程。

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

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

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

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

这一切都适用于RelativeLayout，它具有2个TextView的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>

我尝试过的

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

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

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

问题

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

看看我的回答here https://stackoverflow.com/q/37507463/4378400.

ContraintLayout https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html包含一个功能——Chains- 这使得实现你所要求的成为可能：

链在单轴（水平或水平方向）上提供类似群体的行为垂直）。

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

一旦创建了一条链，就有两种可能性：

将元素散布在可用空间中

链也可以“打包”，在这种情况下，元素被分组在一起

至于你的箱子，你必须打包你的label and descriptionTextViews 并将它们垂直居中在您的父级中：

（确保您使用的版本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_constraintHorizontal_chainStyle="packed"/>

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

更新 25-06-2019 (@Saeid Z https://stackoverflow.com/users/7766540/saeid-z):

现在在约束布局 1.1.3 中我们必须使用app:layout_constraintHorizontal_chainStyle="packed"代替app:layout_constraintVertical_chainPacked="true"

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)