界面可视化工具------DroidDraw

GUI 可视化设计器——DroidDraw

DroidDraw 是一个基于 Java Swing 的 Android 界面设计器，可以通过它来生成复杂的 Android Layout XML 文件，Android 的 Layout 和 Swing Layout 中有很好的对应，设计器的代码编写起来比较容易。

AnDroidDraw 是一个与 DroidDraw 集成的 Android 应用程序，它允许你从 DroidDraw 应用程序下载你的 GUIs,也允许你在一个 Android 设备上预览你的 GUIs.下载DroidDraw

步骤一

在你的 Android 设备上运行 AnDroidDraw，你应该看到像这样的：

步骤二

在你的电脑上运行 DroidDraw，并且创建一个 GUI，（获取更多关于创建 GUI 的信息，请看教程 1、教程2、教程 3。）接下来从 DroidDraw 菜单中选择"Project"->"Send GUI to Deviec"

步骤三

现在你应该在 Android 屏幕上看到你新创建的 GUI 的像这样的 xml：

步骤四

点击"Preview GUI"按钮来预览你的 GUI。

步骤五

当你结束时，点击向后的箭头，来返回到 AnDroidDraw 的主屏幕。

记住，如果你感兴趣，你可以在文本框中编辑该 XML 文件，并且再次点击"Preview GUI"来查看你的修改。然而，这些修改将不会返回到 DroidDraw。

DroidDraw 教程一：Currency Converter

本教程将给你一个简短的介绍开关于使用 DroidDraw 用户界面设计器来开发一个在 Android 上的 GUI 应用程序。本教程假设你已经下载并安装了 Android SDK。本教程也假设你对 GUI 编程概念和 Java 编程语言相当熟悉。

步骤一

登陆到DroidDraw UI Designer

步骤二

设置根布局为 RelativeLayout(相对布局)

步骤三

选择"Layout"标签

步骤四

从 Layouts 面板中把一个 LinearLayout 对象拖放到屏幕顶部中心位置

步骤五

选择该 LinearLayout 对象并点击属性"Properties"标签来开始编辑 layout 属性值。把宽度"width"改成"200px",高度"height"改成"130px"点击"Apply"来应用改变。

步骤六

转到"Widgets"标签

步骤七

把两个 TextView 对象和两个 EditText 对象交替地拖放到 LinearLayout 中

步骤八

把一个 RadioGroup 对象拖放进 LinearLayout 中。把两个 RadioButton 对象拖放到 RadioGroup 中。

步骤九

把一个 Button 对象拖放到根 RelativeLayout 中，它在 LinearLayout 对象下面。它应该和 LinearLayout 的右边

对齐。

步骤十

编辑每个 TextView 对象的属性值。上面一个的文本设置成"Dollars"，并设置成"bold"字体样式。下面一个

TextView 的文本设置成"Euros"，并也设置成"bold"字体样式。

步骤十一

如以下内容编辑上面一个 EditText 的属性值：

• id 修改成："@+id/dollars"
• 文本内容设置为空
• 宽度修改成"100px"

步骤十一半

在"Euros"TextView 下面的第二个 EditText 上重复步骤十一，但是把 id 设置为"@+id/euros"

步骤十二

• 编辑第一个 RadioButton 属性：文本设置为"Dollars to Euros",并把它 id 设置成"@+id/dtoe"
• 编辑第二个 RadioButton 属性：文本设置为"Euros to Dollars ",并把它 id 设置成"@+id/etod"

重要注意事项

你必须正确地获取 id，因为这是你在代码中如何获取搜索到该 UI 元素的方式。

步骤十三

编辑 Button 属性：文本修改为"Convert"、它的 id 设置成"@+id/convert"。

最终的 GUI 应该像这样：

步骤十四

