Android六大基本布局

一．基本理论
Android六大基本布局分别是：线性布局LinearLayout、表格布局TableLayout、相对布局RelativeLayout、
层布局FrameLayout、绝对布局AbsoluteLayout、网格布局GridLayout。
其中，表格布局是线性布局的子类。网格布局是android 4.0后新增的布局。
在手机程序设计中，绝对布局基本上不用，用得相对较多的是线性布局和相对布局。

学习基本布局要理解两个比较基础概念的图：
（一）Android布局管理器的类图

上面这个类图只是说了六大基本布局的关系，其实ViewGroup还有其他一些布局管理器。
这里要理解一点就是布局也是布局管理器，因为布局里面还可以添加布局。

（二）Android布局的XML关系图

布局管理器里面既可以添加多个布局管理器又可以添加多个控件，而控件里面不能在添加布局或控件了。

二.各个布局的使用
（一）线性布局
线性布局在开发中使用最多，具有垂直方向与水平方向的布局方式，通过设置属性“android:orientation”控制方向，属性值垂直（vertical）和水平(horizontal)，默认水平方向。
android:gravity：内部控件对齐方式，常用属性值有center、center_vertical、center_horizontal、top、bottom、left、right等。
这个属性在布局组件RelativeLayout、TableLayout中也有使用，FrameLayout、AbsoluteLayout则没有这个属性。
center：居中显示，这里并不是表示显示在LinearLayout的中心，当LinearLayout线性方向为垂直方向时，center表示水平居中，但是并不能垂直居中，此时等同于center_horizontal的作用；同样当线性方向为水平方向时，center表示垂直居中，等同于center_vertical。

top、bottom、left、right顾名思义为内部控件居顶、低、左、右布局。
这里要与android:layout_gravity区分开，layout_gravity是用来设置自身相对于父元素的布局。

android:layout_weight：权重，用来分配当前控件在剩余空间的大小。
使用权重一般要把分配该权重方向的长度设置为零，比如在水平方向分配权重，就把width设置为零。

示例：多功能计算机的设计
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#1000" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:padding="20dp"
            android:text="0"
            android:textSize="30sp" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="5"
                android:orientation="horizontal" >

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="MC" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="←" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="7" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="4" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="1" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="MR" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="CE" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="8" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="5" />

                    <Button
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1"
                        android:text="2" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" >

                <Button
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="0" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="MS" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="C" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="9" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="6" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="3" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="." />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="M+" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="±" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="/" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="*" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="-" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="+" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical" >

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="M-" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="√" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="%" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:text="1/x" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="2"
                android:text="=" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

运行结果图：

（二）RelativeLayout
相对布局可以让子控件相对于兄弟控件或父控件进行布局，可以设置子控件相对于兄弟控件或父控件进行上下左右对齐。
RelativeLayout能替换一些嵌套视图，当我们用LinearLayout来实现一个简单的布局但又使用了过多的嵌套时，就可以考虑使用RelativeLayout重新布局。
相对布局就是一定要加Id才能管理。

RelativeLayout中子控件常用属性：
1、相对于父控件，例如：android:layout_alignParentTop=“true”
android:layout_alignParentTop      控件的顶部与父控件的顶部对齐;
android:layout_alignParentBottom  控件的底部与父控件的底部对齐;
android:layout_alignParentLeft      控件的左部与父控件的左部对齐;
android:layout_alignParentRight     控件的右部与父控件的右部对齐;

2、相对给定Id控件，例如：android:layout_above=“@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的右边缘对齐;

3、居中，例如：android:layout_centerInParent=“true”
android:layout_centerHorizontal 水平居中;
android:layout_centerVertical    垂直居中;
android:layout_centerInParent  父控件的中央;

使用示例：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.xykj.layout.MainActivity" >
 
    <TextView
        android:id="@+id/main_tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#55ff0000"
        android:gravity="center"
        android:text="相对布局的使用" />
 
    <!--
         android:layout_alignParentBottom="true"位于父框架的底部
        android:layout_centerHorizontal="true"在父框架中水平居中
        android:layout_centerVertical="true"在父框架中垂直居中
       
        这两个要区分，一个是边界对齐，一个是位于哪个方位
         android:layout_below="@+id/main_tv_title"位于对应文件的下边
        android:layout_alignRight="@+id/main_tv_title"和对应文件右对齐    -->
 
    <TextView
        android:id="@+id/main_tv_title2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/main_tv_title"
        android:layout_below="@+id/main_tv_title"
        android:background="#5500ff00"
        android:text="二级标题" />
 
    <TextView
        android:id="@+id/main_tv_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="中间"
        android:textSize="22sp"
        android:layout_margin="30dp" />
 
    <TextView
        android:id="@+id/main_tv_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/main_tv_center"
        android:layout_alignRight="@id/main_tv_center"
        android:text="上面"
        android:textSize="22sp" />
 
    <TextView
        android:id="@+id/main_tv_dowm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/main_tv_center"
        android:layout_below="@id/main_tv_center"
        android:text="下面"
        android:textSize="22sp" />
 
    <TextView
        android:id="@+id/main_tv_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/main_tv_center"
        android:text="左边"
        android:layout_alignTop="@id/main_tv_center"
        android:textSize="22sp" />
 
    <TextView
        android:id="@+id/main_tv_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/main_tv_center"
        android:layout_alignTop="@id/main_tv_center"
        android:text="上面"
        android:textSize="22sp" />
 
