DroidDraw 教程二: Table Layout

DroidDraw 教程二: Table Layout

• 步骤零

本教程描述如何创建一个从DroidDraw简单的输入和TableLayout布局。本教程假设你已经下载并安装了Android SDK。本教程也假设你对GUI编程概念和Java编程语言相当熟悉。

• 步骤一

启动 DroidDraw 用户界面设计器

• 步骤二

根布局选择为RelativeLayout布局

• 步骤三

选择"Layouts"标签

• 步骤四

把一个TableLayout对象从Layouts面板中拖放到屏幕顶的中部。

• 步骤五

双击"TableLayout"来修改它的属性。把它的宽度"width"改为"fill_parent"

• 步骤六

把三个TableRow对象从Layouts面板中拖放到TableLayout对象中。当你拖放TableRow对象时，你应该从弹出菜单中选择TableLayout。

• 步骤七

每一个TableRow中拖放一个TextView：

• 步骤八

双击每一个TextView来修改它的属性，修改显示文本如下图一样：

• 步骤九

每一个TableRow中拖放一个EditText，放在存在的文本右边。

• 步骤十

选中TableLayout，修改"Stretchable Column"(可扩展栏)属性值为1，这将把所有的EditText widget 扩展开来填充满该Table表格。

• 步骤十一

编辑每一个EditText的属性，让Text文本属性为""

• 步骤十二

把一个Button 拖放到TableLayout下面的右下角空白处。它应该在TableLayout的外面并和它右对齐。

• 步骤十三

修改该按钮的属性，文本设置为"OK"

• 步骤十四

点击"Generate"按钮来生成.xml文件

• 步骤十五

在Eclipse中，创建一个新的Android工程

• 步骤十六

用第十五步骤生成的XML来替换res/layouts/mian.xml文件内容。

• 步骤十七

运行你的新工程，你应该在Android中看到你的GUI。它应该像这样：

• 完整XML文件

2. android:id="@+id/widget49"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. xmlns:android="http://schemas.android.com/apk/res/android">
7. android:id="@+id/widget54"
8. android:layout_height="160px"
9. androidrientation="vertical"
10. android:stretchColumns="1"
11. android:layout_alignParentTop="true"
12. android:layout_centerHorizontal="true" android:layout_width="fill_parent">
14. android:id="@+id/widget55"
15. android:layout_width="fill_parent"
16. android:layout_height="wrap_content"
17. androidrientation="horizontal">
19. android:id="@+id/widget58"
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content"
22. android:text="Name">
25. android:id="@+id/widget61"
26. android:layout_width="wrap_content"
27. android:layout_height="wrap_content"
28. android:textSize="18sp">
32. android:id="@+id/widget56"
33. android:layout_width="fill_parent"
34. android:layout_height="wrap_content"
35. androidrientation="horizontal">
37. android:id="@+id/widget59"
38. android:layout_width="wrap_content"
39. android:layout_height="wrap_content"
40. android:text="hone">
43. android:id="@+id/widget62"
44. android:layout_width="wrap_content"
45. android:layout_height="wrap_content"
46. android:textSize="18sp">
50. android:id="@+id/widget57"
51. android:layout_width="fill_parent"
52. android:layout_height="wrap_content"
53. androidrientation="horizontal">
55. android:id="@+id/widget60"
56. android:layout_width="wrap_content"
57. android:layout_height="wrap_content"
58. android:text="E-Mail">
61. android:id="@+id/widget63"
62. android:layout_width="wrap_content"
63. android:layout_height="wrap_content"
64. android:textSize="18sp">
68. android:id="@+id/widget64"
69. android:layout_width="wrap_content"
70. android:layout_height="wrap_content"
71. android:text="Button"
72. android:layout_below="@+id/widget54"
73. android:layout_alignRight="@+id/widget54">

• 结果