如何在水平 ConstraintLayout 中修复等间距?

How to fix equal spacing in a horizontal ConstraintLayout?

我在使用 ConstraintLayout 中的 ConstraintLayout 时遇到问题,无法在我的应用程序底部平均 space 5 个按钮。目前,我可以 space 除了最左边的按钮之外的所有按钮: shown here. 我知道 LinearLayout 也可以用于此目的,但我想尽可能使用 ConstraintLayout。我的activityXML如下图:

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layout2"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"


        app:layout_constraintTop_toBottomOf="@id/linear1">

        <ImageButton
            android:id="@+id/back_arrow"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/back_arrow"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@id/forward_arrow"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintVertical_chainStyle="spread" />

        <ImageButton
            android:id="@+id/forward_arrow"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/forward_arrow"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@id/refresh"
            app:layout_constraintStart_toEndOf="@id/back_arrow"
            app:layout_constraintTop_toBottomOf="parent"

            app:layout_constraintVertical_chainStyle="spread" />

        <ImageButton
            android:id="@+id/refresh"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/refresh_icon"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@id/stop"
            app:layout_constraintStart_toEndOf="@id/forward_arrow"
            app:layout_constraintTop_toBottomOf="parent"

            app:layout_constraintVertical_chainStyle="spread" />

        <ImageButton
            android:id="@+id/stop"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/stop_icon"
            app:layout_constrainedWidth="true"
            app:layout_constraintEnd_toStartOf="@id/home"
            app:layout_constraintStart_toEndOf="@id/refresh"
            app:layout_constraintTop_toBottomOf="parent"

            app:layout_constraintVertical_chainStyle="spread" />

        <ImageButton
            android:id="@+id/home"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/home_icon"
            app:layout_constrainedWidth="true"

            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/stop"
            app:layout_constraintTop_toBottomOf="parent"
            app:layout_constraintVertical_chainStyle="spread" />


    </androidx.constraintlayout.widget.ConstraintLayout>

    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="wrap_content"

        android:layout_height="0dp"
        android:orientation="vertical"
        android:weightSum="2"
        app:layout_constraintBottom_toTopOf="@+id/layout2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme">

            <RelativeLayout
                android:id="@+id/url_go_progressbar_relLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/web_address_edit_text"
                    android:layout_width="200dp"
                    android:layout_height="48dp"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentLeft="true"
                    android:layout_marginTop="2dp"
                    android:layout_marginBottom="2dp"
                    android:layout_toLeftOf="@+id/go_button"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:hint="Enter URL"
                    android:importantForAutofill="noExcludeDescendants"
                    android:inputType="textWebEditText"
                    android:textSize="13sp" />

                <Button
                    android:id="@+id/go_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignTop="@+id/web_address_edit_text"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_marginTop="4dp"
                    android:text="@string/go_button" />

                <ProgressBar
                    android:id="@+id/progress_bar"
                    style="?android:attr/progressBarStyleHorizontal"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/web_address_edit_text" />
            </RelativeLayout>
        </androidx.appcompat.widget.Toolbar>

        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@+id/swipe"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.4">


            <WebView
                android:id="@+id/web_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </WebView>
        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

我是 Android 开发的新手,所以我没有太多经验,如果您在查看我的 XML 时注意到任何其他不良做法,请告诉我。 (另外,如果可能的话,我很想知道是否有办法让导航栏使用屏幕的特定百分比,而不是我分配给它的静态 dp。)

谢谢!

这是您的答案,使用 ConstraintLayout

进行了更详细的说明

https://constraintlayout.com/basics/create_chains.html

我注意到你已经在使用链了。
因此,您需要做的就是将所有 ImageButton 的宽度更改为 0dp。这看起来 counter-intuitive 但它会导致所有按钮匹配约束集,因此所有按钮将具有相同的宽度。

例如

android:layout_width="wrap_content"

必须改为

android:layout_width="0dp"

谢谢!

使用等距离的参考线并将按钮约束到它您将需要添加 3 条垂直参考线以使按钮的间距相等

了解更多 https://developer.android.com/reference/androidx/constraintlayout/widget/Guideline

<androidx.constraintlayout.widget.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">

<androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        app:layout_constraintGuide_begin="100dp"
        android:orientation="vertical"/>

<Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>