如何創建GridLayout，其中元素平均填充網格？

Question

我正在嘗試設置一個分為四個相等象限的布局。 通過一些研究，看起來GridLayout就像我需要的那樣，所以我嘗試了以下方法：

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/frame_border"
        android:columnCount="2"
        android:layout_margin="30sp"
        android:orientation="horizontal" >
        <LinearLayout
            android:layout_column="0"
            android:layout_weight="1"
            android:background="@drawable/frame_border">
            <TextView
                android:text="A"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="40sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_column="1"
            android:layout_weight="1"
            android:background="@drawable/frame_border">
            <TextView
                android:text="B"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="40sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_column="0"
            android:layout_weight="1"
            android:background="@drawable/frame_border">
            <TextView
                android:text="C"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="40sp" />
        </LinearLayout>
        <LinearLayout
            android:layout_column="1"
            android:layout_weight="1"
            android:background="@drawable/frame_border">
            <TextView
                android:text="D"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:textSize="40sp" />
        </LinearLayout>
    </GridLayout>

@drawable/frame_border定義如下，在元素周圍繪制一個簡單的白色邊框，這樣我就可以看到它的確切邊界：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

  <solid android:color="@android:color/transparent" />

  <stroke
      android:width="2dp"
      android:color="#FFFFFF" />

</shape>

當我像這樣定義布局時，而不是四個相等的象限，我得到一個這樣的框：

+-----------------------------------------------+
|A|B|                                           |
+-+-+                                           |
|C|D|                                           |
+-+-+                                           |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
|                                               |
+-----------------------------------------------+

如果，而不是android:layout_weight="1"我使用android:layout_gravity="fill"作為子布局，我得到以下內容，這也是錯誤的：

+-----------------------------------------------+
|A|B                                            |
+-+---------------------------------------------+
|C|D                                            |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
| |                                             |
+-+---------------------------------------------+

什么是適當的魔術咒語，使四個子布局中的每一個占據GridLayout的高度的一半和寬度的一半，將其分成四個相等的象限？

Answer 1

使用如下所示，您可以將 TextView 更改為任何LinearLayout 。

<android.support.v7.widget.GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/choice_grid"
    android:background="@android:color/holo_blue_bright"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    app:alignmentMode="alignBounds"
    app:columnCount="2"
    app:rowCount="2"
    app:rowOrderPreserved="false">

    <TextView
        android:layout_width="0dp"
        android:background="@drawable/frame_border"
        android:gravity="center"
        android:text="Tile1"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_gravity="fill_horizontal" />

    <TextView
        android:layout_width="0dp"
        android:background="@drawable/frame_border"
        android:gravity="center"
        android:text="Tile2"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_gravity="fill_horizontal" />

    <TextView
        android:layout_width="0dp"
        android:background="@drawable/frame_border"
        android:gravity="center"
        android:text="Tile3"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_gravity="fill_horizontal" />

    <TextView
        android:layout_width="0dp"
        android:background="@drawable/frame_border"
        android:gravity="center"
        android:text="Tile4"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        app:layout_gravity="fill_horizontal" />

</android.support.v7.widget.GridLayout>

輸出：

希望這會幫助你。