Android开发UI之GridLayout的使用

1.GridLayout

官网截图

GridLayout包含的属性如下

android:alignmentMode
属性说明:当设置alignMargins,使视图的外边界之间进行校准。可以取以下值:
alignBounds -- 对齐子视图边界。
alignMargins -- 对齐子视图边距。

android:columnCount
属性说明:GridLayout的最大列数

android:rowCount
属性说明:GridLayout的最大行数

android:columnOrderPreserved
属性说明: 当设置为true,使列边界显示的顺序和列索引的顺序相同。默认是true。

android:orientation
属性说明:GridLayout中子元素的布局方向。有以下取值:
horizontal -- 水平布局。
vertical -- 竖直布局。

android:rowOrderPreserved
属性说明: 当设置为true,使行边界显示的顺序和行索引的顺序相同。默认是true。

android:useDefaultMargins
属性说明: 当设置ture,当没有指定视图的布局参数时,告诉GridLayout使用默认的边距。默认值是false。

这些是GridLayout布局本身的属性。

2 GridLayout子元素属性

上面描述的 GridLayout 的属性,是 GridLayout 布局本身的属性;下面 GridLayout 布局中的元素所支持的属性。GridLayout 布局中的元素的属性,定义在 GridLayout.LayoutParams 中。取值如下:

2.1 android:layout_column

属性说明: 显示该空间的列。例如,android:layout_column="0",表示在第1列显示该控件;android:layout_column="1",表示在第2列显示该控件。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="wrap_content"
 4     android:layout_height="wrap_content"
 5     android:orientation="horizontal"
 6     android:rowCount="2"
 7     android:columnCount="3" >
 8   <Button
 9         android:id="@+id/one"
10         android:layout_column="1"
11         android:text="1"/>
12   <Button
13         android:id="@+id/two"
14         android:layout_column="0"
15         android:text="2"/>
16    <Button
17         android:id="@+id/three"
18         android:text="3"/>
19   <Button
20         android:id="@+id/devide"
21         android:text="/"/>

对应的显示效果图

layout文件说明
android:orientation="horizontal" -- GridLayout中控件的布局方向是水平布局。
android:rowCount="2"               -- GridLayout最大的行数为2行。
android:columnCount="3"          -- GridLayout最大的列数为3列。
android:layout_column="1"        -- 定义控件one的位于第2列。
android:layout_column="0"        -- 定义该控two件的位于第1列。

2.2 android:layout_columnSpan

属性说明: 该控件所占的列数。例如,android:layout_columnSpan="2",表示该控件占2列。

layout文件示例

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="wrap_content"
 4     android:layout_height="wrap_content"
 5     android:orientation="horizontal"
 6     android:rowCount="2"
 7     android:columnCount="3" >
 8   <Button
 9         android:id="@+id/one"
10         android:layout_column="0"
11         android:layout_columnSpan="2"
12         android:text="1"/>
13   <Button
14         android:id="@+id/two"
15         android:text="2"/>
16    <Button
17         android:id="@+id/three"
18         android:text="3"/>
19   <Button
20         android:id="@+id/devide"
21         android:text="/"/>
22
23 </GridLayout>

对应的显示效果图

layout文件说明

数字"1"实际上占据的空间大小是2列,但是第2列显示为空白。若要第2列不显示空白,需要设置 android:layout_gravity属性,参考下例。

2.3 android:layout_row

属性说明: 该控件所在行。例如,android:layout_row="0",表示在第1行显示该控件;android:layout_row="1",表示在第2行显示该控件。它和 android:layout_column类似。

2.4 android:layout_rowSpan

属性说明: 该控件所占的行数。例如,android:layout_rowSpan="2",表示该控件占2行。它和 android:layout_columnSpan类似。

2.5 android:layout_gravity

属性说明

该控件的布局方式。可以取以下值:
  top                      -- 控件置于容器顶部,不改变控件的大小。
  bottom                -- 控件置于容器底部,不改变控件的大小。
  left                     -- 控件置于容器左边,不改变控件的大小。
  right                   -- 控件置于容器右边,不改变控件的大小。
  center_vertical     -- 控件置于容器竖直方向中间,不改变控件的大小。
  fill_vertical          -- 如果需要,则往竖直方向延伸该控件。
  center_horizontal -- 控件置于容器水平方向中间,不改变控件的大小。
  fill_horizontal      -- 如果需要,则往水平方向延伸该控件。
  center                -- 控件置于容器中间,不改变控件的大小。
  fill                     -- 如果需要,则往水平、竖直方向延伸该控件。
  clip_vertical        -- 垂直剪切,剪切的方向基于该控件的top/bottom布局属性。若该控件的gravity是竖直的:若它的gravity是top的话,则剪切该控件的底部;若该控件的gravity是bottom的,则剪切该控件的顶部。
  clip_horizontal     -- 水平剪切,剪切的方向基于该控件的left/right布局属性。若该控件的gravity是水平的:若它的gravity是left的话,则剪切该控件的右边;若该控件的gravity是  right的,则剪切该控件的左边。
  start                  -- 控件置于容器的起始处,不改变控件的大小。
  end                   -- 控件置于容器的结束处,不改变控件的大小。

对应函数: setGravity(int)

layout文件示例:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="wrap_content"
 4     android:layout_height="wrap_content"
 5     android:orientation="horizontal"
 6     android:rowCount="2"
 7     android:columnCount="3" >
 8   <Button
 9         android:id="@+id/one"
10         android:layout_column="0"
11         android:layout_columnSpan="2"
12         android:layout_gravity="fill"
13         android:text="1"/>
14   <Button
15         android:id="@+id/two"
16         android:text="2"/>
17    <Button
18         android:id="@+id/three"
19         android:text="3"/>
20   <Button
21         android:id="@+id/devide"
22         android:text="/"/>
23
24 </GridLayout>

对应的显示效果图

3 应用示例

定义一个简单的计算器界面,包含“0-9、.、+、-、*、/、=、”。用GridLayout实现。

layout文件

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <!-- GridLayout: 5行 4列 水平布局 -->
 3 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
 4     android:layout_width="wrap_content"
 5     android:layout_height="wrap_content"
 6     android:orientation="horizontal"
 7     android:rowCount="5"
 8     android:columnCount="4" >
 9   <Button
10         android:id="@+id/one"
11         android:text="1"/>
12   <Button
13         android:id="@+id/two"
14         android:text="2"/>
15    <Button
16         android:id="@+id/three"
17         android:text="3"/>
18   <Button
19         android:id="@+id/devide"
20         android:text="/"/>
21   <Button
22         android:id="@+id/four"
23         android:text="4"/>
24   <Button
25         android:id="@+id/five"
26         android:text="5"/>
27   <Button
28         android:id="@+id/six"
29         android:text="6"/>
30   <Button
31         android:id="@+id/multiply"
32         android:text="×"/>
33   <Button
34         android:id="@+id/seven"
35         android:text="7"/>
36   <Button
37         android:id="@+id/eight"
38         android:text="8"/>
39   <Button
40         android:id="@+id/nine"
41         android:text="9"/>
42     <Button
43         android:id="@+id/minus"
44         android:text="-"/>
45     <Button
46         android:id="@+id/zero"
47         android:layout_columnSpan="2"
48         android:layout_gravity="fill"
49         android:text="0"/>
50   <Button
51         android:id="@+id/point"
52         android:text="."/>
53     <Button
54         android:id="@+id/plus"
55         android:layout_rowSpan="2"
56         android:layout_gravity="fill"
57         android:text="+"/>
58     <Button
59         android:id="@+id/equal"
60         android:layout_columnSpan="3"
61         android:layout_gravity="fill"
62         android:text="="/>
63 </GridLayout>

转自:http://www.cnblogs.com/skywang12345/p/3154150.html

时间: 2024-08-08 22:09:05

Android开发UI之GridLayout的使用的相关文章

Android开发 UI布局

