android 安卓布局：如何在窗口上均匀分布显示所有图像

我尝试创建一个Android应用程序，使用来自gitHub png-images 0ad的所有图像.
我试着把所有（大约19个）图像放在屏幕上。我试着把图像大小设置为屏幕的17%（或0. 17）。
如果我将所有图像设置为layout_width="match_parent"，则图像太大。如果我将图像设置为layout_width="50dp"，则对于某些设备，图像太小。
我的想法是使用（因为我已经阅读了android.com..多屏幕resources.displayMetrics * 0.10作为图像大小。
我也试过很多来自Percentage width in a RelativeLayout的答案。似乎过时了。
完整源代码：https://github.com/0ad-matters/0ad-counter-unit-guide
我目前在app/src/main/res/layout/activity_main.xml中的最佳解决方案显示图像太小：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:minWidth="match_parent"
        android:minHeight="match_parent"
        android:maxWidth="match_parent"
        android:maxHeight="match_parent">

        <TableLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <TableRow android:layout_width="match_parent" android:layout_height="match_parent">
                <ImageButton
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        app:srcCompat="@drawable/emblem_athenians"
                        style="@style/Widget.AppCompat.ImageButton"/>
                <ImageButton
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        app:srcCompat="@drawable/emblem_britons"
                />
            </TableRow>
        </TableLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

layout_width和layout_height的标签列match_parent如下所示：

如果我用wrap_content来处理一个图像，它会占用图像大小的100%。这就是你在这里看到的那样大：

我会这么做：移除数据表，为每一列ImageButtons建立新的ConstraintLayout。将每一个按钮的条件约束设定为列中的下一个按钮，在整个配置中建立条件约束链。将第二列的顶端条件约束为第一列的底端。为简单起见，我只设定了每一列四个按钮，但这可以行程您想要新增的任何数目。
此外，如果要包括整个图像，请将adjustViewBounds设置为true并缩放图像。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/row1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageButton
            android:id="@+id/r1col1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/r1col2"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_athenians" />

        <ImageButton
            android:id="@+id/r1col2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r1col1"
            app:layout_constraintEnd_toStartOf="@+id/r1col3"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_britons" />

        <ImageButton
            android:id="@+id/r1col3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r1col2"
            app:layout_constraintEnd_toStartOf="@+id/r1col4"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_carthaginians" />

        <ImageButton
            android:id="@+id/r1col4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r1col3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_han" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/row2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/row1">

        <ImageButton
            android:id="@+id/r2col1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/r2col2"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_kushites" />

        <ImageButton
            android:id="@+id/r2col2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r2col1"
            app:layout_constraintEnd_toStartOf="@+id/r2col3"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_macedonians" />

        <ImageButton
            android:id="@+id/r2col3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r2col2"
            app:layout_constraintEnd_toStartOf="@+id/r2col4"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_macedonians2" />

        <ImageButton
            android:id="@+id/r2col4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:padding="0"
            android:backgroundTint="#00FFFFFF"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            app:layout_constraintStart_toEndOf="@+id/r2col3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/emblem_mauryas" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

结果：

android 安卓布局：如何在窗口上均匀分布显示所有图像

1条答案

相关问题

热门标签

最新问答