</RelativeLayout>

效果图：

（三）FrameLayout
帧布局或叫层布局，从屏幕左上角按照层次堆叠方式布局，后面的控件覆盖前面的控件。
该布局在开发中设计地图经常用到，因为是按层次方式布局，我们需要实现层面显示的样式时就可以
采用这种布局方式，比如我们要实现一个类似百度地图的布局，我们移动的标志是在一个图层的上面。
在普通功能的软件设计中用得也不多。层布局主要应用就是地图方面。
使用示例：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#f00"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#0f0"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00f"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#fff"
        android:layout_gravity="center"
        />
    <TextView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="#000"
        android:layout_gravity="center"
        />
 
</FrameLayout>

效果图：

（四）AbsoluteLayout
 绝对布局中将所有的子元素通过设置android:layout_x 和 android:layout_y属性，将子元素的坐标位置固定下来，即坐标(android:layout_x, android:layout_y) ，layout_x用来表示横坐标，layout_y用来表示纵坐标。屏幕左上角为坐标(0,0)，横向往右为正方，纵向往下为正方。实际应用中，这种布局用的比较少，因为Android终端一般机型比较多，各自的屏幕大小。分辨率等可能都不一样，如果用绝对布局，可能导致在有的终端上显示不全等。

使用示例：
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_x="20dp"
        android:layout_y="20dp"
        android:text="用户名："
        
        />
    
    <EditText
         android:layout_height="wrap_content"
        android:layout_width="200dp"
        android:layout_x="80dp"
        android:layout_y="7dp"
        />
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_x="20dp"
        android:layout_y="80dp"
        android:text="密    码："
        
        />
    
     <EditText
         android:layout_height="wrap_content"
        android:layout_width="200dp"
        android:layout_x="80dp"
        android:layout_y="60dp"
        />
    
     
     <Button
          android:layout_height="50dp"
        android:layout_width="100dp"
        android:layout_x="90dp"
        android:layout_y="120dp"
         android:text="提交"
         />
 
</AbsoluteLayout>

效果图：

（五）TableLayout
表格布局，适用于多行多列的布局格式，每个TableLayout是由多个TableRow组成，一个TableRow就表示TableLayout中的每一行，这一行可以由多个子元素组成。实际上TableLayout和TableRow都是LineLayout线性布局的子类。但是TableRow的参数android:orientation属性值固定为horizontal，且android:layout_width=MATCH_PARENT，android:layout_height=WRAP_CONTENT。所以TableRow实际是一个横向的线性布局，且所以子元素宽度和高度一致。
注意：在TableLayout中，单元格可以为空，但是不能跨列，意思是只能不能有相邻的单元格为空。
TableLayout常用属性：
android:shrinkColumns：设置可收缩的列，内容过多就收缩显示到第二行
android:stretchColumns：设置可伸展的列，将空白区域填充满整个列
android:collapseColumns：设置要隐藏的列
列的索引从0开始，shrinkColumns和stretchColumns可以同时设置。
子控件常用属性：
android:layout_column：第几列
android:layout_span：占据列数

使用示例：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首页"/>
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center">
 
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:stretchColumns="0,1,2"
            android:gravity="center">
 
           <TableRow>
               <TextView
                   android:layout_width="100dp"
                   android:layout_height="100dp"
                   android:layout_margin="5dp"
                   android:background="#e2a617"
                   android:text="文件管理"
                   android:gravity="center"/>
 
               <TextView
                   android:layout_width="100dp"
                   android:layout_height="100dp"
                   android:layout_margin="5dp"
                   android:background="#0d637f"
                   android:text="应用商店"
                   android:gravity="center"/>
 
               <TextView
                   android:layout_width="100dp"
                   android:layout_height="100dp"
                   android:layout_margin="5dp"
                   android:background="#aa2266"
                   android:text="文件管理"
                   android:gravity="center"/>
           </TableRow>
 
            <TableRow>
                <TextView
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_margin="5dp"
                    android:background="#45e15f"
                    android:text="应用管理"
                    android:gravity="center"/>
                <TextView
                    android:layout_width="200dp"
                    android:layout_height="100dp"
                    android:layout_margin="5dp"
                    android:background="#3924a4"
                    android:text="应用中心"
                    android:gravity="center"
                    android:layout_span="2"/>
            </TableRow>
 
        </TableLayout>
 
    </LinearLayout>
 
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#f5f5f5"
        android:stretchColumns="0,1,2,3"
        android:gravity="center_vertical">
 
        <TableRow>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="首页" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="消息" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="发现" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="我" />
        </TableRow>
 
    </TableLayout>
