Android学习笔记之相对布局与表格布局

开发环境：

Win XP + eclipse-jee-helios(版本号3.6) + ADT(版本10.0.1) + Android SDK(版本10)；

模拟器及真机测试环境：Android2.2

   

    1.RelativeLayout—相对布局

查看Android开发文档可以看到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="wrap_content"
                android:background="@drawable/blue"
                android:padding="10px" >
    <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" />
                                                                                                                                                                                                                                 
    <Button android:id="@+id/ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/entry"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10px"
            android:text="OK" />
    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/ok"
            android:layout_alignTop="@id/ok"
            android:text="Cancel" />
</RelativeLayout>

分析：相对布局，及谁在谁的下边，左边，右边，顶部在同一水平线，如

android:layout_alignTop="@id/ok"

 距离控件的边距等，将的是相对关系。

   通过上面的学习，我们就可以将Android项目学习笔记之×××

中的垂直线性布局设置成如下垂直线性布局中嵌套相对布局的形式，如图

实现上图布局的代码如下：

<?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"
    >
                                                                            
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    >
        <TextView
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:text="@string/number"
            android:id="@+id/numberlable"
        />
        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/number"
            android:layout_toRightOf="@id/numberlable"
            android:layout_alignTop="@id/numberlable"
            android:layout_marginLeft="5dp"
        />
    </RelativeLayout>
                                                                              
    <TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/content"
    />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:minLines="3"
        android:id="@+id/content"
    />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:id="@+id/button"
    />
</LinearLayout>

分析：可以看到布局之间是可以嵌套使用的，类似于网页中的table、div等标签。

   2.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:stretchColumns="1">
    <TableRow>
        <TextView
            android:text="@string/table_layout_4_open"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_4_open_shortcut"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
    <TableRow>
        <TextView
            android:text="@string/table_layout_4_save"
            android:padding="3dip" />
        <TextView
            android:text="@string/table_layout_4_save_shortcut"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
</TableLayout>

分析：这个布局特别类似网页布局中的table标签，是两行两列，

<TableRow></TableRow>

代表一行，在一行中，有两个显示控件<TextView />代表两列。