3.3 网格布局

Android Studio 笔记3.4 网格布局 Android Studio 笔记3.4 网格布局网格布局管理器(区别在于更加灵活,内容可跨列或者跨行显示,超出页面的大小会自动换行) 阅读详情

一、简介

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

二、概述

在这里插入图片描述

(一)网格布局概述

1、布局特点

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

2、继承关系图

  • GridLayout类是ViewGroup子类
    在这里插入图片描述

3、常用属性

(1)针对布局的属性
属性含义
rowCount行数
columnCount列数
layout_width布局宽度
layout_height布局高度
(2)针对子控件的属性
属性含义
layout_row子控件在布局的行数
layout_column子控件在布局的列数
layout_rowSpan跨行数
layout_columnSpan跨列数

(二)案例演示:计算器界面

1、创建安卓应用

  • 基于Empty Activity模板创建安卓应用 - GridLayoutCalculator
    在这里插入图片描述

  • 单击【Finish】按钮
    在这里插入图片描述

2、准备背景图片

  • 将一张背景图片拷贝到drawable目录里
    在这里插入图片描述

3、字符串资源文件

  • 字符串资源文件 - strings.xml
    在这里插入图片描述
<resources>
    <string name="app_name">网格布局:计算器界面</string>
</resources>

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:left="10dp"
        android:right="10dp"
        android:top="10dp" />

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

5、主布局资源文件

  • 主布局资源文件 - activity_main.xml
    在这里插入图片描述

  • 将默认的约束布局修改为垂直的线性布局,设置相关属性
    在这里插入图片描述

  • 添加显示运算结果的标签,并设置相关属性
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

  • 添加一个网格布局,设置为6行5列
    在这里插入图片描述

  • 添加第一行的五个按钮
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

  • 添加第二行五个按钮
    在这里插入图片描述

  • 查看预览结果
    在这里插入图片描述

  • 添加第三行五个按钮
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

  • 在第四行添加五个按钮
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

  • 在第五行添加五个按钮,但是第五个按钮跨两行,高度要重新设置
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

  • 第六行添加三个按钮,第一个按钮跨两列,宽度要重新设置
    在这里插入图片描述

  • 查看预览效果
    在这里插入图片描述

6、启动应用,查看效果

  • 【0】按钮跨两列,【=】按钮跨两行
    在这里插入图片描述

  • 完成!

安卓讲课笔记3.4 网格布局 1. 了解网格布局特点; 2. 熟悉网格布局常用属性; 3. 掌握线性布局嵌套网格布局 阅读详情

相关推荐

通过CSS3进行网站架构网格布局的代码实例教程

CSS3模块家族中,CSS3网格布局模块是最有趣的一个。W3C官网自发布草案到今天不到一年时间。有一点必须注意,早在2007年宣布的WD版本中,有些名称和语法有一些变化,但是他们具有相同的本质。今天模块正在前速向前,在IE10中已经初步实现,希望新的特性在将来能得到支持以及其他流行浏览器也将支持这个模块。为什么我们需要网格布局?CSS3网格布局模块的一个任务是帮助我们处理非常简单和清晰的任何web-imposer(不仅),很有可能是一个内容块在一个虚拟的网络位置。

axingxiansen的博客 519

Android中使用GridLayout网格布局来制作简单的计算器App

关于GridLayout 在android4.0版本之前,如果想要达到网格布局的效果,首先可以考虑使用最常见的LinearLayout布局,但是这样的排布会产生如下几点问题: 1、不能同时在X,Y轴方向上进行控件的对齐。 2、当多层布局嵌套时会有性能问题。 3、不能稳定地支持一些支持自由编辑布局的工具。 其次考虑使用表格布局TabelLayout,这种方式会把包含的元素以行和列的形式进行排列,每行为一个TableRow对象,也可以是一个View对象,而在TableRow中还可以继续添加其他的控件,每添加一个子控件就成为一列。但是使用这种布局可能会出现不能将控件占据多个行或列的问题,而且渲染速度

利用网格布局写的一个java计算器

用java写的一个简单的计算器,包含源码、素材、说明

Android系统回顾(三):UI之GridLayout布局

一、GridLayout(网格布局)是所有布局管理器中最为灵活的一种。网格布局使用随意的网格来放置视图。网格布局通过行列的延伸、Space View和Gravity属性可以创建出复杂的UI,而相对布局却需要通过复杂的嵌套来构建UI。 二、通过网格布局和线性布局可以实现相对布局可实现的所有功能,而出于性能考虑,在创建相同UI的时候,应该优先使用网格布局,而不是嵌套布局。 三、需要构建横竖两个方向

