文章目录
(一)网格布局概述
1、布局特点
- GridLayout布局使用虚细线将布局划分为行、列和单元格,也支持一个控件在行、列上都有交错排列。
- 可以自己设置布局中组件的排列方式
- 可以自定义网格布局有多少行、多少列
- 可以直接设置组件位于某行某列
- 可以设置组件横跨几行或者几列
2、常用属性
(1)针对布局的属性
属性 | 含义 |
---|---|
rowCount | 行数 |
columnCount | 列数 |
layout_width | 布局宽度 |
layout_height | 布局高度 |
(2)针对子控件的属性
属性 | 含义 |
---|---|
layout_row | 子控件在布局的行数 |
layout_column | 子控件在布局的列数 |
layout_rowSpan | 跨行数 |
layout_columnSpan | 跨列数 |
二、案例演示(计算机)
1、创建安卓应用
- 基于Empty Activity模板创建安卓应用 - GridLayoutCalculator
2、准备背景图片
- 将一张背景图片拷贝到drawable目录里
3、字符串资源文件
- 修改string文件中标题名
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"/>
<stroke android:width="1dp"
android:color="#555555"/>
<padding android:bottom="10dp"
android:top="10dp"
android:left="10dp"
android:right="10dp"/>
//渐变颜色
<gradient
android:startColor="#aaaaaa"
android:endColor="#eeeeee"/>
</shape>
5、主布局资源文件
-
修改成线性布局并添加相关属性
-
添加显示运算结果的标签,并设置相关属性
-
添加一个网格布局,(根据计算器)设置为6行5列
-
添加第一行的五个按钮
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:columnCount="5"
android:rowCount="6"
>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="0"
android:layout_column="0"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="MR"
android:layout_row="0"
android:layout_column="1"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="MS"
android:layout_row="0"
android:layout_column="2"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="M+"
android:layout_row="0"
android:layout_column="3"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="M-"
android:layout_row="0"
android:layout_column="4"
android:textSize="15sp"/>
</GridLayout>
-
效果
-
补充写完剩下几行
<?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:gravity="center_horizontal"
tools:context=".MainActivity"
android:padding="15dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/custom_border"
android:text="0123456789"
android:textColor="#0000ff"
android:layout_marginTop="30dp"
android:textSize="20sp"
android:gravity="right"/>
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:columnCount="5"
android:rowCount="6"
>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="MC"
android:layout_row="0"
android:layout_column="0"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="MR"
android:layout_row="0"
android:layout_column="1"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="MS"
android:layout_row="0"
android:layout_column="2"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="M+"
android:layout_row="0"
android:layout_column="3"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="M-"
android:layout_row="0"
android:layout_column="4"
android:textSize="15sp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="←"
android:layout_row="1"
android:layout_column="0"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="CE"
android:layout_row="1"
android:layout_column="1"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="C"
android:layout_row="1"
android:layout_column="2"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="±"
android:layout_row="1"
android:layout_column="3"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="√"
android:layout_row="1"
android:layout_column="4"
android:textSize="15sp" />
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="7"
android:layout_row="2"
android:layout_column="0"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="8"
android:layout_row="2"
android:layout_column="1"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="9"
android:layout_row="2"
android:layout_column="2"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="/"
android:layout_row="2"
android:layout_column="3"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="%"
android:layout_row="2"
android:layout_column="4"
android:textSize="15sp" />
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="4"
android:layout_row="3"
android:layout_column="0"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="5"
android:layout_row="3"
android:layout_column="1"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="6"
android:layout_row="3"
android:layout_column="2"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="*"
android:layout_row="3"
android:layout_column="3"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="1/x"
android:layout_row="3"
android:layout_column="4"
android:textSize="15sp" />
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="1"
android:layout_row="4"
android:layout_column="0"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="2"
android:layout_row="4"
android:layout_column="1"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="3"
android:layout_row="4"
android:layout_column="2"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="-"
android:layout_row="4"
android:layout_column="3"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_height="98dp"
android:layout_width="68dp"
android:text="="
android:layout_rowSpan="2"
android:layout_row="4"
android:layout_column="4"
android:textSize="15sp"/>
<Button
android:layout_width="140dp"
android:layout_height="wrap_content"
android:text="0"
android:layout_row="5"
android:layout_column="0"
android:layout_columnSpan="2"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="."
android:layout_row="5"
android:layout_column="2"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
<Button
android:layout_width="68dp"
android:layout_height="wrap_content"
android:text="+"
android:layout_row="5"
android:layout_column="3"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
</GridLayout>
</LinearLayout>
- 第5行的等号和第6行的0需要跨行夸列
- 跨行,需要调节高度跨两行
<Button
android:layout_height="98dp"
android:layout_width="68dp"
android:text="="
//跨行
android:layout_rowSpan="2"
android:layout_row="4"
android:layout_column="4"
android:textSize="15sp"/>
- 跨列
<Button
android:layout_width="140dp"
android:layout_height="wrap_content"
android:text="0"
android:layout_row="5"
android:layout_column="0"
//跨列
android:layout_columnSpan="2"
android:textSize="15sp"
android:layout_marginRight="5dp"/>
- 因为0进行了跨列,因此后面的数需要让位(列数加1)