第五章：Android布局1

View的布局显示方式有下面几种：线性布局（Linear Layout）、相对布局（Relative Layout）、表格布局（Table Layout）、帧布局（FrameLayout）、绝对布局（AbsoluteLayout）。

1、线性布局（Linear Layout）

线性布局：是一个ViewGroup以线性方向显示它的子视图（view）元素，即垂直地或水平地。之前我们的Hello World！程序中view的布局方式就是线性布局的，一定不陌生！如下所示res/layour/main.xml： 

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent" 
              android:orientation="horizontal"><!-- have an eye on ! --> 
    <Button android:id="@+id/button1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"            
            android:text="Hello, I am a Button1" 
            android:layout_weight="1" 
            /> 
    <Button android:id="@+id/button2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Hello, I am a Button2" 
    android:layout_weight="1" 
    /> 
    <Button android:id="@+id/button3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Hello, I am a Button3" 
    android:layout_weight="1" 
    /> 
    <Button android:id="@+id/button4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Hello, I am a Button4" 
    android:layout_weight="1" 
    /> 
    <Button android:id="@+id/button5" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Hello, I am a Button5" 
    android:layout_weight="1" 
    /> 
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent" 
              android:orientation="horizontal"><!-- have an eye on ! --> 
    <Button android:id="@+id/button1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"            
            android:text="Hello, I am a Button1" 
            android:layout_weight="1" 
            /> 
    <Button android:id="@+id/button2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Hello, I am a Button2" 
    android:layout_weight="1" 
    /> 
    <Button android:id="@+id/button3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Hello, I am a Button3" 
    android:layout_weight="1" 
    /> 
    <Button android:id="@+id/button4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Hello, I am a Button4" 
    android:layout_weight="1" 
    /> 
    <Button android:id="@+id/button5" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Hello, I am a Button5" 
    android:layout_weight="1" 
    /> 
</LinearLayout>

 从上面可以看出根LinearLayout视图组（ViewGroup）包含5个Button，它的子元素是以线性方式（horizontal，水平的）布局，运行效果如下图所示：

 

 

2、相对布局（Relative Layout）

相对布局：是一个ViewGroup以相对位置显示它的子视图（view）元素，一个视图可以指定相对于它的兄弟视图的位置（例如在给定视图的左边或者下面）或相对于RelativeLayout的特定区域的位置（例如底部对齐，或中间偏左）。

相对布局是设计用户界面的有力工具，因为它消除了嵌套视图组。

<?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"> 
    <TextView 
        android:id="@+id/label" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="Type here:"/> 
    <EditText 
        android:id="@+id/entry" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:background="@android:drawable/editbox_background" 
        android:layout_below="@id/label"/><!-- have an eye on ! --> 
    <Button 
        android:id="@+id/ok" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_below="@id/entry"  <!-- have an eye on ! --> 
       android:layout_alignParentRight="true" <!-- have an eye on ! --> 
        android:layout_marginLeft="10dip" 
        android:text="OK" /> 
    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_toLeftOf="@id/ok" <!-- have an eye on ! --> 
        android:layout_alignTop="@id/ok" <!-- have an eye on ! --> 
        android:text="Cancel" /> 
</RelativeLayout> 

<?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"> 
    <TextView 
        android:id="@+id/label" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="Type here:"/> 
    <EditText 
        android:id="@+id/entry" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:background="@android:drawable/editbox_background" 
        android:layout_below="@id/label"/><!-- have an eye on ! --> 
    <Button 
        android:id="@+id/ok" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_below="@id/entry"  <!-- have an eye on ! --> 
       android:layout_alignParentRight="true" <!-- have an eye on ! --> 
        android:layout_marginLeft="10dip" 
        android:text="OK" /> 
    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_toLeftOf="@id/ok" <!-- have an eye on ! --> 
        android:layout_alignTop="@id/ok" <!-- have an eye on ! --> 
        android:text="Cancel" /> 
</RelativeLayout> 

从上面的布局文件我们知道，RelativeLayout视图组包含一个TextView、一个EditView、两个Button，注意标记了<!-- have an eye on ! -->（请注意运行代码的时候，请把这些注释去掉，否则会运行出错，上面加上是为了更加醒目！）的属性，在使用相对布局方式中就是使用这些类似的属性来定位视图到你想要的位置，它们的值是你参照的视图的id。这些属性的意思很简单，就是英文单词的直译，就不多做介绍了。运行之后，得如下结果：

3、 表格布局（Table Layout）

表格布局：是一个ViewGroup以表格显示它的子视图（view）元素，即行和列标识一个视图的位置。其实Android的表格布局跟HTML中的表格布局非常类似，TableRow 就像HTML表格的<tr>标记。

