Question

这是我的预期布局。

<-   ActionBar with back  button

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

Doese有谁知道如何使用ConstraintLayout支持这个？ Image2，Image3将位于中心，它们之间的边距很小或没有。 Image1和Image4分别靠近左右边缘。

对于图像行，无论如何使用LinearLayout或RelativeLayout实现相同的目标吗？

coordinatorlayout总是必须是root布局吗？如果有，它是否支持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

通过使用“水平链”并调整偏斜，您可以获得上述布局。

如果您觉得难以理解PLZ，请在此视频中使用布局编辑器设计布局。 Youtube: Centring button in constraint layout using chains and bias

STEPS：

打开布局编辑器并添加两个按钮
按住shift键并选择两个按钮，然后通过右键单击从链选项中选择“水平链”
通过点击悬停在链接按钮上方的链条选项来切换间距选项。
在左右边缘分别添加两个按钮
将左按钮限制在左边缘，将右按钮限制在右边缘
使用布局编辑器将左偏差设置为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的不是相同的宽度，并且您需要将两个的组合居中，那么（就我而言）我知道你只能通过引入一个中间父（例如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。

中

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

4 个答案:

更新