Android中的六大布局

继承关系图：



布局XML文件中常用属性：
android:layout_width 宽度 

android:layout_height 高度

可能的取值为match_parent，wrap_content或者固定的像素值。
android:orientation 方向

可能的取值为 horizontal水平 vertical 垂直
android:gravity

用来确定View中的控件在View中的停靠位置。　
android:layout_gravity

用来确定View在其父控件中的停靠位置
android:padding

padding是控件中的内容相对控件的边缘的边距．
android:layout_margin

layout_margin是控件边缘相对父空间的边距

android:baselineAligned 

该属性设置为false,将会阻止该布局管理器与它的子元素的基线对齐

android:divider

设置垂直布局时两个组件之间的分隔条

一.LinearLayout线性布局

水平方向:

<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="horizontal"
tools:context=".MainActivity" >

<TextView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="row1"
android:layout_weight="1"
android:background="#0000FF"/>

<TextView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="row2"
android:layout_weight="1"
android:background="#00FF00"/>

<TextView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="row3"
android:layout_weight="1"
android:background="#FF0000"/>

</LinearLayout>

输出结果：



垂直方向：

<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"
tools:context=".MainActivity" >

<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="row1"
android:layout_weight="1"
android:background="#0000FF"/>

<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="row2"
android:layout_weight="1"
android:background="#00FF00"/>

<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="row3"
android:layout_weight="1"
android:background="#FF0000"/>

</LinearLayout>

输出结果：



二.FrameLayout单帧布局

<FrameLayout 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"
tools:context=".MainActivity" >

<TextView android:layout_width="80dp"
android:layout_height="80dp"
android:text="row3"
android:background="#FF0000"/>

<TextView android:layout_width="60dp"
android:layout_height="60dp"
android:text="row2"
android:background="#00FF00"/>

<TextView android:layout_width="40dp"
android:layout_height="40dp"
android:text="row1"
android:background="#0000FF"/>

</FrameLayout>

输出结果：



三.RelativeLayout相对布局

android:layout_centerInParent

定义组件在父容器中间

android:layout_centerVertical

定义组件在父容器垂直居中

android:layout_centerHorizontal

定义组件在父容器水平居中

android:layout_alignParentBottom

定义组件与父容器下对齐

(上对齐,左对齐,右对齐略)

android:layout_above

定义在组件的上方

android:layout_below

定义在组件的下方

android:layout_toLeftOf

定义在组件的左边

android:layout_toRightOf

定义在组件的右边 

android:layout_alignTop

本元素的上边缘和某元素的的上边缘对齐

(下对齐，右对齐，左对齐略 ...)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- 定义该组件位于父容器中间 -->
<TextView
android:id="@+id/view01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_centerInParent="true"
/>
<!-- 定义该组件位于view01组件的上方 -->
<TextView
android:id="@+id/view02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_above="@id/view01"
android:layout_alignLeft="@id/view01"
/>
<!-- 定义该组件位于view01组件的下方 -->
<TextView
android:id="@+id/view03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_below="@id/view01"
android:layout_alignLeft="@id/view01"
/>
<!-- 定义该组件位于view01组件的左边 -->
<TextView
android:id="@+id/view04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_toLeftOf="@id/view01"
android:layout_alignTop="@id/view01"
/>
<!-- 定义该组件位于view01组件的右边 -->
<TextView
android:id="@+id/view05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/leaf"
android:layout_toRightOf="@id/view01"
android:layout_alignTop="@id/view01"
/>
</RelativeLayout>

输出结果：



四.TableLayout表格布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- 定义第一个表格布局，指定第2列允许收缩，第3列允许拉伸 -->
<TableLayout android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:shrinkColumns="1"
android:stretchColumns="2"
>
<!-- 直接添加按钮，它自己会占一行 -->
<Button android:id="@+id/ok1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="独自一行的按钮"
/>
<!-- 添加一个表格行 -->
<TableRow>
<!-- 为该表格行添加3个按钮 -->
<Button android:id="@+id/ok2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮"
/>
<Button android:id="@+id/ok3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="收缩的按钮"
/>
<Button android:id="@+id/ok4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="拉伸的按钮"
/>
</TableRow>
</TableLayout>
<!-- 定义第二个表格布局 ，指定第二列隐藏-->
<TableLayout android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:collapseColumns="1"
>
<!-- 直接添加按钮，它自己会占一行 -->
<Button android:id="@+id/ok5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 独自一行的按钮 "
/>
<!--定义一个表格行-->
<TableRow>
<!-- 为该表格行添加3个按钮 -->
<Button android:id="@+id/ok6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮1"
/>
<Button android:id="@+id/ok7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="被隐藏的按钮"
/>
<Button android:id="@+id/ok8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮 3"
/>
</TableRow>
</TableLayout>
<!-- 定义第三个表格布局 ，指定第2、3两列可以被拉伸-->
<TableLayout android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1,2"
>
<!-- 直接添加按钮，它自己会占一行 -->
<Button android:id="@+id/ok9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="独自一行的按钮"
/>
<!--定义一个表格行-->
<TableRow>
<!-- 为该表格行添加3个按钮 -->
<Button android:id="@+id/ok10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮"
/>
<Button android:id="@+id/ok11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="拉伸的按钮"
/>
<Button android:id="@+id/ok12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="拉伸的按钮"
/>
</TableRow>
<!--定义一个表格行-->
<TableRow>
<!-- 为该表格行添加2个按钮 -->
<Button android:id="@+id/ok13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="普通按钮"
/>
<Button android:id="@+id/ok14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="拉伸的按钮"
/>
</TableRow>
</TableLayout>
</LinearLayout>

输出结果：



五.GridLayout九宫格布局（Android4.0加入）

android:rowCount

定义总行数

android:columnCount

定义总列数

用一个计算器界面的例子来演示：

<?xml version="1.0" encoding="utf-8" ?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="6"
android:columnCount="4"
android:id="@+id/root"
>
<!-- 定义一个横跨4列的文本框，
并设置该文本框的前景色、背景色等属性  -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:textSize="50sp"
android:layout_marginLeft="4px"
android:layout_marginRight="4px"
android:padding="5px"
android:layout_gravity="right"
android:background="#eee"
android:textColor="#000"
android:text="0"/>
<!-- 定义一个横跨4列的按钮 -->
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="4"
android:text="清除"/>
</GridLayout>

package com.light.study.android;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.Button;
import android.widget.GridLayout;

public class MainActivity extends Activity {
GridLayout gridLayout;
// 定义16个按钮的文本
String[] chars = new String[]
{
"7" , "8" , "9" , "÷",
"4" , "5" , "6" , "×",
"1" , "2" , "3" , "-",
"." , "0" , "=" , "+"
};
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridLayout = (GridLayout) findViewById(R.id.root);

for(int i = 0 ; i < chars.length ; i++)
{
Button bn = new Button(this);
bn.setText(chars[i]);
// 设置该按钮的字体大小
bn.setTextSize(40);
// 指定该组件所在的行
GridLayout.Spec rowSpec = GridLayout.spec(i / 4 + 2);
// 指定该组件所在列
GridLayout.Spec columnSpec = GridLayout.spec(i % 4);
GridLayout.LayoutParams params = new GridLayout.LayoutParams(
rowSpec , columnSpec);
// 指定该组件占满父容器
params.setGravity(Gravity.FILL);
gridLayout.addView(bn , params);
}
}

}

输出结果：