安卓学习笔记11：网格布局

零、学习目标

1. 能说出网格布局常用的属性
2. 能利用网格布局实现简单的界面设计

一、网格布局

1、布局特点

GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。

2、继承关系图

3、常用属性

（1）针对布局的属性

• rowCount：行数
• columnCount：列数

（2）针对子控件的属性

• layout_row：子控件在布局的行数
• layout_column：子控件在布局的列数
• layout_rowSpan：跨行数
• layout_columnSpan：跨列数

二、教学案例 —— 计算器界面

（一）运行效果

（二）涉及知识点

1、网格布局（GridLayout）
2、线性布局（LinearLayout）
3、文本视图（TextView）
4、按钮（Button）

（三）实现步骤

1、创建安卓应用【GridLayoutCalculator】

2、将一张背景图片拷贝到drawable目录里

3、主布局资源文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    android:orientation="vertical"
    android:padding="15dp"
    android:gravity="center_horizontal"
    tools:context="net.hw.calculator.MainActivity">

    <GridLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:columnCount="5"
        android:rowCount="7">

        <TextView
            android:layout_width="320dp"
            android:layout_height="50dp"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_columnSpan="5"
            android:gravity="right"
            android:background="@drawable/custom_border"
            android:paddingRight="10dp"
            android:text="0123456789"
            android:textColor="#0000ff"
            android:textSize="25sp"
            android:layout_marginBottom="30dp"/>

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="0"
            android:text="MC" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="1"
            android:text="MR" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="2"
            android:text="MS" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="3"
            android:text="M+" />

        <Button
            android:layout_width="65dp"
            android:layout_row="1"
            android:layout_column="4"
            android:text="M-" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="0"
            android:text="←" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="1"
            android:text="CE" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="2"
            android:text="C" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="3"
            android:text="±" />

        <Button
            android:layout_width="65dp"
            android:layout_row="2"
            android:layout_column="4"
            android:text="√" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="0"
            android:text="7" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="1"
            android:text="8" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="2"
            android:text="9" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="3"
            android:text="/" />

        <Button
            android:layout_width="65dp"
            android:layout_row="3"
            android:layout_column="4"
            android:text="%" />


        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="0"
            android:text="4" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="1"
            android:text="5" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="2"
            android:text="6" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="3"
            android:text="*" />

        <Button
            android:layout_width="65dp"
            android:layout_row="4"
            android:layout_column="4"
            android:text="1/x" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="0"
            android:text="1" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="1"
            android:text="2" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="2"
            android:text="3" />

        <Button
            android:layout_width="65dp"
            android:layout_row="5"
            android:layout_column="3"
            android:text="-" />

        <Button
            android:layout_width="65dp"
            android:layout_height="95dp"
            android:layout_row="5"
            android:layout_rowSpan="2"
            android:layout_column="4"
            android:text="=" />

        <Button
            android:layout_width="130dp"
            android:layout_row="6"
            android:layout_column="0"
            android:layout_columnSpan="2"
            android:text="0" />

        <Button
            android:layout_width="65dp"
            android:layout_row="6"
            android:layout_column="2"
            android:text="." />

        <Button
            android:layout_width="65dp"
            android:layout_row="6"
            android:layout_column="3"
            android:text="+" />
    </GridLayout>
</LinearLayout>

4、在drawable目录里添加custom_border.xml

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

    <corners android:radius="5dp" />
    <solid android:color="#eeeeee" />
    <stroke
        android:width="1dp"
        android:color="#555555" />

    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />

    <gradient
        android:endColor="#eeeeee"
        android:startColor="#aaaaaa" />
</shape>

5、启动应用，查看效果

三、课后作业

1、网格布局练习1

2、网格布局练习2

• 图片配文字