用表格布局需要知道以下几点：

• android:shrinkColumns，对应的方法：setShrinkAllColumns(boolean)，作用：设置表格的列是否收缩（列编号从0开始，下同），多列用逗号隔开（下同），如android:shrinkColumns="0,1,2"，即表格的第1、2、3列的内容是收缩的以适合屏幕，不会挤出屏幕。
• android:collapseColumns，对应的方法：setColumnCollapsed(int,boolean)，作用：设置表格的列是否隐藏
• android:stretchColumns，对应的方法：setStretchAllColumns(boolean)，作用：设置表格的列是否拉伸

<?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,2"><!-- have an eye on ! --> 
    <TableRow><!-- row1 --> 
    <Button android:id="@+id/button1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"            
            android:text="Hello, I am a Button1" 
            android:layout_column="0" 
            /> 
       <Button android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello, I am a Button2" 
     android:layout_column="1" 
     /> 
     </TableRow> 
    <TableRow><!-- row2 --> 
    <Button android:id="@+id/button3" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"            
            android:text="Hello, I am a Button3" 
            android:layout_column="1" 
            /> 
<Button android:id="@+id/button4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello, I am a Button4" 
     android:layout_column="1" 
     /> 
</TableRow> 
<TableRow>    
     <Button android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello, I am a Button5" 
     android:layout_column="2" 
     /> 
</TableRow> 
</TableLayout> 

<?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,2"><!-- have an eye on ! --> 
    <TableRow><!-- row1 --> 
    <Button android:id="@+id/button1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"            
            android:text="Hello, I am a Button1" 
            android:layout_column="0" 
            /> 
       <Button android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello, I am a Button2" 
     android:layout_column="1" 
     /> 
     </TableRow> 
    <TableRow><!-- row2 --> 
    <Button android:id="@+id/button3" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"            
            android:text="Hello, I am a Button3" 
            android:layout_column="1" 
            /> 
<Button android:id="@+id/button4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello, I am a Button4" 
     android:layout_column="1" 
     /> 
</TableRow> 
<TableRow>    
     <Button android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Hello, I am a Button5" 
     android:layout_column="2" 
     /> 
</TableRow> 
</TableLayout> 

 4、 帧布局(FrameLayout)

原理是在控件中绘制任何一个控件都可以被后绘制的控件覆盖，最后绘制的控件会盖住之前的控件。如图所示界面中先绘制的ImageView 然后在绘制的TextView和EditView 所以后者就覆盖在了前者上面。

<?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">
        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/g"
        />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="雨松MOMO"
                android:background="#FF0000"
                android:textColor="#000000" 
        android:textSize="18dip" 
        />
        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/image"
                android:layout_gravity="bottom"
        />
        <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="快乐生活每一天喔"
        android:layout_gravity="bottom"
        />
</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">
        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/g"
        />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="雨松MOMO"
                android:background="#FF0000"
                android:textColor="#000000" 
        android:textSize="18dip" 
        />
        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/image"
                android:layout_gravity="bottom"
        />
        <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="快乐生活每一天喔"
        android:layout_gravity="bottom"
        />
</FrameLayout>

5、绝对布局（AbsoluteLayout）

绝对布局：是一个ViewGroup以绝对方式显示它的子视图（view）元素，即以坐标的方式来定位在屏幕上位置。

这种布局方式很好理解，在布局文件或编程地设置View的坐标，从而绝对地定位。如下所示布局文件：

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:id="@+id/AbsoluteLayout01" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent" 
   >
   <TextView android:id="@+id/txtIntro"
     android:text="绝对布局"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_x="20dip"<!-- have an eye on ! -->
     android:layout_y="20dip"><!-- have an eye on ! -->
   </TextView>
</AbsoluteLayout>

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" 
   android:id="@+id/AbsoluteLayout01" 
   android:layout_width="fill_parent" 
   android:layout_height="fill_parent" 
   >
   <TextView android:id="@+id/txtIntro"
     android:text="绝对布局"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_x="20dip"<!-- have an eye on ! -->
     android:layout_y="20dip"><!-- have an eye on ! -->
   </TextView>
</AbsoluteLayout>

 

Android五大布局的基本使用方法已经介绍完，最后笔者在这里强调一下在开发与学习中建议大家使用相对布局，首先它的方法属性是最强大的其次它基本可以实现其它4大布局的效果，当然这里说的不是全部 有时候还是须要使用其他布局， 所以笔者建议大家开发中以实际情况定夺，以上五种布局可以使用布局嵌套的方式可以做出更好看的更美观的布局。