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>