点击"Generate"按钮来生成 XML 布局。该 xml 应像这样：

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout
3. android:id="@+id/widget30"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. xmlns:android="http://schemas.android.com/apk/res/android">
7. <LinearLayout
8. android:id="@+id/widget31"
9. android:layout_width="180px"
10. android:layout_height="228px"
11. android:orientation="vertical"
12. android:layout_alignParentTop="true"
13. android:layout_centerHorizontal="true">
14. <TextView
15. android:id="@+id/widget41"
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
19. android:text="Dollars"
20. android:textStyle="bold">
21. </TextView>
22. <EditText
23. android:id="@+id/dollars"
24. android:layout_width="100px"
25. android:layout_height="wrap_content"
26. android:textSize="18sp"></EditText>
27. <TextView
28. android:id="@+id/widget43"
29. android:layout_width="wrap_content"
30. android:layout_height="wrap_content"
31. android:text="Euros"
32. android:textStyle="bold"></TextView>
33. <EditText
34. android:id="@+id/euros"
35. android:layout_width="100px"
36. android:layout_height="wrap_content"
37. android:textSize="18sp"></EditText>
38. <RadioGroup
39. android:id="@+id/widget45"
40. android:layout_width="wrap_content"
41. android:layout_height="wrap_content"
42. android:orientation="vertical">
43. <RadioButton
44. android:id="@+id/dtoe"
45. android:layout_width="wrap_content"
46. android:layout_height="wrap_content"
47. android:text="Dollars to Euros">
48. </RadioButton>
49. <RadioButton
50. android:id="@+id/etod"
51. android:layout_width="wrap_content"
52. android:layout_height="wrap_content"
53. android:text="Euros to Dollars">
54. </RadioButton>
55. </RadioGroup>
56. </LinearLayout>
57. <Button
58. android:id="@+id/convert"
59. android:layout_width="wrap_content"
60. android:layout_height="wrap_content"
61. android:text="Convert"
62. android:layout_below="@+id/widget31"
64. android:layout_alignRight="@+id/widget31">
65. </Button>
66. </RelativeLayout>

复制代码

步骤十五

在 Eclipse 中创建一个新的 Android 工程。从 DroidDraw 剪切该 XML 并粘贴替换到 res/layout/main.xml 的内

容中。

到这里你就可以在 Android 中运行你的 GUI。它应该像这样：

步骤十六

最后一步是实际的代码货币转换。它不多，你可以用一下代码来查找到你的 GUI 元素：

>"Generate"按钮来生成 XML 布局。该 xml 应像这样：

结果：

DroidDraw 教程二: Table Layout

本教程描述如何创建一个从 DroidDraw 简单的输入和 TableLayout 布局。本教程假设你已经下载并安装了

Android SDK。本教程也假设你对 GUI 编程概念和 Java 编程语言相当熟悉。

步骤一

启动DroidDraw 用户界面设计器

步骤二

根布局选择为 RelativeLayout 布局

2011-9-26 10:02 上传

下载附件 (16.19 KB)

步骤三

选择"Layouts"标签

2011-9-26 10:02 上传

下载附件 (13.49 KB)

步骤四

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

2011-9-26 10:02 上传

下载附件 (6.85 KB)

步骤五

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

2011-9-26 10:03 上传

下载附件 (7.48 KB)

步骤六

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

出菜单中选择 TableLayout。

2011-9-26 10:03 上传

下载附件 (9.04 KB)

步骤七

每一个 TableRow 中拖放一个 TextView：

2011-9-26 10:03 上传

下载附件 (9.84 KB)

步骤八

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

2011-9-26 10:03 上传

下载附件 (13 KB)

步骤九

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

2011-9-26 10:03 上传

下载附件 (13.83 KB)

步骤十

选中 TableLayout，修改"Stretchable Column"(可扩展栏)属性值为 1，这将把所有的EditText widget 扩展开来

填充满该 Table 表格。

步骤十一

2011-9-26 10:03 上传

下载附件 (10.55 KB)

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

步骤十二

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

2011-9-26 10:03 上传

下载附件 (8.81 KB)

步骤十三

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

2011-9-26 10:03 上传

下载附件 (13.1 KB)

步骤十四

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

步骤十五

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

步骤十六

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

步骤十七

2011-9-26 10:03 上传

