Question

我正在尝试进行布局，其中有很多不同的图片，每个图片占用的空间相同。考虑到我希望它们出现在网格中，我使用了TableLayout。

Make cells same width and height to fill the table

根据这个问题，可以通过调整权重值使每个单元格具有相同的宽度和高度。

这就是我在xml中的内容。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".MainActivity">

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:weightSum="6"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0sp"
            android:layout_weight="2">

            <ImageButton
                android:id="@+id/imageButton10"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/janice" />

            <ImageButton
                android:id="@+id/imageButton13"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/phoebe" />

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0sp"
            android:layout_weight="2">

            <ImageButton
                android:id="@+id/imageButton12"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/monica" />

            <ImageButton
                android:id="@+id/imageButton11"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/joey" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="0sp"
            android:layout_weight="2">

            <ImageButton
                android:id="@+id/imageButton9"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/chandler" />

            <ImageButton
                android:id="@+id/imageButton14"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/ross" />
        </TableRow>

    </TableLayout>

</android.support.constraint.ConstraintLayout>

我期望的是，由于每个TableRow具有相同的权重，因此屏幕的高度应平均分为3。然后，由于每个图像在每个TableRow中具有相同的权重，因此每个图像应占一半每个TableRow的宽度，具有良好的网格外观。像这样：

这实际上是什么：

我很清楚这些是不同尺寸的图像，但是应该可以将它们限制在范围之内。

是的，还有很多问题，人们问如何使图像不占用比预期更多的空间：ImageView taking too much vertical space

但是答案始终是固定比例，或者将adjustViewBounds设置为true（我已经完成）。所以我的问题是，

我该如何解决？

Answer 1

我想出了解决方案。我认为尝试使用layout_weight限制每个TableRow的高度首先是错误的思维方式。根据文档（重点挖掘）：

TableLayout的子级不能指定layout_width 属性。宽度始终为MATCH_PARENT。但是，layout_height 属性可以由孩子定义；默认值为 ViewGroup.LayoutParams.WRAP_CONTENT。 如果孩子是TableRow，那么高度始终为ViewGroup.LayoutParams.WRAP_CONTENT。

由于不能限制高度，因此图像可以根据需要占用尽可能多的空间。

我们实际上可以使用 LinearLayout 限制高度。使用内部带有三个Horizontal LinearLayouts的Vertical LinearLayout，我们可以为每个图像提供相同的空间。每个水平LinearLayout获取高度的1/3，而每个水平LinearLayout内部的图片获取宽度的1/2。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/imageView3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/rachel" />

            <ImageButton
                android:id="@+id/imageView2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/phoebe" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal"
            >

            <ImageButton
                android:id="@+id/imageButton15"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/chandler" />

            <ImageButton
                android:id="@+id/imageButton17"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/monica" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="1">

            <ImageButton
                android:id="@+id/imageView"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/joey" />

            <ImageButton
                android:id="@+id/imageButton16"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                app:srcCompat="@drawable/janice" />

        </LinearLayout>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

如何获取图片以真正在Android中遵守其界限？

1 个答案: