浅谈GridLayout(网格布局)

Android 4.0 布局-->GridLayout 网格布局

以行列单元格的形式展示内部控件排列,可以实现类似计算机键盘效果 ,也可以实现可自动变行的标签群效果

使用GridLayout ,有效减少了布局的深度,渲染速度也是很快的

类似于LinearLayout 的使用,额外添加了一些特有的属性

先来看下GridLayout的一些属性介绍

1、

android:orientation="horizontal|vertical"

内部控件是水平排列的还是竖直排列的

   与LinearLayout使用方法一致

2、

android:columnCount="4"
android:rowCount="4"

内部控件 一行或者一列的显示条目个数,即一行/列 最多显示几条,这里是4条,当内部子控件数目多于时,自动换行/列显示 ,使用此功能方便了实现了自动换行标签群的功能

3、子控件属性

android:layout_row = “3”

Android:layout_column = “3” 

   用于设置该控件的位置  注意从0开始 ,类似于数组,这里即该控件位置 第四行第四  列 

4、子控件属性

   android:layout_rowSpan = “2”|  android:layout_columnSpan = “2”

   android:layout_gravity="fill"

 设置某控件跨越多行或多列,前一个设置表明该控件跨越的行数或列数,后一个设置表明该控件填满所跨越的整行或 整列。

---------------------------------------------------------------------------------------------------------------- 

 示例(别人的代码 ,直接拿来用了):

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical" android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5     <GridLayout
 6         android:layout_width="wrap_content"
 7         android:layout_height="wrap_content"
 8         android:layout_gravity="center"
 9         android:columnCount="4"
10         android:rowCount="4"
11         android:orientation="horizontal" >
12 
13         <Button
14             android:layout_column="3"
15             android:text="/" />
16 
17         <Button android:text="1" />
18 
19         <Button android:text="2" />
20 
21         <Button android:text="3" />
22 
23         <Button android:text="*" />
24 
25         <Button android:text="4" />
26 
27         <Button android:text="5" />
28 
29         <Button android:text="6" />
30 
31         <Button android:text="-" />
32 
33         <Button android:text="7" />
34 
35         <Button android:text="8" />
36 
37         <Button android:text="9" />
38 
39         <Button
40             android:layout_gravity="fill"
41             android:layout_rowSpan="3"
42             android:text="+" />
43 
44         <Button
45             android:layout_columnSpan="2"
46             android:layout_gravity="fill"
47             android:text="0" />
48 
49         <Button android:text="00" />
50 
51         <Button
52             android:layout_columnSpan="3"
53             android:layout_gravity="fill"
54             android:text="=" />
55 
56     </GridLayout>
57 </LinearLayout>

效果图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

文本类样式 — 背景、文本、字体

上周我们通过之前讲解的知识点完成了对一个页面的布局操作,实现了页面的一级、二级布局,完成了页面主体框架的搭建。但是细心的你应该会发现,我们做出来的网页与网页PS...

6828
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——图片作边框

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

2606
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

2010
来自专栏Coco的专栏

【Web动画】SVG 线条动画入门

2002
来自专栏TechBox

一篇文章详解iOS之AutoResizing、AutoLayout、sizeClass来龙去脉前言三大适配技术

2896
来自专栏小狼的世界

不同浏览器对于换行的处理

在一个容器中,如果设定了宽度,一般来说自动换行都是比较正常的,但是如果遇到了连续的英文字符,这个问题就会让人头疼。这不,我们部门的用户在测试的时候输入连续的字符...

1112
来自专栏Nian糕的私人厨房

CSS Flex弹性盒布局

我在上一篇博文CSS 布局_2 Flex弹性盒里,对 Flex 弹性盒有着详细的介绍,这里就不再复述了,书写页面前,我们先来介绍一个之前没提到的知识点——伪类选...

1305
来自专栏IMWeb前端团队

重构不完全教程集之一

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 “无上甚深微妙法,百千万劫难遭遇,我今见闻得受持,愿解如来真实义。” ——《...

2195
来自专栏cnblogs

CSS3新特性应用之用户体验

一、光标 新增加not-allowed光标,不允许访问 隐藏光标,在触模应用上很有用,css2.1需要一个透明的图片来实现,而css3直接用cursor:non...

2118
来自专栏web前端

HTML+CSS基础

第一章 一、样式      1、行间样式,代码不可维护,不推荐      2、内联样式,不可重用,不推荐      3、外联样式,可重用,可维护,推荐     ...

6699

扫码关注云+社区

领取腾讯云代金券