下载附件 (15.32 KB)

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout
3. android:id="@+id/widget49"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. xmlns:android="http://schemas.android.com/apk/res/android">
7. <TableLayout
8. android:id="@+id/widget54"
9. android:layout_height="160px"
10. android:orientation="vertical"
11. android:stretchColumns="1"
12. android:layout_alignParentTop="true"
13. android:layout_centerHorizontal="true" android:layout_width="fill_parent">
14. <TableRow
15. android:id="@+id/widget55"
16. android:layout_width="fill_parent"
17. android:layout_height="wrap_content"
18. android:orientation="horizontal">
19. <TextView
20. android:id="@+id/widget58"
22. android:layout_width="wrap_content"
23. android:layout_height="wrap_content"
24. android:text="Name">
25. </TextView>
26. <EditText
27. android:id="@+id/widget61"
28. android:layout_width="wrap_content"
29. android:layout_height="wrap_content"
30. android:textSize="18sp">
31. </EditText>
32. </TableRow>
33. <TableRow
34. android:id="@+id/widget56"
35. android:layout_width="fill_parent"
36. android:layout_height="wrap_content"
37. android:orientation="horizontal">
38. <TextView
39. android:id="@+id/widget59"
40. android:layout_width="wrap_content"
41. android:layout_height="wrap_content"
42. android:text="Phone">
43. </TextView>
44. <EditText
45. android:id="@+id/widget62"
46. android:layout_width="wrap_content"
47. android:layout_height="wrap_content"
48. android:textSize="18sp">
49. </EditText>
50. </TableRow>
51. <TableRow
52. android:id="@+id/widget57"
53. android:layout_width="fill_parent"
54. android:layout_height="wrap_content"
55. android:orientation="horizontal">
56. <TextView
57. android:id="@+id/widget60"
58. android:layout_width="wrap_content"
59. android:layout_height="wrap_content"
60. android:text="E-Mail">
61. </TextView>
62. <EditText
63. android:id="@+id/widget63"
64. android:layout_width="wrap_content"
65. android:layout_height="wrap_content"
67. android:textSize="18sp">
68. </EditText>
69. </TableRow>
70. </TableLayout>
71. <Button
72. android:id="@+id/widget64"
73. android:layout_width="wrap_content"
74. android:layout_height="wrap_content"
75. android:text="Button"
76. android:layout_below="@+id/widget54"
77. android:layout_alignRight="@+id/widget54">
78. </Button>
79. </RelativeLayout>

复制代码

结果：

2011-9-26 10:02 上传

下载附件 (19.4 KB)

7.jpg (9.15 KB, 下载次数: 6)

2011-9-26 10:03 上传

点击文件名下载附件

DroidDraw 教程三:使用 ListView 和 array 资源

在 Eclipse 新建一个工程

步骤一 - 创建初始化布局

• 开启 DroidDraw 并创建一个新的 Layout
• 从 Widget 列表中拖放一个 ListView 放入该 Layout 中
• 双击该 ListView 编辑它的属性
• 把它的宽、高属性值改为"fill_parent"
• 点击"Applay"按钮

步骤二 - 创建一个 Array 数组资源

注意：这些使用说明是针对独立的 DroidDraw 可执行文件的。

• 点击 DroidDraw 中的"Arrays"标签
• 点击"New"按钮来添加一个新的 Array 数组
• 当提示名称时，使用"items"
• 对于数组值，使用","逗号来隔开列表的值
• 点击"Save"按钮并把该文件保存为 arrays.xml，保存在你工程 res/values 目录中

步骤三 - 让你的列表和数组连接

在你第一步创建的 ListView 上双击

修改"Entry Array Id"属性为"@+id/items"

点击"Apply"按钮

生成 Layout 布局文件并保存它为 main.xml，保存到你工程 res/layouts 目录中

步骤四 代码：

使用以下代码在你的 mainActivity.java 文件中：

1. /** Called when the activity is first created. */
2. @Override
3. public void onCreate(Bundle icicle) {
4. /** Called when the activity is first created. */
5. super.onCreate(icicle);
6. this.setTitle("DroidDraw");
7. setContentView(R.layout.main);
8. }

复制代码

步骤五 - 完成

在 Android 模拟器中运行你的代码

结果

Android GUI Widget 可视化指导

作为一个 Java Android 手机开发员、UI 设计者，为了让你的生活更简单。尝试用 DroidDraw 来高速开发你

的用户界面

AnalogClock

2011-9-26 21:12 上传

下载附件 (4.24 KB)

1. <AnalogClock
2. android:id="@+id/clock1"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"
5. />

复制代码

Button

2011-9-26 21:14 上传

下载附件 (4.54 KB)

1. <Button android:id ="@+id/button1"
2. android:text="Label"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"/>
5. <Button
6. android:id ="@+id/button2"
7. android:text="Label"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:typeface="serif"/>
11. <Button
12. android:id ="@+id/button3"
13. android:text="Label"
14. android:layout_width="fill_parent"
15. android:layout_height="fill_parent"
16. android:textStyle="bold|italic"/>

复制代码

CheckBox

2011-9-26 21:14 上传

下载附件 (3.72 KB)

1. <CheckBox
2. android:id="@+id/plain_cb"
3. android:text="Plain"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"
6. />
7. <CheckBox
8. android:id="@+id/serif_cb"
9. android:text="Serif"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:typeface="serif"
13. />
14. <CheckBox
15. android:id="@+id/bold_cb"
16. android:text="Bold"
17. android:layout_width="wrap_content"
18. android:layout_height="wrap_content"
19. android:textStyle="bold"
20. />
21. <CheckBox
22. android:id ="@+id/italic_cb"
23. android:text="Italic"
24. android:layout_width="wrap_content"
25. android:layout_height="wrap_content"
26. android:textStyle="italic"
27. />

