Android Layout研究 <三>　View的布局方式及实例

先笼统的谈谈常用的几种Layout布局方式. 

View常用的布局方式有以下几种,可以嵌套灵活使用，线性布局（Linear
Layout）,框架布局(FrameLayout),   相对布局（Relative
Layout）,表格布局（Table
Layout）,网格视图（Grid
View）,标签布局（Tab
Layout）,列表视图（List
View）,绝对布局（AbsoluteLayout）。

用户界面通过View和ViewGroup对象构建。Android中有很多种View和ViewGroup，他们都继承自View类。View对象是Android平台上表示用户界面的基本单元。

View的布局显示方式直接影响用户界面，View的布局方式是指一组View元素如何布局，准确的说是一个ViewGroup中包含的一些View怎么样布局。ViewGroup类是布局（layout）和视图容器（View
container）的基类。

1. 线性布局（Linear
Layout）：以垂直或者水平方式显示子视图(View或者ViewGroup)

前面的例子就是线形布局：

<?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"

    android:background="#0099cc"

    >

    

    <Button

      android:id="@+id/button0"

      

      android:layout_width="fill_parent"

      android:layout_height="wrap_content"

      android:layout_weight="0"

      android:width="200dp"

      

      android:text="@string/dummy_button" />

    

    

    <Button

      android:id="@+id/button1"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      

      android:layout_marginLeft="10dp"

      android:padding="20dp"

      

      

      android:layout_weight="0"

      android:text="@string/dummy_button" />

    

    

    <Button

      android:id="@+id/button2"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_gravity="right"

      android:layout_weight="0"

      android:text="@string/dummy_content" />

    

    <Button

      android:id="@+id/button3"

      

      android:layout_width="fill_parent"

      android:layout_height="wrap_content"

      android:layout_weight="0"

      android:gravity="right"

      android:text="@string/dummy_content" />

    <Button

      android:id="@+id/button4"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      

      android:layout_weight="0"

      android:text="@string/Button" />

    <Button

      android:id="@+id/button5"

      

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_weight="0"

      android:text="@string/Button" />

</LinearLayout>

讲解：

android:orientation="vertical"

表明元素按竖向下排列。

可选项是vertical和horizontal

2.
框架布局（FrameLayout）

FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域，之后你可以在其中填充一个单一对象
— 比如，一张你要发布的图片。所有的子元素将会固定在父View的左上角；你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前 一个子元素之上进行覆盖填充，把它们部份或全部挡住（除非后一个子元素是透明的）。

<?xml
version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#0099cc"

    >

    

    <Button

      android:id="@+id/button0"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_button" />

    

    

    <Button

      android:id="@+id/button1"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"      

      android:text="@string/dummy_button" />

    

    

    <Button

      android:id="@+id/button2"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_content" />

    

    <Button

      android:id="@+id/button3"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_content" />

    <Button

      android:id="@+id/button4"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_button" />

    <Button

      android:id="@+id/button5"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_button" />

    

    <TextView

      android:id="@+id/text1"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/hello"

      android:textColor="#FF0000"

        />

 

</FrameLayout>

3. 相对布局(RelativeLayout). 

可以指定其中元素相对父View和其它同级View的位置。

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#0099cc"

    >

    

    <Button

      android:id="@+id/button0"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_alignParentRight="true"

      android:layout_alignParentBottom="true"

      android:text="@string/dummy_button" />

    

    

    <Button

      android:id="@+id/button1"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_alignLeft="@id/button0"     

      

      android:text="@string/dummy_button" />

    

    

    <Button

      android:id="@+id/button2"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_alignParentLeft="true"

      android:layout_alignParentTop="true"

      android:text="@string/dummy_content" />

    

    <Button

      android:id="@+id/button3"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_toRightOf="@id/button2"

      android:text="@string/dummy_content" />

    <Button

      android:id="@+id/button4"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_toRightOf="@id/button3"

      android:text="@string/dummy_button" />

    <Button

      android:id="@+id/button5"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_below="@id/button2"

      android:text="@string/dummy_button" />

    

    <TextView

      android:id="@+id/text1"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_centerVertical="true"

      android:layout_centerHorizontal="true"

      android:text="@string/hello"

      android:textColor="#FF0000"

        />

 

</RelativeLayout>

      android:layout_alignParentRight="true"
      android:layout_alignParentBottom="true"

说明Button0位于父View的右下角。(相对于父View的一系列指定)

android:layout_alignLeft="@id/button0"     


android:layout_toRightOf="@id/button2"


android:layout_below="@id/button2"

相对于其它View的位置。

layout_alignLeft: 本View的Left边和指定View的Left边相同。

layout_toRightOf: 本View在指定View的右侧。

layout_below: 本View在指定View的上边。

如果不指定相对位置，他们就以左上角为基准，重叠在一起。

4. 表格布局(TableLayout):

 将子元素的位置分配到行或列中。一个TableLayout 由许多的TableRow 组成，每个TableRow 都会定义一个 row （事实上，你可以定义其它的子对象，这在下面会解释到）。TableLayout 容器不会显示row、cloumns 或cell 的边框线。每个 row 拥有0个或多个的cell ；每个cell 拥有一个View 对象。表格由列和行组成许多的单元格。表格允许单元格为空。

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:shrinkColumns="0,1"

    android:stretchColumns="0,1,2"

    android:background="#0099cc"

    >

    <TableRow>

    <Button

      android:id="@+id/button0"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      

      android:text="@string/dummy_button" />

    

    

    <Button

      android:id="@+id/button1"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_button" />

    

    

    <Button

      android:id="@+id/button2"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_content" />

    

    <Button

      android:id="@+id/button3"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_content" />

   

    <Button

      android:id="@+id/button4"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_button" />

    <Button

      android:id="@+id/button5"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:text="@string/dummy_button" />

    

    <TextView

      android:id="@+id/text1"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      

      android:text="@string/hello"

      android:textColor="#FF0000"

        />

    </TableRow>

    

 

</TableLayout>

android:shrinkColumns="0,2"，表示收缩第0列，第2列（第1列不变），那如果我们要收缩所有列呢？当然可以android:shrinkColumns="0,1,2,..."，其实有简单方法：android:shrinkColumns="*"，"*"类似于搜索的通配符哦~表示全部

android:shrinkColumns：可收缩，如果本行太满，则指定的这几行会收缩回来，让所有列都能显示出来。

android:stretchColumns：可拉伸，表示如果本行没法填满整个屏幕，则这几列拉伸。

如果标记为可以收缩，列宽可以收缩以使表格适合容器的大小。

如果标记为可以拉伸，
列宽可以拉伸以占用多余的空间。表格的总宽度由其父容器决定. 记住列可以同时具有可拉伸和可收缩属性

5. 列表视图(List Layout)

List Layout以列表形式显示它的子视图。列表可滚动，具体元素由ListAdapter插入列表.

ListAdapter：扩展自Adapter，它是ListView和数据列表之间的桥梁。ListView可以显示任何包装在ListAdapter中的数据。

6. 网格视图(Grid Layout)

7.标签视图：

8.绝对视图：