在ConstraintLayout中均等间距视图

Question

我正在尝试在ConstraintLayout中创建5个ImageButton，并使它们之间间距相等，但我遇到了一些问题，无法锚定它们并使其易于操作，例如：

我的 xml 代码：

    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@drawable/sheet_shadow"
    android:padding="5dp">

    <ImageButton
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="18dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

    <ImageButton
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="18dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btn1"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

    <ImageButton
        android:id="@+id/btn3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="18dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/btn2"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

    <ImageButton
        android:id="@+id/btn4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/btn5"
        app:layout_constraintStart_toEndOf="@+id/btn3"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

    <ImageButton
        android:id="@+id/btn5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="18dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:tint="@color/grey_40"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_more_vert" />

</android.support.constraint.ConstraintLayout>

- DolDurma

Answer 1

你应该创建链和集合：

app:layout_constraintHorizontal_chainStyle=”spread”

以下是有关使用ConstraintLayout创建链的一些资源：https://constraintlayout.com/basics/create_chains.html

更新：

示例

<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=".MainActivity">

<ImageButton
    android:id="@+id/imageView1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/imageView2"
    app:layout_constraintHorizontal_chainStyle="spread"
    android:src="@mipmap/ic_launcher"/>

<ImageButton
    android:id="@+id/imageView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toEndOf="@id/imageView1"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/imageView3"
    android:src="@mipmap/ic_launcher"/>

<ImageButton
    android:id="@+id/imageView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toEndOf="@id/imageView2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/imageView4"
    android:src="@mipmap/ic_launcher"/>

<ImageButton
    android:id="@+id/imageView4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toEndOf="@id/imageView3"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/imageView5"
    android:src="@mipmap/ic_launcher"/>

<ImageButton
    android:id="@+id/imageView5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintStart_toEndOf="@id/imageView4"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:src="@mipmap/ic_launcher"/>

- Sebastian M

---

我更新了我的回答。这是你想要实现的吗？ - Sebastian M

我的问题已经解决了，感谢你的帮助，我给你的帖子点了赞 :) - DolDurma

当将宽度设置为0dp时，所有视图都会被隐藏。 - Abhinav Saxena

Answer 2

请尝试这段代码。在这个代码中，我使用了约束布局和三个按钮，并使用以下方式对这些按钮进行等间距排列： 按照以下步骤操作： 1. 拖放视图。 2. 选择您想要在它们之间设置间距的视图。 3. 单击右键并单击组织 -> 水平打包。 4. 然后再次选择并 -> 居中 -> 水平。

最后，视图将设置为等距离。 像这样... 第三步截图 第二步截图 我希望它能为您工作。 谢谢。 代码

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

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteX="129dp"
    tools:layout_editor_absoluteY="245dp" />

<Button
    android:id="@+id/button9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteX="33dp"
    tools:layout_editor_absoluteY="245dp" />

<Button
    android:id="@+id/button10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteX="225dp"
    tools:layout_editor_absoluteY="245dp" />

- white hills

Answer 3

我不太明白你在示例截图中遇到的问题。但是，如果您想创建一个水平排列、间距相等的 UI，可以添加一个线性布局（水平方向），并将这些按钮添加到其中。然后将布局约束到父布局的底部。

目前无法提供正确的代码，但伪代码如下：

constraint layout
    linear layout - orientation:horizontal
        button1
        button2
        button3
        button4
        button5
    \linear layout
\constraint layout

- Rishabh