Android开发 UI布局一.线性布局LinearLayout 什么是线性布局? 其实呢,线性布局就是把所有的孩子摆在同一条线上 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_paren

Android开发UI特效

Android中UI特效 android经典开源代码分享 本文原始网址 作者为23code,欢迎给作者投稿 其它UI相关的网址: https://github.com/Trinea/android-open-project http://alamkanak.github.io/android-libraries-and-resources/ 23Code.com SwipeMenuListView 0 By 23Code on 2014年09月04日 SwipeMenuListView实现lis

Android开发UI新技能,你get这个新技能了吗?(附源码详解)

Jetpack Compose是什么? Jetpack Compose 是安卓用于构建UI的一种新方式,采用代码而非xml文件方式,写法与Flutter非常相似.官方主页:https://developer.android.google.cn/jetpack/compose官方Demo:https://github.com/android/compose-samples/tree/master/JetNews官方入门指导: https://developer.android.google.cn/

Android开发UI之android:gravity / android:layout_Gravity,android:padding / android:layout_margin属性区分

android:gravity / android:layout_Gravity区别: 1 android:gravity 是设置该view里面的内容相对于该view的位置,例如设置button里面的text相对于view的靠左,居中等位置. 2 3 android:layout_gravity 是用来设置该view相对与父view 的位置,例如设置button在layout里面的相对位置:屏幕居中,水平居中等. 在实践中,发现有时会同时使用android:gravity和 android:la

Android 开发 UI布局

线性布局LinearLayout 就是将所有的孩子放在一条直线上. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height=&q

50个Android开发人员必备UI效果源码[转载]

50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面实现篇Android 仿微信之界面导航篇Android 高仿QQ 好友分组列表Android 高仿QQ 界面滑动效果Android 高仿QQ 登陆界面Android 对Path的旋转效果的拓展Android高仿360安全卫士布局源码Android SlidingDrawer 滑动抽屉效果Androi

Android开发怎么让自己的APP UI漂亮、大方(规范篇一)

首先,笔者是站立在开发者的角度来看UI设计的,欢迎专业人士提供指导,不多说,来看怎么把UI设计和开发高效结合起来~ 一.约定APP开发中的一些规则 1.大部分图标满足HDPI(高清)即可,比如:大众点评首页的右上角图标,尺寸大致在48*48px左右 2.一般提供1280*720px的尺寸即可,最常见的适配模式 3.还有种图标,很多界面复用且图标中等偏大(80px及以上左右),他们在常规手机.平板,小尺寸手机上面需要适配,所以需要多种尺寸的图标,如:微信底部的tab菜单图标,一般设计的尺寸要3套,

Android开发怎么让自己的APP UI漂亮、大方(配色篇二)

我们在没有效果图的app开发中有一件事情肯定很头疼:一个按钮的调色改过来改过去,还是很难看,最终只能暂时作罢,浪费了大量的开发时间和精力.开发规范篇见Android开发怎么让自己的APP UI漂亮.大方(规范篇一) 一.APP常用搭配参考 底层背景色,内容背景色 ,两种颜色相近,但能区分标题背景色 任意花色标题文字色 通常为黑色或白色黑体内容文字 通常为黑色或白色宋体不重要的内容 浅灰色重要的内容 标题背景色附近的颜色通常比标题色亮,为强调色彩色颜色组合方式有,互补色,相似色,3角色(红.黄.蓝

Android开发1:基本UI界面设计——布局和组件

前言 啦啦啦~本学期要开始学习Android开发啦~ 博主在开始学习前是完完全全的小白,只有在平时完成老师要求的实验的过程中一步一步学习~从此篇博文起,博主将开始发布Android开发有关的博文,希望能在学习中和各位共同探讨,一起交流,共同进步~ 话不多说,首先进入我们的正题~Android开发一基本UI界面设计——布局和组件(Android Studio的配置安装使用等在以后为各位补上~) 基础知识 Android的组件分为布局和控件.布局,就是让控件在里面按一定的次序排列好的一种组件,本身并