安卓笔记11.常用布局—网格布局

清疚 2024-04-01 18:06 89阅读 0赞

## 零、学习目标 ##

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

## 一、[网格][Link 1]布局概述 ##

### 1、布局特点 ###

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

### 2、常用属性 ###

#### （1）针对布局的属性 ####

*  rowCount：行数
 *  columnCount：列数

#### （2）针对子控件的属性 ####

*  layout\_row：子控件在布局的行数
 *  layout\_column：子控件在布局的列数
 *  layout\_rowSpan：跨行数
 *  layout\_columnSpan：跨列数

### （三）实现步骤 ###

#### 1、创建安卓应用【GridLayoutCalculator】 ####

![b1155977220141dc8bedae16b200370d.png][]

![71bb368242b9423fba3f964f82a95e8d.png][]

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

![be486b02886e4b159d5bcffa3d9d0dd7.png][]

### 3、主布局资源文件activity\_main.[xml][] ###

![f0bf79cb53de47d2b624bc07463f2929.png][]

<?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 ###

![5a0b3822839a41d08d6c23ec8befbbd5.png][]

<?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、启动应用，查看效果 ###

![77ac54daed594b9297bc689498b6299c.png][]

[Link 1]: https://so.csdn.net/so/search?q=%E7%BD%91%E6%A0%BC&spm=1001.2101.3001.7020
[b1155977220141dc8bedae16b200370d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/14f505d8bdcc45ebac69cff5446d4482.png
[71bb368242b9423fba3f964f82a95e8d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c4b75719d92e4b6eb57ee6898409ee4d.png
[be486b02886e4b159d5bcffa3d9d0dd7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b3e2356914d842a08bcfb254da4b38d5.png
[xml]: https://so.csdn.net/so/search?q=xml&spm=1001.2101.3001.7020
[f0bf79cb53de47d2b624bc07463f2929.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/775db985c27f4eec91b03f7211572f8d.png
[5a0b3822839a41d08d6c23ec8befbbd5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/69aa798d26c64e7d9a381d9f53440f54.png
[77ac54daed594b9297bc689498b6299c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/38dd60311b654c6896d57df743215411.png