安卓开发 3.4 网格布局

已于 2022-11-01 20:27:27 修改
阅读量610 收藏
点赞数 4
分类专栏： 安卓编程基础 文章标签： android android studio 前端
于 2022-11-01 20:11:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65489276/article/details/127640005
版权

目录

一、导读

  • 有些应用要求控件很整齐地排成若干行和若干列，当然利用线性布局嵌套是可以实现的，但是太繁琐了，我们可以采用网格布局来实现，就比较简单。

二、网格布局概述

1、布局特点

  1. GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。
  2. 可以自己设置布局中组件的排列方式
  3. 可以自定义网格布局有多少行、多少列
  4. 可以直接设置组件位于某行某列
  5. 可以设置组件横跨几行或者几列

2、继承关系图

  • GridLayout类是ViewGroup子类

3、常用属性

（1）针对布局的属性

属性含义
rowCount行数
columnCount列数
layout_width布局宽度
layout_height布局高度

（2）针对子控件的属性

属性含义
layout_row子控件在布局的行数
layout_column子控件在布局的列数
layout_rowSpan跨行数
layout_columnSpan跨列数

三、案例演示：计算器界面

在这里插入图片描述

1、创建安卓应用

  • 基于Empty Activity模板创建安卓应用 - GridLayoutCalculator

在这里插入图片描述

2、字符串资源文件

  • 字符串资源文件 - strings.xml
    在这里插入图片描述

3、自定义边框配置文件

  • 在drawable目录里添加custom_border.xml
    在这里插入图片描述
  • 在Root element更改为shape
    在这里插入图片描述
    点击ok，里面代码如下：
    在这里插入图片描述

4、主布局资源文件

  • 主布局资源文件 - activity_main.xml
    将默认的约束布局修改为垂直的线性布局，设置相关属性
    在这里插入图片描述
  • 添加显示运算结果的标签，并设置相关属性
    在这里插入图片描述
  • 添加一个网格布局，设置为6行5列
    在这里插入图片描述
  • 添加第一行的五个按钮
    在这里插入图片描述
  • 效果如下
    在这里插入图片描述
  • 剩下也是依次操作，代码如下：
<?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:orientation="vertical"
    android:gravity="center_horizontal"
    android:padding="15dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_border"
        android:text="0123456789"
        android:gravity="right"
        android:textColor="#0000ff"
        android:layout_marginTop="30dp"
        android:textSize="20sp"/>

    <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:layout_marginRight="5dp"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="MR"
            android:layout_marginRight="5dp"
            android:layout_row="0"
            android:layout_column="1"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="MS"
            android:layout_marginRight="5dp"
            android:layout_row="0"
            android:layout_column="2"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="M+"
            android:layout_marginRight="5dp"
            android:layout_row="0"
            android:layout_column="3"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="M-"
            android:layout_marginRight="5dp"
            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:layout_marginRight="5dp"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="CE"
            android:layout_marginRight="5dp"
            android:layout_row="1"
            android:layout_column="1"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="C"
            android:layout_marginRight="5dp"
            android:layout_row="1"
            android:layout_column="2"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="+_"
            android:layout_marginRight="5dp"
            android:layout_row="1"
            android:layout_column="3"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="根号"
            android:layout_marginRight="5dp"
            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:layout_marginRight="5dp"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="8"
            android:layout_marginRight="5dp"
            android:layout_row="2"
            android:layout_column="1"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="9"
            android:layout_marginRight="5dp"
            android:layout_row="2"
            android:layout_column="2"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="/"
            android:layout_marginRight="5dp"
            android:layout_row="2"
            android:layout_column="3"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="%"
            android:layout_marginRight="5dp"
            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:layout_marginRight="5dp"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="5"
            android:layout_marginRight="5dp"
            android:layout_row="3"
            android:layout_column="1"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="6"
            android:layout_marginRight="5dp"
            android:layout_row="3"
            android:layout_column="2"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="*"
            android:layout_marginRight="5dp"
            android:layout_row="3"
            android:layout_column="3"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="1/X"
            android:layout_marginRight="5dp"
            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:layout_marginRight="5dp"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="2"
            android:layout_marginRight="5dp"
            android:layout_row="4"
            android:layout_column="1"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="3"
            android:layout_marginRight="5dp"
            android:layout_row="4"
            android:layout_column="2"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="-"
            android:layout_marginRight="5dp"
            android:layout_row="4"
            android:layout_column="3"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="100dp"
            android:text="="
            android:layout_marginRight="5dp"
            android:layout_row="4"
            android:layout_column="4"
            android:layout_rowSpan="2"
            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:layout_marginRight="5dp"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="."
            android:layout_marginRight="5dp"
            android:layout_row="5"
            android:layout_column="2"
            android:textSize="15sp"/>

        <Button
            android:layout_width="68dp"
            android:layout_height="wrap_content"
            android:text="+"
            android:layout_marginRight="5dp"
            android:layout_row="5"
            android:layout_column="3"
            android:textSize="15sp"/>

    </GridLayout>

