如何使 3 个 imageButtons 响应？

Question

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

占据整个屏幕的三图像按钮菜单，他们三个必须是等高， 宽度将是设备的 ，我很难做到，使用 ConstraintLayout I有点成功 'responsive' 但根据设备大小，会出现间隙，不确定原因：

这是我的布局：

<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

我建议在这种情况下使用 LinearLayout，设置每个元素的权重 = 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 2

您可以将链用于：

  app:layout_constraintVertical_chainStyle="spread"

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

Answer 3

在您的布局中使用垂直链，并通过设置所有四个（顶部、底部、开始、结束）然后将宽度和高度设置为 0 来确保 ImageButton 匹配约束。您进入的空间-介于 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>

如何使 3 个 imageButtons 响应？

How to make 3 imageButtons responsive?

java

android

android-imagebutton