如何使 3 个图像按钮响应？

Question

我正在努力实现这样的目标：

占据整个屏幕的三个图像按钮菜单，其中三个必须具有相同的高度，宽度将是设备的，我很难做到，使用 ConstraintLayout 我有点让它“响应”但取决于在设备尺寸上，出现间隙，不知道为什么：

这是我的布局：

<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"
android:background="#921B1F33"
tools:context="com.example.minacar.MainActivity">


<ImageButton
    android:id="@+id/transferButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:contentDescription="@string/descripcion_button_1"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/menutransfer"

    />


<ImageButton
    android:id="@+id/rentaCarButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:contentDescription="@string/descripcion_button_2"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toTopOf="@+id/transferButton"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/menurent" />

<ImageButton
    android:id="@+id/carButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:contentDescription="@string/descripcion_button_3"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/transferButton"
    app:srcCompat="@drawable/menucar" />

任何帮助或指导将不胜感激，提前致谢！

不确定它是否有帮助，我使用的图像是三个相同大小的 1417x929 PNG。

Answer 1

在您的布局中使用垂直链，并通过设置所有四个（顶部、底部、开始、结束）然后将宽度和高度设置为 0 来确保 ImageButtons 匹配约束。您之间的空间来自ImageButton的默认填充。 为了防止这种情况，为所有这些添加透明背景。

<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"
    android:background="#921B1F33">


    <ImageButton
        android:id="@+id/transferButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toTopOf="@id/carButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/rentaCarButton"
        app:srcCompat="@drawable/menutransfer"
        android:background="@color/transparent"
        />


    <ImageButton
        android:id="@+id/rentaCarButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toTopOf="@+id/transferButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"
        app:srcCompat="@drawable/menurent"
        android:background="@color/transparent"/>

    <ImageButton
        android:id="@+id/carButton"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/transferButton"
        app:srcCompat="@drawable/menucar"
        android:background="@color/transparent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

我建议在这种情况下使用 LinerLayout，将每个元素的权重设置为 1，match_parent 的宽度将达到所需的行为。

<LinerLayout android:orientation = "vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#921B1F33"
tools:context="com.example.minacar.MainActivity">

<ImageButton
    android:id="@+id/carButton"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weight = "1" />

<ImageButton
    android:id="@+id/carButton"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weight = "1" />

<ImageButton
    android:id="@+id/carButton"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:weight = "1" />

<LinerLayout>

Answer 3

您可以将链用于：

  app:layout_constraintVertical_chainStyle="spread"

参考：https ://medium.com/@nomanr/constraintlayout-chains-4f3b58ea15bb