复制代码

DatePicker

2011-9-26 21:14 上传

下载附件 (11.25 KB)

1. <DatePicker
2. android:layout_width="wrap_content"
3. android:layout_height="wrap_content" >
4. ……
5. // Required Java init code:
6. DatePicker dp =
7. (DatePicker)this.findViewById(R.id.widget27);
10. // for example init to 1/27/2008, no callback
11. dp.init(2008, 0, 27, Calendar.SUNDAY, null);
12. ...

复制代码

DigitalClock

2011-9-26 21:14 上传

下载附件 (1.86 KB)

1. <DigitalClock
2. android:id="@+id/digitalclock"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"/>

复制代码

EditText

2011-9-26 21:14 上传

下载附件 (4.85 KB)

1. <EditText
2. android:id ="@+id/edittext1"
3. android:text="EditText 1"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"
6. />
7. <EditText
8. android:id ="@+id/button2"
9. android:text="(206)555-1212"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:typeface="serif"
13. android:phoneNumber="true"
14. />
15. <EditText
16. android:id ="@+id/password"
17. android:text="SuperSecret"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:textStyle="bold|italic"
21. android:password="true"
22. />

复制代码

Gallery

2011-9-26 21:14 上传

下载附件 (12.9 KB)

1. <Gallery
2. android:id="@+id/gallery"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"/>

复制代码

ImageButton

2011-9-26 21:14 上传

下载附件 (2.84 KB)

1. <ImageButton
2. android:id="@+id/imagebutton"
3. android:src="@drawable/brush"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"/>

复制代码

ImageView

2011-9-26 21:14 上传

下载附件 (1.55 KB)

1. <ImageView
2. android:id="@+id/imagebutton"
3. android:src="@drawable/brush"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"/>

复制代码

ProgressBar

2011-9-26 21:14 上传

下载附件 (2.19 KB)

1. <ProgressBar
2. android:id="@+id/progress"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"/>

复制代码

Spinner

2011-9-26 21:14 上传

下载附件 (2.92 KB)

1. <Spinner
2. android:id="@+id/widget1"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:drawSelectorOnTop="false"/>

复制代码

TimePicker

2011-9-26 21:14 上传

下载附件 (2.13 KB)

1. <TimePicker
2. android:id="@+id/widget3"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"/>

复制代码

RadioButton

2011-9-26 21:14 上传

下载附件 (4.83 KB)

1. <RadioGroup
2. android:id="@+id/widget1"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"
5. xmlns:android="http://schemas.android.com/apk/res/android"
6. android:orientation="vertical">
7. <RadioButton
8. android:id="@+id/widget2"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:text="Plain"
12. android:checked="false"
13. android:layout_gravity="left"
14. android:layout_weight="0">
15. </RadioButton>
16. <RadioButton
17. android:id="@+id/widget3"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:text="Serif"
21. android:checked="true"
22. android:layout_gravity="left"
23. android:layout_weight="0"
24. android:typeface="serif">
25. </RadioButton>
26. <RadioButton
27. android:id="@+id/widget25"
28. android:layout_width="wrap_content"
29. android:layout_height="wrap_content"
30. android:text="Bold"
31. android:checked="false"
32. android:layout_weight="0"
33. android:layout_gravity="left"
34. android:textStyle="bold">
35. </RadioButton>
36. <RadioButton
37. android:id="@+id/widget24"
38. android:layout_width="wrap_content"
39. android:layout_height="wrap_content"
40. android:text="Bold & Italic"
42. android:checked="false"
43. android:layout_weight="0"
44. android:layout_gravity="left"
45. android:textStyle="bold_italic">
46. </RadioButton>
47. </RadioGroup>

复制代码

TextView

1. <TextView
2. android:id="@+id/plain"
3. android:text="Plain"
4. android:layout_width="wrap_content"
5. android:layout_height="wrap_content"/>
6. <TextView
7. android:id="@+id/serif"
8. android:text="Serif"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:typeface="serif"/>
12. <TextView
13. android:id="@+id/bold"
14. android:text="Bold"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:textStyle="bold"/>
18. <TextView
19. android:id ="@+id/italic"
20. android:text="Italic"
21. android:layout_width="wrap_content"
22. android:layout_height="wrap_content"
23. android:textStyle="italic"/>