带有方形子项的方形 GridLayout（边=父宽度）

Question

我正在尝试制作一个正方形网格布局（嵌套在约束布局中），所有边都等于父宽度，这样对于任何设备，用户都将拥有最大的宽度他屏幕上的可能正方形。
然后我想在第一个方块中有另外四个方块，它们将是带有背景图像的线性布局，将根据网格布局单元格大小进行拉伸。
理想情况下，我想在 XML 中完成此操作。我是 android 的初学者，请原谅我在以下代码中可能出现的明显问题和错误，但我在这方面花费了大量时间，但没有取得任何进展。感谢任何帮助。
下面是我的 main.xml，其中单元格具有固定尺寸。我试着搞乱重量和重力，但没有成功。只是想知道是否有一种简单的方法可以让这段代码做我想做的事。

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="horizontal">


    <GridLayout
        android:id="@+id/foursquares"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:columnCount="8"
        android:orientation="vertical"
        android:rowCount="8"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:id="@+id/a1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_row="0"
            android:layout_rowSpan="1"
            android:layout_column="0"
            android:layout_columnSpan="1"
            android:background="@drawable/blacksquare"
            android:orientation="horizontal"></LinearLayout>

        <LinearLayout
            android:id="@+id/a2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_row="0"
            android:layout_rowSpan="1"
            android:layout_column="1"
            android:layout_columnSpan="1"
            android:background="@drawable/whitesquare"
            android:orientation="horizontal"></LinearLayout>

        <LinearLayout
            android:id="@+id/a3"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_row="1"
            android:layout_rowSpan="1"
            android:layout_column="0"
            android:layout_columnSpan="1"
            android:background="@drawable/whitesquare"
            android:orientation="horizontal"></LinearLayout>

        <LinearLayout
            android:id="@+id/a4"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_row="1"
            android:layout_rowSpan="1"
            android:layout_column="1"
            android:layout_columnSpan="1"
            android:background="@drawable/blacksquare"
            android:orientation="horizontal"></LinearLayout>


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

Answer 1

ConstraintLayout is allows you to make large and complex layouts with a flat view hierarchy. No nested view groups like inside RelativeLayout or LinearLayout etc. You can make Responsive UI for android using ConstraintLayout and its more flexible compare to RelativeLayout and Grid Layout的主要优势。

ConstraintLayout 使您可以轻松地将任何视图约束到 percentage width or height。所以我稍微编辑了你的代码。看看兄弟，希望对你有帮助

<?xml version="1.0" encoding="utf-8"?>
    <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:orientation="horizontal"
        android:padding="16dp">

            <LinearLayout
                android:id="@+id/a1"
                android:layout_width="0dp"
                app:layout_constraintWidth_percent=".48"
                android:layout_height="0dp"
                app:layout_constraintHeight_percent=".3"
                android:background="@drawable/blacksquare"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:padding="8dp"
                android:orientation="horizontal">
            </LinearLayout>

            <LinearLayout
                android:id="@+id/a2"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintWidth_percent=".48"
                app:layout_constraintHeight_percent=".3"
                android:background="@drawable/blacksquare"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:padding="8dp"
                android:orientation="horizontal">
            </LinearLayout>

            <LinearLayout
                android:id="@+id/a3"
                android:layout_width="0dp"
                app:layout_constraintWidth_percent=".48"
                android:layout_height="0dp"
                app:layout_constraintHeight_percent=".3"
                android:background="@drawable/blacksquare"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/a1"
                android:layout_marginTop="16dp"
                android:orientation="horizontal">
            </LinearLayout>

            <LinearLayout
                android:id="@+id/a4"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintWidth_percent=".48"
                app:layout_constraintHeight_percent=".3"
                android:background="@drawable/blacksquare"
                app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginTop="16dp"
                app:layout_constraintTop_toBottomOf="@id/a2"
                android:orientation="horizontal">
            </LinearLayout>

        <LinearLayout
            android:id="@+id/a5"
            android:layout_width="0dp"
            app:layout_constraintWidth_percent=".48"
            android:layout_height="0dp"
            app:layout_constraintHeight_percent=".3"
            android:background="@drawable/blacksquare"
            android:layout_marginTop="16dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/a3"
            android:orientation="horizontal">
        </LinearLayout>

        <LinearLayout
            android:id="@+id/a6"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintWidth_percent=".48"
            app:layout_constraintHeight_percent=".3"
            android:background="@drawable/blacksquare"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginTop="16dp"
            app:layout_constraintTop_toBottomOf="@id/a4"
            android:orientation="horizontal">
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

带有方形子项的方形 GridLayout（边=父宽度）

Square GridLayout with square children (side=parent width)

java

android

android-gridlayout