如何创建GridLayout,其中元素平均填充网格?

时间:2016-05-03 12:20:55

标签: android xml layout

我试图设置一个分为四个相等象限的布局。通过一些研究,看起来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的高度的一半和宽度的一半,将其分成四个相等的象限?

1 个答案:

答案 0 :(得分:3)

使用如下所示,您可以将 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>

输出:

enter image description here

希望这会对你有所帮助。