YongYu_IT的专栏 2439

【PyQt4】学习2 之-BoxLayout布局、网格GridLayout布局,实现计算器界面设计

如题,采用计算器的案例,帮助我们对视图的排列产生直观的印象

钱多多先森 3125

小白用网格布局实现简单的计算器 ——Android

目的:采用网格布局,实现计算器的简单功能 开发工具:Android Studio3.3.2 开发环境: 实现过程: 第一步,创建一个Android项目,在这我把项目命名为MyApplication。 第二步,打开MyApplication/app/src/main/res/layout/activity_main.xml,使用text模式编写代码。 使用网格布局...

YanMeiHe的博客 4888

CSS3 网格布局

CSS 网格布局是一种基于网格的布局系统,允许开发者将页面划分为行和列,形成一个网格结构。CSS3 网格布局(Grid Layout)是一种强大的二维布局系统,用于创建复杂的网页布局。与 Flexbox(一维布局,适合单行或单列)不同,网格布局是二维的,适合同时处理行和列的布局需求。以下是一个简单的网格布局示例,展示一个包含头部、侧边栏、主要内容和底部的页面结构。的元素是网格容器,其直接子元素会成为网格项(Grid Items)。以下是网格布局常用的 CSS 属性,分为容器属性和网格项属性。

m0_57545130的博客 1141

css3网格布局

定义列和行grid-template-columns属性用于定义网格的列轨道。可以使用多种单位和方式来定义列的宽度。还可以使用fr(fractional unit)单位来创建弹性列。grid-template-rows属性用于定义网格的行轨道。和grid-template-columns类似。网格间距(Gap)grid-column-gap和grid-row-gap属性(已废弃,建议使用gap属性)

bdh123b的博客 1449

CSS3网格布局

CSS 提供了一个基于网格的布局系统,带有行和列,可以让我们更轻松地设计网页,而无需使用浮动和定位。网格是一组相交的水平线和垂直线,它定义了网格的列和行。

CJandWJY的博客 173

CSS3 grid网格布局

Grid 布局即网格布局,是一种新的 CSS 布局模型,比较擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案,是目前唯一一种 CSS 二维布局。

xiangxiongfly 1588

Java网格布局-4*4计算器

计算器程序使用了网格布局来排列计算器按钮。当缩放窗口时,计算器按钮将随之变大或者变小,但所有的按钮尺寸始终保持一致。

CSS3学习之网格布局grid

Grid 布局适合整体页面框架、卡片网格、仪表盘等复杂布局场景,与 Flexbox 配合使用可覆盖绝大多数布局需求。效果:顶部通栏Header,左侧固定宽度Sidebar,右侧自适应Main。解释:自动填充尽可能多的列,每列最小200px,空间不足时换行。表示三列,第一列固定宽度,后两列按比例分配剩余空间。当网格总尺寸小于容器时,控制整个网格的对齐方式(如。将元素定义为网格容器,子元素自动成为网格项。定义网格的列和行大小。(行起始/列起始/行结束/列结束)。例如,创建 3 列,每列宽度为。

qq_69510169的博客 1229

html 蜂巢布局,css3类似蜂巢网格布局样式代码

特效描述:css3 类似蜂巢 网格布局样式。css3类似蜂巢网格布局样式代码代码结构1. 引入CSS2. HTML代码This is a titleSome sample text about the article this hexagon leads toThis is a titleSome sample text about the article this hexagon leads t...

weixin_39522103的博客 709

CSS3网格布局、过渡及2D效果

wp:heading。

qq_74990050的博客 1036

火列星屯--最强大的CSS布局方案

一、总论 首先给出结论:网格布局(Grid)是最强大的 CSS 布局方案。 虽说如此,但是仍要重视具体的应用场景,如果有其他写法可以提高代码的简洁和可读性,未必非要选择Gird不可。 网格布局就如同它的字面意思,利用它可以比较灵活的将网页分割成若干网格,并且可以把这些网格进行多种组合,搭配出各式各样的布局。 目前浏览器已经内置了网格布局,借助网格布局可以摒弃复杂繁多的CSS代码或框架而实现...

qq_34865249的博客 948
上一篇: 3.2 帧式布局
下一篇: 4.1 安卓按键事件
GE_GUANYI
博客等级 码龄5年 5粉丝 18原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值