第2章 Hello，Views
本章我们会选取几个类似“Hello World”的例子，并快速布局用来演示一些Views。
本章需要有一定的知识积累，开始之前你应该完成“Hello World”并且知道如何创建运行一个工程，了解一个工程的基本结构。以下是一些内容的预览
2.1布局
| Linear Layout（水平布局） |
Relative Layout（相对布局） |
Table Layout（表格布局） |
| Grid View（网格View） |
Tab Layout（选项卡布局） |
List View（列表View） |
表格2-1
2.2 Widgets和其他Views
| Date Picker（日期选择器） |
Time Picker（时间选择器） |
Form Stuff（表单元素） |
| Spinner（下拉列表） |
Auto Complete（自动完成） |
Gallery（画廊） |
| Google Map View（谷歌地图） |
Web View（浏览器View） |
|
|
|
表格2-2
更多的View，大家可以参考android.widget.*包中的内容，下面我们开始单独讲解上面的例子。
2.1.1 Linear Layout
LinearLayout继承自ViewGroup，而ViewGroup继承自View。这种水平布局有横向和纵向的两种模式。我们应该小心的使 用LinearLayout，如果有很多个LinearLayout的嵌套，我们可以考虑使用RelativeLayout来代替它。下面我们新建一个 HelloLinearLayout项目，然后修改main.xml如“代码清单2-1”所示：
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">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="red"
android:gravity="center_horizontal"
android:background="#aa0000"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text="green"
android:gravity="center_horizontal"
android:background="#00aa00"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text="blue"
android:gravity="center_horizontal"
android:background="#0000aa"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text="yellow"
android:gravity="center_horizontal"
android:background="#aaaa00"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="row one"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row two"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row three"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row four"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
LinearLayout>
LinearLayout>
代码清单2-1
注意“代码清单2-1”中有两个需要注意的地方，一个是android:orientation这个属性用来描述当前 LinearLayout是垂直还是水平，默认不填的话是水平布局，你可以使用“vertical”和“horizontal”来设置。还有一个是XX， 这个属性表示权重，我们理解为比例，例如如果A的weight为3，B的weight为1，那么A占整个大小的3/4，B占1/4。“代码清单2-1”这 里都是平均分布的，都选的1。然后代码中无需修改任何内容。运行后的效果就如表格2-1中的一样。
2.1.2 Relative Layout
一个RelativeLayout是一个非常强大的工具用来做用户界面，因为它可以消除嵌套ViewGroups。如果你发现自己使用多个嵌套的 LinearLayout组，您就可以考虑使用一个RelativeLayout来替换它。下面我们新建一个HelloRelativeLayout项 目，然后修改main.xml如“代码清单2-2”所示：
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"/>
<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="10dip"
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>
代码清单2-2
这里我们看到一些属性如
android:layout_below,android:layout_toLeftOf,android:layout_alignParentRight。 看字面意思应该就很容易明白，并且使用这些属性的时候都需要传一个ID，因为相对布局你需要指定一个与之相对应的对象，它会根据这个对象来调整自己的位 置。大家可以多试一下其他的属性，就能明白使用方法了。运行后的效果就如表格2-1中的一样。
2.1.3 Table Layout
TableLayout是基于行和列的布局模式，我们新建一个HelloTableLayout项目，然后修改main.xml如“代码清单2-3”所示：
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:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save..."
android:padding="3dip" />
<TextView
android:text="Ctrl-S"
android:gravity="right"
android:padding="3dip" />
TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="Save As..."
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:padding="3dip" />
TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Import..."
android:padding="3dip" />
TableRow>
<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Export..."
android:padding="3dip" />
<TextView
android:text="Ctrl-E"
android:gravity="right"
android:padding="3dip" />
TableRow>
<View
android:layout_height="2dip"
android:background="#FF909090" />
<TableRow>
<TextView
android:layout_column="1"
android:text="Quit"
android:padding="3dip" />
TableRow>
TableLayout>
代码清单2-3
TableLayout类似于Html的表格结构，你可以认为TableLayout像Html