界面可视化工具------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

步骤二

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

步骤三

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

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

步骤四

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

步骤五

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

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

DroidDraw 教程一：Currency Converter

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

步骤一

登陆到DroidDraw UI Designer

步骤二

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

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

步骤三

选择"Layout"标签

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

步骤四

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

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

步骤五

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

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

步骤六

转到"Widgets"标签

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

步骤七

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

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

步骤八

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

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

步骤九

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

对齐。

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

步骤十

编辑每个 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 应该像这样：

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

步骤十四

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3. android:
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. xmlns:andro>
  7. <LinearLayout
  8. android:
  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:
  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:
  24. android:layout_width="100px"
  25. android:layout_height="wrap_content"
  26. android:textSize="18sp"></EditText>
  27. <TextView
  28. android:
  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:
  35. android:layout_width="100px"
  36. android:layout_height="wrap_content"
  37. android:textSize="18sp"></EditText>
  38. <RadioGroup
  39. android:
  40. android:layout_width="wrap_content"
  41. android:layout_height="wrap_content"
  42. android:orientation="vertical">
  43. <RadioButton
  44. android:
  45. android:layout_width="wrap_content"
  46. android:layout_height="wrap_content"
  47. android:text="Dollars to Euros">
  48. </RadioButton>
  49. <RadioButton
  50. android:
  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:
  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。它应该像这样：

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

步骤十六

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

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

结果：

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

DroidDraw 教程二: Table Layout

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

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

步骤一

启动DroidDraw 用户界面设计器

步骤二

根布局选择为 RelativeLayout 布局

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

2011-9-26 10:02 上传

下载附件 (16.19 KB)

步骤三

选择"Layouts"标签

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

2011-9-26 10:02 上传

下载附件 (13.49 KB)

步骤四

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

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

2011-9-26 10:02 上传

下载附件 (6.85 KB)

步骤五

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

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

2011-9-26 10:03 上传

下载附件 (7.48 KB)

步骤六

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

出菜单中选择 TableLayout。

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

2011-9-26 10:03 上传

下载附件 (9.04 KB)

步骤七

每一个 TableRow 中拖放一个 TextView：

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

2011-9-26 10:03 上传

下载附件 (9.84 KB)

步骤八

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

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

2011-9-26 10:03 上传

下载附件 (13 KB)

步骤九

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

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

2011-9-26 10:03 上传

下载附件 (13.83 KB)

步骤十

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

填充满该 Table 表格。

步骤十一

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

2011-9-26 10:03 上传

下载附件 (10.55 KB)

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

步骤十二

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

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

2011-9-26 10:03 上传

下载附件 (8.81 KB)

步骤十三

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

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

2011-9-26 10:03 上传

下载附件 (13.1 KB)

步骤十四

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

步骤十五

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

步骤十六

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

步骤十七

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

2011-9-26 10:03 上传

下载附件 (15.32 KB)

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout
  3. android:
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. xmlns:andro>
  7. <TableLayout
  8. android:
  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:
  16. android:layout_width="fill_parent"
  17. android:layout_height="wrap_content"
  18. android:orientation="horizontal">
  19. <TextView
  20. android:
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:text="Name">
  25. </TextView>
  26. <EditText
  27. android:
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content"
  30. android:textSize="18sp">
  31. </EditText>
  32. </TableRow>
  33. <TableRow
  34. android:
  35. android:layout_width="fill_parent"
  36. android:layout_height="wrap_content"
  37. android:orientation="horizontal">
  38. <TextView
  39. android:
  40. android:layout_width="wrap_content"
  41. android:layout_height="wrap_content"
  42. android:text="Phone">
  43. </TextView>
  44. <EditText
  45. android:
  46. android:layout_width="wrap_content"
  47. android:layout_height="wrap_content"
  48. android:textSize="18sp">
  49. </EditText>
  50. </TableRow>
  51. <TableRow
  52. android:
  53. android:layout_width="fill_parent"
  54. android:layout_height="wrap_content"
  55. android:orientation="horizontal">
  56. <TextView
  57. android:
  58. android:layout_width="wrap_content"
  59. android:layout_height="wrap_content"
  60. android:text="E-Mail">
  61. </TextView>
  62. <EditText
  63. android:
  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:
  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>

复制代码

结果：
界面可视化工具------DroidDraw

2011-9-26 10:02 上传

下载附件 (19.4 KB)

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

2011-9-26 10:03 上传

点击文件名下载附件

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

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

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

在 Eclipse 新建一个工程

步骤一 - 创建初始化布局

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

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

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

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

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


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

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

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

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

点击"Apply"按钮

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

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

步骤四 代码：

使用以下代码在你的 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 模拟器中运行你的代码

结果

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

Android GUI Widget 可视化指导

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

的用户界面

AnalogClock

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

2011-9-26 21:12 上传

下载附件 (4.24 KB)

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

复制代码

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

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

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

2011-9-26 21:14 上传

下载附件 (3.72 KB)

  1. <CheckBox
  2. android:
  3. android:text="Plain"
  4. android:layout_width="wrap_content"
  5. android:layout_height="wrap_content"
  6. />
  7. <CheckBox
  8. android:
  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:
  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

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

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

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

2011-9-26 21:14 上传

下载附件 (1.86 KB)

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

复制代码

EditText

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

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

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

2011-9-26 21:14 上传

下载附件 (12.9 KB)

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

复制代码

ImageButton

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

2011-9-26 21:14 上传

下载附件 (2.84 KB)

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

复制代码

ImageView

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

2011-9-26 21:14 上传

下载附件 (1.55 KB)

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

复制代码

ProgressBar

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

2011-9-26 21:14 上传

下载附件 (2.19 KB)

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

复制代码

Spinner

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

2011-9-26 21:14 上传

下载附件 (2.92 KB)

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

复制代码

TimePicker

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

2011-9-26 21:14 上传

下载附件 (2.13 KB)

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

复制代码

RadioButton

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

2011-9-26 21:14 上传

下载附件 (4.83 KB)

  1. <RadioGroup
  2. android:
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. xmlns:andro
  6. android:orientation="vertical">
  7. <RadioButton
  8. android:
  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:
  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:
  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:
  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

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

  1. <TextView
  2. android:
  3. android:text="Plain"
  4. android:layout_width="wrap_content"
  5. android:layout_height="wrap_content"/>
  6. <TextView
  7. android:
  8. android:text="Serif"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:typeface="serif"/>
  12. <TextView
  13. android:
  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"/>

相关文章：

  • 2021-09-21
  • 2022-02-09
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-12-05
  • 2021-10-09
  • 2021-12-06
  • 2021-10-09
  • 2021-10-04
  • 2022-12-23
  • 2022-01-10
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode