Android UI之五种基本布局详解

Android布局是应用界面开发的重要一环，在Android中，共有五种布局方式，分别是：

1. LinearLayout （线性布局）
2. RelativeLayout（相对布局）
3. FrameLayout（帧布局）
4. TableLayout（表格布局）GridLayout 网格布局
5. AbsoluteLayout（绝对布局）

LinearLayout （线性布局）

LinearLayout是一种线型的布局方式。LinearLayout布局容器内的组件一个挨着一个地排列起来：不仅可以控制个组件横向排列，也可控制各组件纵向排列。

• android:orientation 属性指定了排列方向是 vertical，如果指定的是horizontal，控件就会在水平方向上排列了。
• android:gravity 是用 于指定文字在控件中的对齐方式
• android:layout_gravity 是用于指定控件在布局中的对齐 方式 RelativeLayout 相对布局
• android:layout_weight=”1”（权重分布），这个weight在垂直布局时，代表行距；水平的时候代表列宽；weight值越大就越大。
• android:visibility=invisible控制布局是否显示 ：1、显示 visible 2、不显示，但占空间 invisible 3、隐藏 gone

RelativeLayout（相对布局）

是一种相对布局，控件的位置是按照相对位置来计算的，后一个控件在什么位置依赖于前一个控件的基本位置，是布局最常用，也是最灵活的一种布局。

分类方式一
a）、第一类:属性值为true或false
　　android:layout_centerHrizontal 水平居中
　　android:layout_centerVertical 垂直居中
　　android:layout_centerInparent 相对于父元素完全居中
　　android:layout_alignParentBottom 贴紧父元素的下边缘
　　android:layout_alignParentLeft 贴紧父元素的左边缘
　　android:layout_alignParentRight 贴紧父元素的右边缘
　　android:layout_alignParentTop 贴紧父元素的上边缘　　
b）、第二类：属性值必须为id的引用名“@id/id-name”
　　android:layout_below 在某元素的下方
　　android:layout_above 在某元素的的上方
　　android:layout_toLeftOf 在某元素的左边
　　android:layout_toRightOf 在某元素的右边
　　android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
　　android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
　　android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
　　android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

c）、第三类：属性值为具体的像素值，如30dip，40px
　　android:layout_marginBottom 离某元素底边缘的距离
　　android:layout_marginLeft 离某元素左边缘的距离
　　android:layout_marginRight 离某元素右边缘的距离
　　android:layout_marginTop 离某元素上边缘的距离
　　
分类方式二
　　android:layout_marginTop=”25dip” //顶部距离
　　android:gravity=”left” //空间布局位置
　　android:layout_marginLeft=”15dip //距离左边距
相对于给定ID控件
　　android:layout_above 将该控件的底部置于给定ID的控件之上;
　　android:layout_below 将该控件的底部置于给定ID的控件之下;
　　android:layout_toLeftOf 将该控件的右边缘与给定ID的控件左边缘对齐;
　　android:layout_toRightOf 将该控件的左边缘与给定ID的控件右边缘对齐;
　　android:layout_alignBaseline 将该控件的baseline与给定ID的baseline对齐;
　　android:layout_alignTop 将该控件的顶部边缘与给定ID的顶部边缘对齐;
　　android:layout_alignBottom 将该控件的底部边缘与给定ID的底部边缘对齐;
　　android:layout_alignLeft 将该控件的左边缘与给定ID的左边缘对齐;
　　android:layout_alignRight 将该控件的右边缘与给定ID的右边缘对齐;
相对于父组件
　　android:layout_alignParentTop 如果为true,将该控件的顶部与其父控件的顶部对齐;
　　android:layout_alignParentBottom 如果为true,将该控件的底部与其父控件的底部对齐;
　　android:layout_alignParentLeft 如果为true,将该控件的左部与其父控件的左部对齐;
　　android:layout_alignParentRight 如果为true,将该控件的右部与其父控件的右部对齐;
居中
　　android:layout_centerHorizontal 如果为true,将该控件的置于水平居中;
　　android:layout_centerVertical 如果为true,将该控件的置于垂直居中;
　　android:layout_centerInParent 如果为true,将该控件的置于父控件的中央;
指定移动像素
　　android:layout_marginTop 上偏移的值;
　　android:layout_marginBottom 下偏移的值;
　　android:layout_marginLeft 　　左偏移的值;
　　android:layout_marginRight 　 右偏移的值;
　　
基本属性
　　android:id — 为控件指定相应的ID
　　android:text — 指定控件当中显示的文字，需要注意的是，这里尽量使用strings.xml文件当中的字符串
　　android:grivity — 指定控件的基本位置，比如说居中，居右等位置这里指的是控件中的文本位置并不是控件本身。
　　android:textSize — 指定控件当中字体的大小
　　android:background — 指定该控件所使用的背景色，RGB命名法
　　android:width — 指定控件的宽度
　　android:height — 指定控件的高度
　　android:padding* — 指定控件的内边距，也就是说控件当中的内容
　　android:sigleLine — 如果设置为真的话，则控件的内容在同一行中进行显示

FrameLayout（帧布局）

　　FrameLayout对象好比一块在屏幕上提前预定好的空白区域，可以将一些元素填充在里面，如图片。所有元素都被放置在FrameLayout区域的最左上区域，而且无法为这些元素制指定一个确切的位置，若有多个元素，那么后面的元素会重叠显示在前一个元素上。

TableLayout（表格布局）

TableLayout是指将子元素的位置分配到行或列中。Android的一个TableLayout有许多TableRow组成，每一个TableRow都会定义一个Row。TableLayout容器不会显示Row，Column，及Cell的边框线，每个Row拥有0个或多个Cell，每个Cell拥有一个View对象。在使用tablelayout时，应注意每一个cell的宽度。

（1）TableLayout行列数的确定
- TableLayout的行数由开发人员直接指定，即有多少个TableRow对象（或View控件），就有多少行
- TableLayout的列数等于含有最多子控件的TableRow的列数。如第一TableRow含2个子控件，第二个TableRow含3个，第三个TableRow含4个，那么该TableLayout的列数为4.

（2）TableLayout可设置的属性详解

TableLayout可设置的属性包括全局属性及单元格属性。

1. 全局属性也即列属性，有以下3个参数：
   　　android:stretchColumns 设置可伸展的列。该列可以向行方向伸展，最多可占据一整行。
   　　android:shrinkColumns 设置可收缩的列。当该列子控件的内容太多，已经挤满所在行，那么该子控件的内容将往列方向显示。
   　　android:collapseColumns 设置要隐藏的列。
   示例：
   　　android:stretchColumns=”0” 第0列可伸展
   　　android:shrinkColumns=”1,2” 第1,2列皆可收缩
   　　android:collapseColumns=”*” 隐藏所有行
   　　

   说明：列可以同时具备stretchColumns及shrinkColumns属性，若此，那么当该列的内容N多时，将“多行”显示其内容。（这里不是真正的多行，而是系统根据需要自动调节该行的layout_height）

2. 单元格属性，有以下2个参数：
   　　android:layout_column 指定该单元格在第几列显示
   　　android:layout_span 指定该单元格占据的列数（未指定时，为1）
   　　示例：
   　　android:layout_column=”1” 该控件显示在第1列
   　　android:layout_span=”2” 该控件占据2列

　　说明：一个控件也可以同时具备这两个特性。

GridLayout 网格布局

GridLayout布局使用虚细线将布局划分为行、列和单元格，也支持一个控件在行、列上都有交错排列。而GridLayout使用的其实是跟LinearLayout类似的API，只不过是修改了一下相关的标签而已，所以对于开发者来说，掌握GridLayout还是很容易的事情。GridLayout的布局策略简单分为以下三个部分：

1. 首先它与LinearLayout布局一样，也分为水平和垂直两种方式，默认是水平布局，一个控件挨着一个控件从左到右依次排列，但是通过指定Android:columnCount设置列数的属性后，控件会自动换行进行排列。另一方面，对于GridLayout布局中的子控件，默认按照wrap_content的方式设置其显示，这只需要在GridLayout布局中显式声明即可。
2. 其次，若要指定某控件显示在固定的行或列，只需设置该子控件的android:layout_row和android:layout_column属性即可，但是需要注意：android:layout_row=”0”表示从第一行开始，android:layout_column=”0”表示从第一列开始，这与编程语言中一维数组的赋值情况类似。
3. 最后，如果需要设置某控件跨越多行或多列，只需将该子控件的android:layout_rowSpan或者layout_columnSpan属性设置为数值，再设置其layout_gravity属性为fill即可，前一个设置表明该控件跨越的行数或列数，后一个设置表明该控件填满所跨越的整行或整列。
   AbsoluteLayout
   android:layout_x 指定控件在父布局的x轴坐标
   android:layout_y 指定控件在父布局的 y轴坐标

AbsoluteLayout（绝对布局）

绝对布局极少使用，在不是绝对要使用的情况下就绝对不要用