GridLayout使用

      某天需要做个Win10开始页类似的色块样式的布局，就像下面这样：

                                                                     

      某程序媛表示：so easy! GridLayout走起~

      下面就是当事程序媛“行云流水一气呵成挥洒自如笔走龙蛇...”一阵捯饬后的页面效果：

<GridLayout
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:columnCount="3"
        android:rowCount="3"
        android:orientation="horizontal"
        android:useDefaultMargins="true"
        >
        <LinearLayout
            android:id="@+id/llPutOn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_rowSpan="2"
            android:orientation="vertical"
            android:gravity="center"
            android:background="@drawable/bg_round_grid1"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid1"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:text="@string/put_on"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/llPullOff"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_row="0"
            android:orientation="vertical"
            android:gravity="center"
            android:background="@drawable/bg_round_grid2"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid2"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/pull_off"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/llTransfer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:layout_row="0"
            android:orientation="vertical"
            android:gravity="center"
            android:background="@drawable/bg_round_grid3"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid3"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:text="@string/transfer"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/llSorting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="1"
            android:layout_columnSpan="2"
            android:orientation="vertical"
            android:gravity="center"

            android:background="@drawable/bg_round_grid4"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid4"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/sorting"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/llChecking"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnSpan="2"
            android:layout_row="2"
            android:layout_column="0"
            android:orientation="vertical"
            android:gravity="center"
            android:background="@drawable/bg_round_grid5"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid5"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:text="@string/checking"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/llExit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_row="2"
            android:layout_column="2"
            android:background="@drawable/bg_round_grid6"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_exit"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/exit"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
    </GridLayout>

                                                       

        额。。。画风有一丝不对啊~(⊙o⊙)…某程序媛回想了一下，以前写了个计算器布局也是这么写的啊，难道是记错了？？？还是写了个假计算器？？？

        在搜罗了一些关于GridLayout的属性说明后，添加了grivity属性：android:layout_gravity="fill"，再次重试：

                                                      

      画风还是不对哎。。。后来又添加了weight属性，如果是跨N行，则添加android:layout_rowWeight="N"，如果是跨N列，择添加android:layout_columnWeight="N"，如果注意所有GridItem项都需要制定行与列的weight属性哦！

                                        

      OK，这回对了，下面是源码：

<GridLayout
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:columnCount="3"
        android:rowCount="3"
        android:orientation="horizontal"
        android:useDefaultMargins="true"
        >
        <LinearLayout
            android:id="@+id/llPutOn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_rowSpan="2"
            android:layout_rowWeight="2"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:orientation="vertical"
            android:gravity="center"
            android:background="@drawable/bg_round_grid1"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid1"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:text="@string/put_on"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/llPullOff"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_row="0"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_gravity="fill"
            android:orientation="vertical"
            android:gravity="center"
            android:background="@drawable/bg_round_grid2"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid2"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/pull_off"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/llTransfer"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:layout_row="0"
            android:layout_columnWeight="1"
            android:layout_rowWeight="1"
            android:layout_gravity="fill"
            android:orientation="vertical"
            android:gravity="center"
            android:background="@drawable/bg_round_grid3"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid3"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:text="@string/transfer"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/llSorting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="1"
            android:layout_columnSpan="2"
            android:layout_rowWeight="1"
            android:layout_columnWeight="2"
            android:layout_gravity="fill"
            android:orientation="vertical"
            android:gravity="center"

            android:background="@drawable/bg_round_grid4"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid4"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/sorting"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/llChecking"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_columnSpan="2"
            android:layout_row="2"
            android:layout_column="0"
            android:layout_rowWeight="1"
            android:layout_columnWeight="2"
            android:layout_gravity="fill"
            android:orientation="vertical"
            android:gravity="center"
            android:background="@drawable/bg_round_grid5"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_grid5"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:layout_gravity="center_horizontal"
                android:text="@string/checking"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/llExit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center"
            android:layout_row="2"
            android:layout_column="2"
            android:layout_rowWeight="1"
            android:layout_columnWeight="1"
            android:layout_gravity="fill"
            android:background="@drawable/bg_round_grid6"
            >
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_exit"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="@string/exit"
                android:textColor="@color/white"
                android:textSize="@dimen/text_size_small"/>
        </LinearLayout>
    </GridLayout>

 

总结：GridLayout使用需要制定行列比重(即weight=N)、对齐方式(layout_gravity=fill)，当然最好指定每个GridItem在布局中的行列位置。（欢迎大家给出评论建议~~~）