缩放图像按钮以适应宽度

Question

我有一个带有 ConstraintLayout 的滚动视图，我想添加一些图像按钮。它们应该缩放以适合半宽，这样我就可以将 2 个按钮排成一行。整个东西必须是可滚动的，因为我想添加大约 10 行按钮。我尝试了很多选项，例如此处

我的layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
tools:ignore="SpeakableTextPresentCheck">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:adSize="BANNER"
        app:adUnitId="ca-app-pub-xxxxxx"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageButton
        android:id="@+id/ibDog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/dog"
        app:layout_constraintEnd_toStartOf="@+id/ibHorse"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/adView"

        app:srcCompat="@drawable/dog" />

    <ImageButton
        android:id="@+id/ibHorse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/horse"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/ibDog"
        app:layout_constraintTop_toBottomOf="@+id/adView"
        app:srcCompat="@drawable/horse" />

    <ImageButton
        android:id="@+id/ibCat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/cat"
        app:layout_constraintEnd_toStartOf="@+id/ibFrog"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/ibHorse"
        app:srcCompat="@drawable/cat" />

    <ImageButton
        android:id="@+id/ibFrog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/frog"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/ibCat"
        app:layout_constraintTop_toBottomOf="@id/ibHorse"
        app:srcCompat="@drawable/frog" />


</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

谢谢！

Answer 1

<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:orientation="horizontal">
                <ImageButton
                    android:id="@+id/ibHorse"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:contentDescription="@string/dog"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/horse" />
                <ImageButton
                    android:id="@+id/ibCat"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:contentDescription="@string/cat"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/cat" />
            </LinearLayout>

Answer 2

尝试以下操作。我已将 ScrollView 的宽度更改为 match_parent，并将 ImageViews 的宽度更改为 0dp，这将拉伸根据chain logic.

输出图像

<ScrollView 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fillViewport="true"
    tools:ignore="SpeakableTextPresentCheck">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/adView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:adSize="BANNER"
            app:adUnitId="ca-app-pub-xxxxxx"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:id="@+id/ibDog"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toStartOf="@+id/ibHorse"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/adView"
            app:srcCompat="@drawable/ic_launcher_foreground" />

        <ImageButton
            android:id="@+id/ibHorse"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/ibDog"
            app:layout_constraintTop_toBottomOf="@+id/adView"
            app:srcCompat="@drawable/ic_launcher_foreground" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

缩放图像按钮以适应宽度

Scale Imagebuttons to fit width

android

android-constraintlayout