在ConstraintLayout中平均间隔视图

时间：2018-12-22 15:48:19

标签： android android-layout android-constraintlayout

我试图在ConstraintLayout上使5 ImageButton之间具有相等的间距，但是我在锚定它们并使其变得容易时遇到了一些问题，例如：

enter image description here

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

3 个答案:

答案 0 :(得分：2)

您应该创建链并设置：

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

result

答案 1 :(得分：1)

请尝试以下代码。在这段代码中，我使用了约束布局和三个按钮。并且我已经使用以下命令将这些按钮均等对齐： 执行以下步骤： 1.拖放视图。 2.选择要在它们之间隔开的视图。 3.单击右键，然后单击组织->水平包装。 4.之后，再次选择并->居中->水平。

，最后将视图设置为相等的空间。 像这样。

3rd step screenshot second step screen shot

我希望它对您有用。 谢谢。 代码 

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

答案 2 :(得分：0)

从您的示例屏幕快照中我不太了解您遇到问题的方式。 但是无论如何，如果您要创建一个UI，在该UI中水平间隔相等的5个按钮，则可以添加线性布局（水平）并将这些按钮添加到其中。 然后将布局限制在父布局的底部。

目前无法提供正确的代码，但伪代码看起来像这样

constraint layout
    linear layout - orientation:horizontal
        button1
        button2
        button3
        button4
        button5
    \linear layout
\constraint layout
相关问题
最新问题