如何在水平 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
进行了更详细的说明
我注意到你已经在使用链了。
因此,您需要做的就是将所有 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>
我在使用 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
进行了更详细的说明我注意到你已经在使用链了。
因此,您需要做的就是将所有 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>