【安卓开发】UI设计基础4：用网格布局 GridLayout 实现计算器UI

网格布局

1、构建网格

android:rowCount="4"  //指定纵向行数 android:columnCount="4"//指定横向列数

2、网格布局也有orientation属性，可以让控件按水平（默认）或者垂直排列。

3、设置孩子控件的位置

android:layout_row=""
android:layout_column=""

以第一个button为例，第一个button在第一行第零列，因此设置

android:layout_row="1"
android:layout_column="0"

4、若一个控件要占据多个单元格

①设置控件的 android:layout_rowSpan 或者layout_columnSpan 属性。
②再设置其layout_gravity属性为fill， 表示用控件填满这两个单元格

android:layout_rowSpan或
android:layout_columnSpan 
layout_gravity="fill"

eg：
设置TextView占第一行的四列

android:layout_gravity="fill"//填满
android:layout_columnSpan="4"//占据四列

5、注意
通常为 GridLayout 中的控件设置 layout_height 和 layout_width 是不必要的， 甚至可能导致混乱。

效果

代码实现

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"


    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:rowCount="6"
    android:columnCount="4"
    >

<TextView

    android:layout_gravity="fill"
    android:layout_columnSpan="4"

    android:text="计算结果"
    android:textSize="50dp"
    android:layout_marginTop="30dp"
    android:layout_marginBottom="70dp"
    android:gravity="right|bottom"
    />

    <Button
        android:layout_row="1"
        android:layout_column="0"
        android:text="AC"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="1"
        android:layout_column="1"
        android:text="DEL"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="1"
        android:layout_column="2"
        android:text="-/+"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="1"
        android:layout_column="3"
        android:text="/"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="2"
        android:layout_column="0"
        android:text="7"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="2"
        android:layout_column="1"
        android:text="8"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="2"
        android:layout_column="2"
        android:text="9"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="2"
        android:layout_column="3"
        android:text="*"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="3"
        android:layout_column="0"
        android:text="4"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="3"
        android:layout_column="1"
        android:text="5"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="3"
        android:layout_column="2"
        android:text="6"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="3"
        android:layout_column="3"
        android:text="-"
        android:textSize="30dp"
        />

    <Button
        android:layout_column="0"
        android:layout_row="4"
        android:text="1"
        android:textSize="30dp" />

    <Button
        android:layout_column="1"
        android:layout_row="4"
        android:text="2"
        android:textSize="30dp" />

    <Button
        android:layout_column="2"
        android:layout_row="4"
        android:text="3"
        android:textSize="30dp" />

    <Button
        android:layout_row="4"
        android:layout_column="3"
        android:text="+"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="5"
        android:layout_column="0"
        android:text="="
        android:textSize="30dp"
        />

    <Button
        android:layout_row="5"
        android:layout_column="1"
        android:text="0"
        android:textSize="30dp"
        />

    <Button
        android:layout_row="5"
        android:layout_column="2"
        android:text="."
        android:textSize="30dp"
        />

    <Button
        android:layout_row="5"
        android:layout_column="3"
        android:text="%"
        android:textSize="30dp"
        />
    GridLayout>