使用约束布局将两个项目一起居中

Question

这是我想要的布局。

<-   ActionBar with back  button

[ Image1 ]            [Image2][Image3]       [Image4]

有人知道如何使用ConstraintLayout支持此功能吗？Image2，Image3应该位于中间，并且它们之间几乎没有空白。Image1和Image4分别位于左右边缘附近。

无论如何，使用LinearLayout或RelativeLayout对图像行要实现相同的效果？

是否必须始终将coordinatorlayout设为根布局？如果可以，它是否支持ActionBar？

Answer 1

您可以使用链条（chainStyle =“ packed”）来创建两个居中的按钮，它们的左右两侧的空间应相同。（比率可通过偏差进行调整）

    <Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:text="Two"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="268dp" />

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:text="Buttons centered"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button"
    tools:layout_editor_absoluteY="268dp" />

Answer 2

使用指南是实现您正在尝试做的事情的简单方法。

要注意的关键是app:layout_constraintGuide_percent="0.5"将指南水平放置在视图的中心。从那里您可以将图像附加到它的任一侧。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.junkrmm.MainActivity">


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

    <ImageView
        android:id="@+id/A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/a"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="0dp"
        android:layout_marginTop="0dp" />


    <ImageView
        android:id="@+id/B"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/b"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="0dp"
        android:layout_marginTop="0dp" />

    <ImageView
        android:id="@+id/C"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/c"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="0dp"
        android:layout_marginTop="0dp" />

    <ImageView
        android:id="@+id/D"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/d"
        app:layout_constraintStart_toEndOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginEnd="0dp"
        android:layout_marginTop="0dp"/>

</android.support.constraint.ConstraintLayout>

如果您的图像大小一致，您可以使用 LinearLayout 实现相同的效果，但 ConstraintLayout 更适合于此。

在我的脑海中，我认为 CoordinatorLayout 需要是根视图组，但我可能会误会。它确实支持 Toolbar 形式的 ActionBar，它是 ActionBar 的更新更灵活的变体。

Answer 3

通过使用水平链并调整偏差，您可以获得如上的布局。

如果您觉得很难理解，请观看此视频，这里我使用布局编辑器设计了布局。Youtube：使用链和偏差在约束布局中居中按钮

脚步：

1. 打开布局编辑器并添加两个按钮
2. 按住 Shift 并选择两个按钮，然后右键单击从链选项中选择水平链
3. 通过单击将鼠标悬停在链接按钮上时出现的链选项来切换间距选项。
4. 在左右边缘各添加两个按钮
5. 将左按钮约束到左边缘，将右按钮约束到右边缘
6. 使用布局编辑器将左侧偏差设置为 10，右侧偏差设置为 90。

Answer 4

是的，这是可能的（只要您知道您的图像不会太宽以至于它们会重叠，并且只要 Image2 和 Image3 的宽度相同）。

定位Image1和Image4很容易；您可以将它们的外边缘限制为父级的外边缘。

然后使用这些约束将Image2的右侧边缘定位到父级的精确中心：

app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

这些约束将Image3的左边缘定位到精确的中心：

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintLeft_toRightOf="parent"

更新

如果你事先知道Image2和Image3的宽度不一样，并且你需要两者的组合居中，那么（据我所知）你只能通过引入中间父级来解决这个问题（例如A LinearLayout）。

在这种情况下，您可以像以前一样将 Image1 和 Image4 定位到父边缘，并使用这些约束将 内部“居中LinearLayout” ConstraintLayout：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

然后您只需将 Image2 和 Image3 放入其中即可LinearLayout。