引言--概述

布局

         是不可见的容器(ViewGroup)

         定义 UI 的可视化结构

         通过布局参数(LayoutParams)定义子元素的尺寸、位置

        Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。

简单说,Android布局做两件事:确定子元素的尺寸和停靠位置。

Android布局类型及关系:

Android图形化系统 android图形化布局_控件

        由上图可以看出:Android布局分为5种,分别是:线性布局LinerLayout、相对布局RelativeLayout、帧布局FrameLayout、表格布局TableLayout、网格布局GridLayout。这是最常用的5中布局。图中可以看出,这些布局都直接或间接继承自ViewGroup。

布局与布局参数:如下图

Android图形化系统 android图形化布局_布局_02

一、线性布局(LinerLayout)

1.布局介绍

        线性布局[LinerLayout]----最简单的一种布局,可设置权重。

        子元素被排列成一行或一列。LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后。如果是垂直排列,那么将是一个N行单列的结构,每一行只会有一个元素,而不论这个元素的宽度为多少;如果是水平排列,那么将是一个单行N列的结构。如果搭建两行两列的结构,通常的方式是先垂直排列两个元素,每一个元素里再包含一个LinearLayout进行水平排列。

2.常用的属性:

android:orientation:可以设置布局的方向--- horizontal(水平)、vertical(垂直)
android:gravity:用来控制组件的对齐方式

layout_gravity:设置该组件里面的内容[子元素]的“位置”
layout_weight:控制各个组件在布局中的相对大小,相当于权重。

(1)  gravity和layout_gravity辨析

gravity:对该View中内容的限定,即父元素设置其里面的子元素的位置。比如一个button 上面的text. 你可以设置该text 相对于button[view]的靠左,靠右等位置。如android:gravity="bottom|right",该View里面的内容[子元素]都处于右下位置。

layout_gravity:

layout_gravity属性值设定见下图:

描述

top

在布局顶部(horizontal 时可用)

bottom

在布局底部(horizontal 时可用)

left

在布局左则(vertical 时可用)

right

在布局右侧(vertical 时可用)

center_horizontal

水平居中(vertical 时可用)

center_vertical

垂直居中(horizontal 时可用)

center

水平或垂直居中(均有效)

Android图形化系统 android图形化布局_android_03



(2)  layout_weight:用于描述该子元素在剩余空间中占有的大小比例。layout_weight属性是一个非负整数值。线性布局会根据该控件layout_weight值与其所处布局中所有控件layout_weight值之和的比值为该控件分配占用的区域。例如,在水平布局的LinearLayout中有两个Button,这两个Button的layout_weight属性值都为1,那么这两个按钮都会被拉伸到整个屏幕宽度的一半。如果layout_weight指为0,控件会按原大小显示,不会被拉伸;对于其余layout_weight属性值大于0的控件,系统将会减去layout_weight属性值为0的控件的宽度或者高度,再用剩余的宽度或高度按相应的比例来分配每一个控件显示的宽度或高度。也就是说:如果要一行全部平分宽度,需要设宽为0。即都不指定宽,然后按比重分。

Android图形化系统 android图形化布局_线性布局_04

(3)  实例演示

Android图形化系统 android图形化布局_Android图形化系统_05

二、相对布局RelativeLayout

1.布局介绍

•     元素在相对位置显示

           相对父元素(布局)

           相对兄弟元素

•     可避免嵌套,保持简洁的层次结构,提升性能

•     RelativeLayout是Android五大布局结构中最灵活的一种布局结构,因为可以随意拖动、摆放控件。

2.相对父元素的属性

属性名称

描述

layout_alignParentTop

父元素顶部对齐(true)

layout_alignParentBottom

父元素底部对齐(true)

layout_alignParentStart

父元素左侧对齐(true)

layout_alignParentEnd

父元素右侧对齐(true)

layout_centerHorizontal

水平居中(true)

layout_centerVertical

垂直居中(true)

