DroidDraw+Android+UI可视化设计器

1、developersDroidDrawAndroid UI设计器anDAOiDAndroid UI 设计GUI可视化设计器DroidDrawDroidDraw是一个甚Java Swing的Android界而设计器町以通过它來牛成复朵的Android Layout XL1L文件，Android的Layout和Swing Layout屮右很好的对丿“，设计器的代码编写 起來比较容易。3#anD=?oiD#Android UI 设计AnDroidDrawAnDroidDraw是个与DroidDravz集成的Android应用程序，它允许你从DroidDraw应用程 序卜载你的GUIs,也允许你在一个

2、Android设备匕预览你的GUIs卜伐DroidDraw步骤零.b 載 AnDroidDraw apk 使用：adb install AnDroidDraw apk 把它安装到你的 Android 设备 I： 安装一个端I I转发规则：adb forward t卬6100 t卬7100步骤在你的Android设备I运行AnDroidDraw,你丿该看到像这样的:步骤二在你的电脑I：运行DroidDraw，并FL创建一个GUI,（获取更多关J：创建GUI的信息，请看 教和 1、半攵程 2、教程 3。）接 、 DroidDrawProject-HSend GUI toDeviec1GHDOID5

3、Android UI 设计步骤三现在你应该在Android屏幕I：看到你新创建的GUI的像这样的xmh步骤四点击-Preview GUT按钮來预览你的GUE步骤五当你结束时，点击向后的箭头，來返回到AnDroidDraw的主屛瓠记住,如果你感兴趣,你可以在文本框中编辑该XML文件，并且再次点击-Preview GUT來査看你的修改。然|何，这些修改将不会返回到DroidDraWo步骤六人功成！？ ? /Comments/Bugs brendan d bums gznail I:。#Android UI 设计DroldDraw 教程_： Currency Converter步骤零本教程将给你 个

4、简短的介绍丿I：关使JUDroidDraw用户界面设计器來幵发一个在Android 上的GUI应用程序。本教程假设你已经卜载并安装了 Android SDK。本教程也假设你对GUI 编程概念和Java编程语言相当熟悉。步骤一窃陆到 DroidDraw UI Designer步骤二设置根布W为RelativeLayout（ Hl対布局）步骤三选扌憎Layout，标签7Android UI 设计步骤四从Layouts |ft（板屮把一个LmearLayout对象拖放到屏幕顶部屮心位置Absolut eLayout F ram eLayoutRelativeLayout |TableRow|Tabl

