Android(安卓)UI之布局
Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。
Android布局分为5种,LinearLayout(线性布局方式)、Relative Layout(相对布局)、FrameLayout(帧布局)、TableLayout(表格布局)、AbsoluteLayout(绝对位置布局,已经被弃用)
接下来详细介绍4大布局:
1、LinearLayout(线性布局方式)
LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后。如果是垂直排列,那么将是一个N行单列的结构,每一行只会有一个元素,而不论这个元素的宽度为多少;如果是水平排列,那么将是一个单行N列的结构。如果搭建两行两列的结构,通常的方式是先垂直排列两个元素,每一个元素里再包含一个LinearLayout进行水平排列。
LinearLayout中的子元素属性android:layout_weight生效,它用于描述该子元素在剩余空间中占有的大小比例。
2、Relative Layout(相对布局)
RelativeLayout按照各子元素之间的位置关系完成布局。在此布局中的子元素里与位置相关的属性将生效。RelativeLayout是Android五大布局结构中最灵活的一种布局结构,比较适合一些复杂界面的布局。
(1)、重点属性
(2)、属性对比
layout_margin,相对于父组件的位置
padding,组件内部的位置
3、FrameLayout(帧布局)
FrameLayout可以说成是层布局方式。在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡。
(1)、商业开发实现
支付宝支付页面触发,将输入“|”在输入栏中。在弹出框上重叠透明帧布局,点击触发,再判断将输入“|”在输入栏中。
(2)、实例
如下,第一个TextView被第二个TextView完全遮挡,第三个TextView遮挡了第二个TextView的部分位置。
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ff000000" android:gravity="center" android:text="1"/> <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ff654321" android:gravity="center" android:text="2"/> <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#fffedcba" android:gravity="center" android:text="3"/> </FrameLayout>复制代码
4、TableLayout(表格布局)
适用于N行N列的布局格式。一个TableLayout由许多TableRow组成,一个TableRow就代表TableLayout中的一行。
(1)、全局属性
android:stretchColumns 设置可伸展的列。该列可以向行方向伸展,最多可占据一整行。
android:shrinkColumns 设置可收缩的列。当该列子控件的内容太多,已经挤满所在行,那么该子控件的内容将往列方向显示。
android:collapseColumns 设置要隐藏的列。
示例:
android:stretchColumns=”0” 第0列可伸展
android:shrinkColumns=”1,2” 第1,2列皆可收缩
android:collapseColumns=”*” 隐藏所有行
(2)、单元格属性
android:layout_column 指定该单元格在第几列显示
android:layout_span 指定该单元格占据的列数(未指定时,为1)
示例:
android:layout_column=”1” 该控件显示在第1列
android:layout_span=”2” 该控件占据2列
(3)、实例
<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:background="#ffffffff" android:gravity="center" android:padding="10dp" android:text="1"/> <TextView android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:background="#fffedcba" android:gravity="center" android:padding="10dp" android:text="3"/> <TextView android:background="#ff654321" android:gravity="center" android:padding="10dp" android:text="2"/> </TableRow> </TableLayout>
更多相关文章
- Android笔记-自定义适配器
- Android中View绘制视图
- Android定位功能(一)
- Android(安卓)Studio下载安装教程及开发环境搭建
- Android开发之百分比布局
- 《解析 Google Android(安卓)DSK-智能手机开发范例手册》.(薛显
- Android线性布局(Linear Layout)
- Android(安卓)自定义弹幕控件
- 浅谈Android五大布局——LinearLayout、FrameLayout、AbsoulteLa