layout_marginTop

距离顶部

layout_marginBottom

距离底部

layout_marginStart

距离左侧

layout_marginEnd

距离右侧

3.相对兄弟元素的属性

属性名称

描述

layout_above

底部置于给定元素之上

llayout_below

顶部置于给定元素之下

layout_alignTop

顶部与给定元素顶部对齐

layout_alignBaseline

baseline 与给定元素的 baseline 对齐

layout_alignBottom

底部与给定元素底部对齐

layout_alignStart

左侧对齐给定元素

layout_alignEnd

右侧对齐给定元素

layout_toStartOf

右侧对齐给定元素开始的位置

layout_toEndOf

左侧对齐给定元素结束的位置

4.实例演示

Android图形化系统 android图形化布局_控件_06

三、帧布局FrameLayout

1.布局介绍

        子元素逐个放入栈中(会重叠),最后添加的子元素显示在最上面。

        在这个布局中,整个界面被当成一块空白备用区域,所有的子元素都不能被指定放置的位置,它们统统放于这块区域的左上角,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡。如下图:

Android图形化系统 android图形化布局_线性布局_07

2.实例演示

Android图形化系统 android图形化布局_布局_08

四、表格布局TableLayout

1.布局介绍

并不需要明确地声明包含多少行、多少列,而是通过TableRow、以及其他组件来控制表格的行数和列数, TableRow也是容器,因此可以向TableRow里面添加其他组件,每添加一个组件该表格就增加一行,即增加一个TableRow。如果想TableLayout里面添加组件,那么该组件就直接占用一行。在表格布局中,列的宽度由该列中最宽的单元格决定,整个表格布局的宽度取决于父容器的宽度(默认是占满父容器本身)。

       layout_column 设置子元素在行中的位置(从 0 开始)。

       属性layout_span可以设置合并多个单元格。

       表格布局是线性布局的子类,是嵌套的线性布局。

2.表格布局--属性

属性

描述

collapseColumns

隐藏指定列(索引从 0 开始)

collapseColumns="0"

collapseColumns="1,2"

stretchColumns

伸展指定列(索引从 0 开始)

stretchColumns="0"

stretchColumns="0,1"

stretchColumns="*"

shrinkColumns

收缩指定列,避免溢出

shrinkColums="1"

3.实例演示

Android图形化系统 android图形化布局_布局_09

五、网格布局GridLayout

1.布局介绍

        Android 4.0 引入的新布局方式,用行和列划分布局,可直接指定子元素的位置,解决了线性布局和表格布局在多层嵌套时引发的性能问题。

2.网格布局--属性

属性

描述

orientation

布局的方向(水平、垂直)

useDefaultMargins

使用默认边距(默认 false)

rowCount

最大行数

columnCount

最大列数

layout_row

子元素所在的行(索引从 0 开始)

layout_column

子元素所在的列(索引从 0 开始)

layout_rowSpan

合并行

layout_columnSpan

合并列

3.实例演示

Android图形化系统 android图形化布局_android_10

六、其他布局

1.绝对位置布局(AbsoluteLayout)

也有称“坐标布局”。主要属性就两个 layout_x 和 layout_y 分别定义这个组件的绝对位置。 即,以屏幕左上角为(0,0)的坐标轴的x,y值。

2.列表视图(List View)

List View是可滚动的列表。以列表的形式展示具体内容,并且能够根据数据的长度自适应显示。

3.标签布局(Tab Layout)

  以标签的方式显示它的子视图元素,就像在Firefox中的一个窗口中显示多个网页一样。为了狂创建一个标签UI(tabbed UI),需要使用到TabHost和TabWidget。TabHost必须是布局的根节点,它包含为了显示标签的TabWidget和显示标签内容的FrameLayout。

总结

•    线性布局最简单,可设置权重

•    相对布局最灵活

•    使用相对布局或网格布局避免线性布局的嵌套使用

•    使用网格布局替代表格布局