5、eLayout步骤五选杼该LmearLayout对象并点击屈ft11 Properties11标签來开始编佈layout屈性值。把宽度11 width改成,200pxM,i 度height改成11130pxB? Apply1來应用改变。WidgetsLayoutsProperties步骤六转到-Widgets”标签IdWidthHeightOrie ntarion+id/widgetJ200冲130pxverticalCApply )Widgets. Layouts Properties(|AutoComplete I Button CheckBox 9:12 PMfEditTextO Rad

6、ioButtonTextViewSpinner 12:15 PM7GHDOID9Android UI 设计步骤七把两个TextView对象和两个EditText对象交杆地拖放到LinearLayout屮S .ill o 10：29AMDroidDrawTextView | EditText TextView |EditText步骤八把i个RadioGroup对象拖放进LinearLayout屮。把两个RadioButton对彖拖放到RadioGroup 中。1S .III C3 10:29AM IDroidDraw1b | I. TextView ut |EditText TextView |

7、EditTextL J RadioButton O RadioButton#Android UI 设计步骤九把一个Button对象拖放到根RelativeLayout中.它在LinearLayout对象卜面它应该和 LinearLayout的右边对齐。IS .ill O 10:29 AMI DroidDraw1 RelativeTextView |EditText)TextView|EditText)丿 RadioButton RadioButtonButton步骤十编粘毎个Textview Xj象的属性值。上山I 个的文木设置成Dollars11,并设置成恤出字亿 式。F面一个TextVie

8、w的文本设賢成EurosX并也设置成顶耀体样式步骤十一如以卜内容编辑上面一个EditText的属性值： id 修改成：+Kl/dollars文本内容设置为空 宽度修改成-lOOpx步骤十一半EurosTextVlew卜面的第-个EditText I :車复步骤十-一-,但是把id设置为+id/euros步骤十二编轲第一个RadioButton属性：文本设覺为Dollars to Euros-,并把它id设哉成+id/dtoe编4H 第个 RadioButton 属性：文本设置为 Euros to Dollars 11 丿 把它 id 设Ptbk1 +id/etodM11C1CXOQAndroi

9、d UI 设计重要注意事项你必须正确地获取id,因为这是你在代码中如何获取搜索到该UI尤素的方式。步骤十三编车li Button屈性：文本修改为Convert、它的id设置hJc+id/convert。 最终的GUI应该像这样：步骤十四点击Generate-按钮來生成XN1L布丿。该xml应像这样： EclitTextandroid: id= n+id/dollarsandroid: layout_width= u100pxftandroid: layout_height= nwrap_ contentandroid:textsize= nl 8sp EclitTextandroid: id=

10、 n0+id/euros and匸oid : iayout_width = n100pxandroid: layout_height= nwrap_ content android: textSize= nl 8sp Buttonandroid: id= n0+i d/con ver tandroid: layout_width= nwrap_ content99 android:layout_height= nwrap_ content android: text= Convertandroid: layout_below= n&+id/widget3199GHDOID15Android U

11、I 设计android: layout_alignRight= d/widget3 1 步骤十五在Eclipse屮创建一个新的Android匸程。从DroidDraw剪切该XML并粘贴瞽换到 res/1 ayout/niam xml 的内容屮。到这里你就可以在Android中运行你的GUE它应该像这样：B .III 3 9:28 PMCurrencyconverterDollarsQoo :Euros(67.0J$ Dollars to EurosEuros to DollarsCon vert步骤十六最后一步是实际的代码货币转换。它不名，你町以用一下代码來査找到你的GUI元索： this.f

12、indViewById(R id. );卜面是完整CunentConverter Activity的代码：package zyf.Currentconverter;ixtpoxt android.app.Activity;ixiport android .os .Bundle;import android .view.View;iMpoxt android.view.View.OnClickListener;inpoxt android.widget.Button;ixport android.widget.RadioButton;iiaport android .widget .Textvi

13、ew;public class Currentconverter 电xtends ActivityiBpleBents OnClickListener Textview dollars;TextView euros;RadioButton dtoe;GHDOID#RadioButton etod;Button convert;/* Called when the activity is first created. */ Overridepublic void onCreate(Bundle icicle) sutler .onCreate (icicle);setcontentview (R

14、. layout. main);dollars = (Textview) this . f indViewByld (R. id . dollars; euros = (Textview) this . f indViewByld (R. id. euros);dtoe = (RadioButton) this . f indViewByld (R. id . dtoe); dtoe.setChecked(true);etod = (RadioButton) this . f indViewByld (R. id . etod); convert = (Button) this . f ind

15、ViewByld (R. id. convert); convert.setOnCiickListener(this);public void onClick(View v) if (dtoeisChecked() convertDollarsToEuros();if (etod.isChecked() ) convertEurosToDollars();protected void convertDollarsToEuros()(double val =Doubledollars .getText () .toString ();/ in a real appr we fd get this

16、 off the 1net euros .setText (Double toString(val * 0.67);pzotectad void convertEurosToDollars()(double val = Double.parseDoubJeeuros .getText .toString (); / in a real appz wefd get this off the 1net dollars .setText (Double. toStringiyaL / 0.67);步骤十七嗯，就是这样。我希塑你喜欢该教朽!。恿见和问题邮件brendandbums Gmail !GHD

17、OID17Android UI 设计#Android UI 设计结果Currentconverter DollarsDollars to Euros Euros to DollarsConvertanDoiD19Android UI 设计DroldDraw 教程二:Table Layout步骤零木教程描述如何创建一个从DroidDraw简单的输入和TableLayout布局。木教程假设你已经 卜载并安装了 Android SDK.本教程也假设你对GUI编程概念和Java编程语言相当熟悉。步骤一皋动DroidDraw用八界血设计器步骤二根布局选择为RelativeLayout布局步骤三21And

18、roid UI 设计步骤四把一个TableLayout对象从Layouts面板中拖放到屏幕顶的屮部。步骤五双击TableLayout-來修改它的屈性。把它的宽度width11改为filljjarent11步骤六把三个TableRow对線从Layouts |血板屮拖方攵到TableLayout对象中。十你拖放TableRow对 彖时，你应该从弹出菜单中选择TableLayouto每一个 TableRow 屮拖放一个 TextView：3 .ill ca io：i4pmDroidDrawTextView TextView TextViewghdoid23Android UI 设计步骤八双击每一个T

19、extView *修改它的属性.修改显示文本如卜图一样：IB .ill C3 1014 PMn| DroidDraw址、 步骤九个TableRow中拖放一个EditText,放在存在的文本右边。0 .III C3 10:14 PMDroidDrawName |Edi 订 extPhoneEditTextE-Mail |EditText步骤十选中TableLayout,修改Stretchable Column（可扩展栏）属性值为1,这将把所仃的EditText widget扩展开來填充满该Table表格。B .III C3 1014 PMDroidDrawName| EditTextPhone|

20、EditTextJE-Mail|EditTextghdoid25Android UI 设计步骤十一B .ill C3 10：14 PM编轲每一个EditText的屈性，让Text文木属性为DroidDraw步骤十二B .III ca 10:14 PM把 个Button拖放到TableLayout下而的右卜角空白处。它应该在TableLayout的外而并和 它右对齐。DroidDraw步骤十三0 .III C3 10：14 PM修改该按钮的屈性，文本设査为DroidDraw步骤十四点d? Generate1按钮来生成xml艾件#GHDOIDAndroid UI 设计步骤十五在Eclipse中，创

21、建一个新的Android匸程步骤十六用第十/i步骤生成的XL1L來替换res/layouts/mian xml文件内容。步骤十七运行你的新工程，你应该在Android中看到你的GUL它应该像这样：B .III C3 Z53PMDroidDrawName PhoneE-Mail1S完成！完整XML文件 TableRow27CICXOQAndroid UI 设计android: id= u&+id/widget55uandroid: layout_width = ufill_parent “ android: layout_height= nwrap_ content android: orien

22、tation= horizontal b EditTextandroid: id=d/widge161android: layout_width = ”wrap_ content “ android: layout_height= nwrap_ content “ android: textSize= 9f18sp bTableRowandroid: id=d/widget56android: layout_width= ufill_parentandroid : iayout_height = nwrap_ contentn android: orientation= horizontal

23、b n?ap_ content99 android: t extSize= T8spbTableRowandroid: id=d/widget57android: layout_width = ufill_parent “ android: layout_height = nwrap_ contentn android: orientation= horizontal b EditTextandroid: id= &-hid/widge163android: layout_width= uwrap_ content “ android:layout_height = nwrap_ conten

24、t“ android: textSize= nl 8 sp 结果29Android UI 设计#Android UI 设计cirmoin#Android UI 设计DroldDraw 教程三:使用LfcstView和array资源步骤零在Eclipse新建一个丁程步骤-创建初始化布局 开启Droi dDraw并创建一个新的Layout 从 Widget列表中拖放一个ListView放入该Layout l|1双击该ListView编辑它的属性 把它的宽、高属性值改为fill_paienf 点击-Applay按钮辺印7:07 PM步骤二创建个Array数组资源注焦 这些便用说明是什对独立的Droi

25、dDraw叮执行文件的。 点击DroidDraw中的Arrays标签 点击-New按钮來添加一个新的Array数组当捉示名称时，使用 对丁嗷组值，使用叮逗号來隔开列表的值 点击Save按钮并把该文件保存为anysxml,保冇在你程res/values H录屮GHDOID31Android UI 设计Widgets Layouts Properties Strings Colors Arrays Support(Save C 科晰)Dmlet电 J步骤三-让你的列农和数组连接在你第一步创建的ListView上双击 修改Entry Array Id屈性为+KiAtems 点击-Apply按钮arr

26、ays/items 生成Layout布局文件并保存它为main xml,保心到你1* res/layouts 口录中Entry Array IdEntry GravityC Apply )步骤四代码使用以卜代码在你的mainActivity.java文件中：/* Called when the activity is first created. */ Ove匸匸idepublic void onCreate(Bundle icicle) /* Called when the activity is first created. */ upr.onCreate(icicle);this .se

27、tTitle (rrDroidDrawM); setContentView (R. layout.main);anD=?oiD#Android UI 设计步骤五完成在Android模拟器中运行你的代码结果MENU33Android UI 设计Android GUI Widget 可视化指导作为一个Java Android机开发员、UI设计若,为了让你的牛活更简叽 主试用DroidDraw 來高速开发你的用户界面。AiialogClockButtonButton 2Button 3 GHDOID#Android UI 设计CheckBoxBoldinciroOQ35Android UI 设计Da

28、tePickersMTWTFS30123456789101112131415161718192021222324252628293031丄Mr45/89/ Required Java init code: DatePicker dp =(DatePicker)this.findViewByld(R.id.widget三7);II for example init to l/27/2008f no callback dp.init(2008, 0r 27, Calendar.SUNDAY, null);DigitalClock9:26:00 pmcddoid#Android UI 设计EditTextEditText 1(