</LinearLayout>

效果图：

屏幕中心是一个类似Material布局，底部是一个页面切换的导航栏。底部布局通过设置android:stretchColumns=”0,1,2,3″来让四个按钮同样大小显示并填充到整个宽度，中心区域主要使用android:stretchColumns=”0,1,2″填充显示以及android:layout_span=”2″控制大内容跨列显示。

（六）GridLayout(网格布局)
作为android 4.0 后新增的一个布局,与前面介绍过的TableLayout(表格布局)其实有点大同小异;
不过新增了一些东东
①跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式
②容器中的组件可以跨多行也可以跨多列(相比TableLayout直接放组件,占一行相比较)
因为是android 4.0新增的,API Level 14,在这个版本以前的sdk都需要导入项目。这里不解释。

常用属性:
排列对齐:
①设置组件的排列方式:   android:orientation=""     vertical(竖直,默认)或者horizontal(水平)
②设置组件的对齐方式:   android:layout_gravity=""   center,left,right,buttom

设置布局为几行几列:
①设置有多少行: android:rowCount="4"        //设置网格布局有4行
②设置有多少列: android:columnCount="4"    //设置网格布局有4列

设置某个组件位于几行几列
注:都是从0开始算的哦！
①组件在第几行: android:layout_row = "1"   //设置组件位于第二行
②组件在第几列: android:layout_column = "2"   //设置该组件位于第三列

设置某个组件横跨几行几列:
①横跨几行: android:layout_rowSpan = "2"     //纵向横跨2行
②横跨几列: android:layout_columnSpan = "3"     //横向横跨2列

使用示例：
 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="4"
    android:orientation="horizontal"
    android:rowCount="6" >
    <TextView
        android:layout_columnSpan="4"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:text="0"
        android:textSize="50sp" />
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="回退" />
    <Button
        android:layout_columnSpan="2"
        android:layout_gravity="fill"
        android:text="清空" />
    <Button android:text="+" />
    <Button android:text="1" />
    <Button android:text="2" />
    <Button android:text="3" />
    <Button android:text="-" />
    <Button android:text="4" />
    <Button android:text="5" />
    <Button android:text="6" />
    <Button android:text="*" />
    <Button android:text="7" />
    <Button android:text="8" />
    <Button android:text="9" />
    <Button android:text="/" />
    <Button
        android:layout_width="wrap_content"
        android:text="." />
    <Button android:text="0" />
    <Button android:text="=" />
 
</GridLayout>

效果图：

这里要说明一点:
通过android:layout_rowSpan和android:layout_columnSpan设置表明组件横越的行数与列数
再通过:android:layout_gravity = "fill"  设置表明组件填满所横越的整行或者整列
用法总结:
①GridLayout使用虚细线将布局划分为行,列和单元格,同时也支持在行,列上进行交错排列
②使用流程:
step 1:先定义组件的对其方式 android:orientation  水平或者竖直
step 2:设置组件所在的行或者列,记得是从0开始算的
step 3:设置组件横跨几行或者几列;设置完毕后,需要在设置一个填充:android:layout_gravity = "fill"

可能遇到的问题:
当读者将布局设置为GridLayout时,会出现 莫名其妙的报错,
如果代码语法逻辑没有错的话,就可能是配置文件 AndroidManifest.xml 的问题了
因为GridLayout是android 4.0 后才推出的,API Level 为 14
只需要将配置文件中的 MinSDK改成14或者以上版本 即可,保存,问题就解决了！


除上面讲过之外常用的几个布局的属性：
(1)layout_margin
用于设置控件边缘相对于父控件的边距
android:layout_marginLeft
android:layout_marginRight
android:layout_marginTop
android:layout_marginBottom

(2) layout_padding
用于设置控件内容相对于控件边缘的边距
android:layout_paddingLeft
android:layout_paddingRight
android:layout_paddingTop
android:layout_paddingBottom

(3) layout_width/height
用于设置控件的高度和宽度
wrap_content 内容包裹，表示这个控件的里面文字大小填充
fill_parent 跟随父窗口
match_parent

(4) gravity
用于设置View组件里面内容的对齐方式
top bottom left   right  center等

(5) android:layout_gravity  
用于设置Container组件的对齐方式
android:layout_alignTop 本元素的上边缘和某元素的的上边缘对齐
android:layout_alignLeft 本元素的左边缘和某元素的的左边缘对齐
android:layout_alignBottom 本元素的下边缘和某元素的的下边缘对齐
android:layout_alignRight 本元素的右边缘和某元素的的右边缘对齐

参考转载：http://blog.csdn.net/wenzhi20102321/article/details/52677595