</LinearLayout>
  • 但在第五行添加五个按钮，但是第五个按钮跨两行，高度要重新设置
    在这里插入图片描述
  • 但第六行添加三个按钮，第一个按钮跨两列，宽度要重新设置
    在这里插入图片描述

5、启动应用，查看效果

在这里插入图片描述

又苦又累的小帅
关注
专栏目录
安卓讲课笔记3.4 网格布局
howard2005的专栏
10-24 1762
1. 了解网格布局特点； 2. 熟悉网格布局常用属性； 3. 掌握线性布局嵌套网格布局
（七）Android布局类型（网格布局GridLayout）
以秘
03-17 2064
Android布局类型（网格布局GridLayout）
安卓开发Android五子棋游戏代码
06-09
安卓开发Android五子棋游戏代码
android GridLayout 布局详解，并举例
最新发布
xie__jin__cheng的博客
08-08 293
android GridLayout 布局详解，并举例
Android之GridLayout用法
weixin_34205076的博客
11-19 133
本文重点讲述了自android4.0版本后新增的GridLayout网格布局的一些基本内容，并在此基础上实现了一个简单的计算器布局框架。通过本文，您可以了解到一些android UI开发的新特性，并能够实现相关应用。 在android4.0版本之前，如果想要达到网格布局的效果，首先可以考虑使用最常见的LinearLayout布局，但是这样的排布会产生如下几点问题：1、...
Android GridLayout简介，以计算器为例
Zhang Phil
05-28 4369
 《Android GridLayout简介，以计算器为例》 Android GridLayout默认从左往右水平布局元素。可以通过设置属性：android:orientation=，控制子元素布局的方向为水平还是垂直。 GridLayout的属性 android:layout_row 和 android:layout_column 设定常数值则指定GridLayout显示的行列数。
android开发揭秘PDF
02-27
第1章 Android开发简介 1.1 Android基本概念 1.1.1 Android简介 1.1.2 Android的系统构架 1.1.3 Android应用程序框架 1.2 OMS介绍 1.2.1 OPhone介绍 1.2.2 Widget介绍 1.3 小结 第2章 Android开发环境搭建 2.1 ...
新版Android开发教程.rar
12-14
Android Android Android Android 开发背景 � 计算技术、无线接入技术的发展，使嵌入式系统逐渐有能力对桌面系统常规业务进行支持。 � 谷歌长期以来奉行的移动发展战略：通过与全球各地的手机制造商和移动运营商...
Android应用开发入门教程(经典版)
07-22
第2章 Android SDK的开发环境..................................................................................................................................10 2.1 Android SDK的结构......................
利用Flexbox实现响应式网格布局
而网格布局作为页面布局的一种重要方式，也需要能够适应不同屏幕尺寸和设备。 Flexbox是CSS3新增加的一种布局方式，它为我们提供了灵活的网格布局能力，使得网页设计更具弹性和适应性。本文将通过介绍Flexbox布局的...
Android布局之GridLayout网格布局
09-02
网格布局标签是GridLayout。这个布局是android4.0新增的布局。这个布局只有4.0之后的版本才能使用。本文给大家介绍Android布局之GridLayout网格布局相关知识，感兴趣的朋友一起学习吧
Layout_table android网格布局
03-07
android布局中的网格布局， 适合新手学习
Android零基础入门第32节：新推出的GridLayout网格布局
weixin_34112900的博客
08-12 118
2019独角兽企业重金招聘Python工程师标准>>> ...
Android Grid Layout
liken的专栏
05-05 1260
GridLayout
Android布局【GridLayout】
qq_63215420的博客
08-14 563
GridLayout也名网格布局,该布局与类似，但与其相比，GridLayout会更加的灵活，比如不能将两行进行一个合并，只能将两列进行一个合并；而GridLayout既能合并行也能合并列，而且布局也会更加的灵活。
Android中的网格布局
木子皿--啥都不会的菜鸟
06-19 3042
文章目录1 Android中的网格布局 1 Android中的网格布局 重要属性： android:rowCount（行数量） android:columnCount （列数量） android:layout_row （位于第几行） android:layout_rowSpan（跨几行） 要实现的效果如下： 对应的xml文件如下： <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://sche
app简单控件了解——常用布局——网格布局GridLayout
小白龙白龙马的博客
06-28 275
<!-- 根布局为两行两列的网格布局，其中列数由columnCount指定，行数由rowCount指定 --> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout...
Android Studio 3.4配置Android JNI开发教程
"本教程详细讲解了在Android Studio 3.4环境下配置Android JNI开发的基础步骤，包括SDK Manager中下载CMake和LLDB，设置NDK，创建新项目，编写及生成JNI头文件，实现C++代码，配置CMakeLists.txt文件，以及在Java...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值