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.绝对视图：