AndroidDroidDrawUI可视化设计器

1、androiddevelopersDroidDrawAndroid UI设计器anDAOiDandroidGUI可视化设计器DroidDrawDroidDiaw是一个慕J' Java Swing的Android界面设计器，可以通过它来牛成复杂的Android Layout XAIL丈件，Android的Layout和Swing Layout屮有很好的对丿'V,设计器的代码编写 起来比较容易。3C1CXOQandroid#C1CXOQandroid#C1CXOQandroidAnDroidDrawAiiDioidDraw是一个与DroidDraw集成的Aiidioid应用程序，它

2、允许你从DioidDiaw应用程 序卜载你的GUIs,也允许你在一个Aiidioid设备匕预览你的GUIs.下叔DroidDraw步骤零. 卜载;AnDroidDraw.apk 使用：adb install AnDroidDraw.apk把它安装到你的Android设备上 安装一个端 I转发规则：adb forwardtcp:6100 tcp:7100步骤一4你的Android设备I运行AnDroidDraw>你丿“该看到像这样的:步骤二在你的电脑I运行DroidDraw,并H.创建一个GUI,（获取更多关创建GUI的信息，请看 教穆 1、教程 2、教程 3 ,）接卜來从 DroidDr

3、aw '1'- '选样” Project”->”Send GUI to Deviec”5android步骤三现在你应该在Android屏幕匕看到你新创建的GUI削像这样的xml：步骤四点击”Preview GUI”按钮來预览你的GUI。步骤五当你结束时，点击向后的箭头，來返回到AnDroidDraw的主屏幕。记住，如果你感兴趣，你町以在文本框屮编徘该XML文件，并H再次点击”Preview GUI” 來查看你的修改。然ifu,这些修改将不会返M到DroidDraWo步骤六人功告成！ ？ ？ /Comments/Bugs brendandbums 在 gmail 上

4、。cirmoinDroidDraw 教程一：Currency Converter步骤零I r将给你个简短的介绍幵关使HI DroidDraw用户界而设计器來开发一个在Android 上的GUI应用程序。本教程假设你已经卜墩并安装了 Android SDK。本教程也假设你对GUI 编程概念和Java编程语言相当熟悉。步骤一窃陆到 DroidDraw UI Designer步骤二设置根布局为RelativeLayout（ 111对布局）步骤三选抒” Layout”标签|AbsoluteLayout |FrameLayout JLinearLayout|RelativeLayout |TableRo

5、w |TableLayoutandroid步骤四|AbsoluteLayout |FranneLayout从Layouts |ft（板屮把一个LinearLayout对象拖放到屏幕顶部中心位置|RelativeLayout (TableRow |TableLayout步骤五选杼该LinearLayout对象并点击屈性"Properties”标签來开始编轿layout属性值。把宽度 “widtlT 改成 ”200px 笃高度” height” 改成” 130pxM点击” Apply”來应用改变。选杼该LinearLayout对象并点击屈性"Properties”标签來开始编轲

6、layout属性值。把宽度widtl!改成 M200pxM,高度“height”改成 T30px”I i ” Apply，來应用改变。步骤六转至Widgets”标签Widgets. Layouts Properties|AutoComplete Button _ CheckBox 9:12 PM|EditText0 Radio&uttonTextViewSpinner 4 >12:15 PM7androidandroidanD=?oiDandroid步骤七把两个Text*iew对象和两个EditText対象交桥地拖放到LinearLayout屮 .| 口）10：29AMDroid

7、DrawTextView | EditText TextView |EdltText步骤八把 个RadioGroup刈遂拖放进LinearLayout屮 把两个RadioButton对织拖放到RadioGroupandroid步骤九把一个Button对象拖放到根RelativeLayout中，它在LmearLayout对象卜面。它应该和 LinearLayout的右边对齐。S .|1 口 10:29 AMDroidDrawTextView lEditTextTextView|EditTextRadioButtonO RadioButtonButt on步骤十编轲每个TextView对象的属性值

8、。训i一个的文本设置成“Dollars",并设置成“bold"字体样 式。卜面一个TextView的文本设置成“Euros",并也设置成“bold”字体样式。步骤十一如以卜内容编辑上面一个EditText的属性值： id 修改成：”+id/dollars“文本内容设置为空宽度修改成”100px”步骤十一半右严Euros”Text7ev卜|侨的第个EditText上电复步骤卜，但是把id设耗为"+id/euros"步骤十二编轴第一个RadioButton属性:文本设置为"Dollars to Euros",并把它id设置成”+

9、id/dtoe" 编轴第个RadioButton属性：文本设直为"Euros to Dollais ” J把它id设置成”+idetod”#android重要注意事项你必须正确地获取id,因为这是你在代码中如何获取搜索到该UI尤素的方式。步骤十三编$l| Button 14性：文本修改为"Convert"、它的 id 设置成"+id/convert”。 最终的GUI应该像这样：步骤十四点击”Generate”按钮来生成XML布局。该xml应像这样： <?xml version= nl. 0n encoding= nutf-8nl>

10、<RelativeLayoutandroid: id=d/wi dge t30 "android: layout_widrh= "fi 11_ paren t99 android: layout_height = 99fi 11_ paren tfrxmlns : android= "http:/schemas. android, com/apk/res/android <LinearLayoutandroid: id= n-hid/widget31"android: layout_width= u180pxnandroid: layout_

11、height = n228pxnandroid:orientation= "vertical “android: layout_alignParentTop= "true android: layout_centerHorizontal= "true<TextViewandroid: id= n&+id/widget41 uandroid: layout_width= "wrap_ con ten t99android: layout_height= Hwrap_ con ten tnanDoiD11androidandroid: text

12、= "Dollars"android: texts tyle= "bold9K></TextView><EditTextandroid: id= d/dollars "android: layout_width= U1 OOpx1android: layout_height= nwrap_ con ten t99 android:textsize= nl 8sp z></EditText> <TextViewandroid: id=d/wi dget43 nandroid: layout_width= nw

13、rap_ con ten t99 android: layout_height= nwrap_ con ten trr android: text= "Euros nandroid: texts tyle=Tex <EditTextandroid: id= "+id/euros”android: layout_wid th= n100pxn android: layout_height= "wrap_ con ten t99 android: textSize=匸 Text<RadioGroupandroid: id= "+id/widget

14、45"android: layout_width= f9wrap_ con ten tn android: layout_height= "wrap_ con ten tn android: orientation= "vertical 9f> <RadioButtonandroid: id= "+id/dtoe "android: layout_width= uwrap_ con ten tn android:layout_height= Hwrap_ oontentn android:text = "Dollars t

15、o Eurosb</RadioButton><RadioButtonandroid: id= n&+id/etodnandroid: layout_width= nwrap_ con ten tn android: layout_height= "wrap_ con ten t99 android:text = "Euros to Dollars</RadioButton></RadioGroup></LinearLayout><Buttonandroid: id= d/con vertnandroid:

16、layout_width= "wrap_ con ten t,r android: layout_height= nwrap_ con ten t99 android: text= f 9Convertnandroid: layout_below=d/wi dge t3199GHDOID13androidandroid: layout_align Right = n+id/wi dge t31 </Button></RelativeLayout>步骤十五在Eclipse屮创建一个新的Android匚程。从DroidDraw剪切该XNIL并粘贴瞽换到 res/l

17、ayout/main.xnil 的内 容中。到这里你就可以在Aiidioid中运行你的GUIo它应该像这样：B .III 3 9:28 PMCurrencyC onv erterDollarsQoo:Euros(67.0 一 Dollars to Euros_： Euros to DollarsCon vert步骤十六最后一步是实际的代码货币转换。它不多，你町以用一下代码来査找到你的GUI尤索： this.findViewById(R.id.vid>);卜面是完整 Currentconverter Activity 的代码：package zyf.Currentconverter;imp

18、ort android.app.Activity;inport android.os.Bundle;import android.view.View;import android.viewView.OnClickListener;import android.widget.Button;import android.widget.RadioButton;import android.widget.Textview;public class Currentconverter extends Activityinplemonts OnClickListener Textview dollars;T

19、extview euros;RadioButton dtoe;aHD=?OID15androidRadioButton etod;Button convert;/* Called when the activity is first created. */Overridepublic void onCreate(Bundle icicle) super.onCreate(icicle);setcontentview(R.layout. main);dollars = (Textview) this. findViewByld (R. id. dollars); euros = (Textvie

20、w) this. findViewByld (R. id. euros);dtoe = (RadioButton) this.findViewByld(R.id. dtoe); dtoesetChecked(true);etod = (RadioButton) this. findViewByld (R. id. etod); convert = (Button) this findViewByld (R id. convert); convert.setOnClickListener(this);public void onClick(View v) if (dtoeisChecked()c

21、onvertDollarsToEuros();if (etodisChecked() convertEurosToDollars();protected void convertDollarsToEuros() double val =Double.parseDouble (dollars .getText () . toString (); / in a real appr we1d get this off the 1 net euros setText (Double. toStringvl * 0.67);protected void convertEurosToDollars() d

22、ouble val = Double.(euros .getText () . toString (); / in a real appr we'd get this off the 1net dollars . setText (Double. toStringZa' / 0.67);步骤十七嗯就足这样。我希塑你喜欢该教&见和问题邮件brendandbums Gmail !ghdoid17android#android结果Currentconverter DollarsDollars to Euros Euros to DollarsConvertMENUanD=?o

23、iD19androidDroidDraw 教程二:Table Layout步骤零本教程描述如何创建一个从DroidDraw简单的输入和TableLayout布局。木教程假设你己经 卜载并安装了 Android SDK.本教程也假设你対GUI编程概念和Java编榨语言相当熟悉。步骤一启动DroidDraw用丿、'界面设计器步骤二根布局选择为RelativeLayout布局步骤三选押 Jyouts”标签WidgepertiesLayouts|AbsoluteLayout |FrameLayout |LinearLayout|RelativeLayout |TableRow |TableLa

24、yout HD=?OID21android步骤四把一个TableLayout对象从Layouts面板中拖放到屏幕顶的+部。.ill10:14 PMDroidDrawTableLayout步骤五双击”TableLayout”來修改它的属性。把它的宽度Fdth”改为nfiU_parenf步骤六把三个TableRow対彖从Layouts面板屮拖放到TableLayout刈象中。当你拖放TableRow对 彖时，你应该从弹lU菜单中选择TableLayoutoB .ill £3 10:14 PMDroidDrawTableRowTableRowTableRow步骤七每一个TableRow中拖

25、放一个TextView3 .ill ca io：i4pmDroidDrawTextView TextView TextView#android步骤八双击每一个TextView *修改它的属性.修改显示文本如卜图一样:步骤九TableRow中拖放一个EditText,放在存在的文本右边。S .III C3 10:14 PMPhoneEditTextE-Mail |Edi订extName |Edi 订 extDroidDrawIB .ill C3 1014 PMn| DroidDraw23android#android步骤十选中TableLayout»修改”Stretchable Col

26、umn”（可扩展栏）属性值为1,这将把所有的EditText widget扩展开来填充满该Table表格。B .ill C3 1OH4PMDroidDrawName|EditTextPhone|EditTextE-Mail|EditTextGHDOID#androidB .ill C3 10：14 PMB .III ca 10:14 PMDroidDraw步骤十一编轲每一个EditText的屈性.让Text文木屈性対'DroidDraw步骤十二把 个Button拖放到TableLayout卜而的右卜-角空白处。它应该在TableLayout的外面并和 它右对齐。#android#and

27、roid步骤十三修改该按钮的屈性，文本设宜为”OK?0 .III C3 10:14 PMDroidDraw#android0k_步骤I 四点rGenerate”按饮來生成xml文件anD=?oiD#android步骤十五在Eclipse中，创建一个新的Android匸程步骤十六用第I di步骤牛成的XAIL來替换res/layouts/nnanxnl文件内容。步骤十七运行你的新匸程，你应该在Android 'P看到你的GUI.它应该像这样:B .III 3 2:53 PMDroidDrawNameTPhoneJE-Mail )完成!完整XML文件<?xnl version= nl

28、. 0u encoding= nutf-8ul><RelativeLayoutandroid: id= "0-f-i d/wi dge 149 "android: layout_width= ufill_paren tn android: layout_height = nfi 11_parent" xmlns : android= "http:/schemas. android, com/apk/res/android9h> <TableLayoutandroid: id=d/wi dge t54 "android:

29、layout_height = "160pxnandroid:orientation= "vertical99android:stretchColumns= nl"android: layout_alignParentTop= "true “android: layout_centerHorizontal= "true99android: layout_width= "fi 11_parent z/><TableRowGHDOID25androidandroid: id= "+id/widget55"a

30、ndroid: layout_width= "fill_parent99 android: layout_height= "wrap_ con ten t99 android: orientation= "horizontal b <TextViewandroid: id=d/wi dge t5899android: layout_width= nwrap_ con ten t99 android: layout_height= nwrap_ con ten t99 android: text= "Name</TextView><

31、EditTextandroid: id=d/wi dge 161"android: layout_width= nwrap_ con ten tn android: layout_height= nwrap_ oon ten t99 android: textSize= T8spb</EditText></TableRow><TableRowandroid: id= -f-i d/wi dge t56nandroid: layout_width= nfill_parent “ android: layout_height= nwrap_ con ten

32、tn android: orientation= "horizontal b <TextViewandroid: id= "+id/widg“59"android: layout_width= nwrap_ con ten t99 android: layout_height= "wrap_ oon ten t99 android:text= "Phoneb</TextView><EditTextandroid:id= "+id/widget62"android: layout_width= uwra

33、p_ con ten t99 android:layout_height= Hwrap_ con tentn android: textSi ze= "18sp b</EditText></TableRow><TableRowandroid: id=d/wi dge t5 7 "android: layout_width= "fill_parent99 android: layout_height= rrwrap_ con ten tn android: orientation= "horizontal b <Text

34、Viewandroid: id= "&-hi d/wi dge t60"android: layout_width= nwrap_ con ten tn android:layout_height= Hwrap_ con tentn27androidandroid: text= "E-Mail ,f></TextView><EditTextandroid: id= ”+id/widget63"android: layout_width= nwrap_ con ten tn android: layout_height= u

35、wrap_ con ten t99 android: textsize= T8spb</EditText></TableRow></TableLayout<Buttonandroid: id=d/wi dge t64nandroid: layout_width= nwrap_ con ten tr android:layout_height= "wrap_ con tent " android:text= "Buttonuandroid: layout_below= rr&i d/wi dge t5499 android

36、: layout_alignRight=d/wi dge t54 9b></Button></RelativeLayout>结果MENUaHD=?OID#androidDroidDraw教程三:使用LlstView和array资源步骤零在Eclipse新建一个丁程步骤-创建初始化布局 开启DroidDraw并创建一个新的Layout 从 Widget列表中拖放一个Listview放入该Layout中 双击该ListView编辑它的属性 把它的宽、高属性值改为”点击Vtpplay"按钮 辺 7:07 PM步骤二创建个Array数组资源注意:这些使用说明是针

37、对独立的DroidDraw可执行文件的。 点击DroidDraw中的"Arrays”标签 点击”New”按钮來添加一个新的An-ay数组当提示名称时,使用”items”对于数组值,使用叮逗号来隔开列表的值点击"Save”按钮并把该文件保存为arrays.xml，保存在你I 程revalues H录屮29C1CXOQandroidNameitemsNew CDeletePropertiesStringsColorsArraysSupportWidgets LayoutsValueitem2Jtem3Jtem-4jtem-5Jtem-631android#android步骤三让

38、你的列农和数组连接在你第一步创建的ListView上双击 修改,Entry Array Id” 属性为”+id/items"点击” Apply”按钮arrays/items 生成Layout 件并保存它为nminxinl,保存到你1.® res/layouts LI录屮Entry Array IdEntry GravityC Apply )步骤四代码使用以卜代码在你的mauiA.ctivity.java文件中：/* Called when the activity is first created. */ Overridepublic void onCreate(Bundl

39、e icicle) /* Called when the activity is first created, superonCreate(icicle);this setTitle (,fDroidDraw,f); setcontentview (R. layout. main);GHDOID#android0RDO 17:48OnpnMnkn步骤五完成往Android模拟器中运行你的代码结果DroidDraw 制诰 AndroidBlackBerrySymbia nJ2MEJavaFXBronchoaHD=?OID#androidAndroid GUI Widget 可视化指导作为一个Ja

40、va Android手机开发员、UI设计若，为了让你的牛活更简单尝试用DroidDraw 来高速开发你的用户界面。AnalogClockQ 0 033android<AnalogClockandroid: id= "&-f-id/clocklnandroid: layout_width= nwrap_ con ten tn android: layout_height= nwrap_ con ten t99 />ButtonButto n 1Button 2 |Button 3/<Button android:id = U&id/buttonln a

41、ndroid: text= "Label “ android: layout_width= nfi 11_ paren tn android: layout_height = nfill_ paren tn/ > <Buttonandroid: id =d/bu t ton 2f,android: text= "Label99 android: layout_width= nfill_ paren tn android: lay out _height= nfill_paren tn android: typeface= "serif"/&g

42、t;<Buttonandroid:id = "0id/button3" android: text= "Label99android: layout_width= 99fi 11_parentn android: layout_height= "fill_parent “ android: textStyle= nbold i talicu/>#androidCheckBox PlainSerii Bold口 Italic<CheckBoxandroid: id= 9tid/plain_ cb “ android: text= &quo

43、t;Plain "android: layout_width= nwrap_ con ten t9T android: layout_height= nwrap_ con ten tn /><CheckBoxandroid: id= "-t-id/seri f_ cb " android: text= "Serif" android: layout_width= "wrap_ con ten tn android: layout_height= "wrap_ con ten tn android: typefac

44、e= nserif"/><CheckBoxandroid: id= "&-f-id/bold_ cb " android: text= "Bold"android: layout_width= nwrap_ con ten tn android:layout_height= nwrap_ con tentn android: text Style= uboldn/><CheckBoxandroid: id = "+id/i talic_cb " android: text= "Ita

45、lic99android: lay out _width= 9fwrap_ con ten tn android: layout_height = nwrap_ con ten t99 android:textstyle= "italic"/>aHD=?OID#androidDatePicker5 MTWT FS30 31123 456 78910 111213 14151617 181920 21222324 252627 28 29 30 3123 4567 89<DatePickerandroid: layout_width= uwrap_ con ten

46、 t99android: layout_height= 9rwrap_ con ten tu >/ Required Java init code: DatePicker dp =(DatePicker)this.findViewByld(R.id.widget27);/ for example init to 1/27/2008, no callback dp.init(2008, 0, 27, Calendar.SUNDAYz null);DigitalClock9:26:00 pm<DigitalClockandroid: id=d/di gi tai cl ock99and

47、roid: layout_width= 9fwrap_ con ten tn android: layout_height = nwrap_ con ten t z7 >35androidEditTextEditText 1 (206)555-1212<EditTextandroid: id =d/edi ttextl"android: text = nEdi tText 1"android: layout_width= "wrap_ con ten tn android: layout_height = uwrap_ con ten tu />

48、<EditTextandro id: id =d/bu t ton 2"android: text = (206) 555-121299android: layout_width= nwrap_ con ten tnandroid: layout_height= ffwrap_ con ten tu android: typeface= "serif99android: phoneNumber = "true "/><EditTextandroid: id = 996+i d/password99android: text = &quo

49、t;SuperSecretnandroid: layouc_width= "wrap_ con ten tandroid: layout_height= "wrap_ con ten t99android: texts tyle= "bold I i talic99 android: password= "true "/>Gallery<Galleryandroid: id=d/gallery99GHDOID#androidandroid: layout_width= nwrap_ con ten tn android: layou

50、t_height= nwrap_ con ten t99/ >ImageButtonCmageButtonandroid: id=d/imagebutton "android: src= 99& dr a wabl e/brush “ android: layout_width= nwrap_ con ten tn android: layout_height = "wrap_ con tent9fI >IinageViewCmageViewandroid: id=d/imagebutton "android: src= 99& dr

51、a wabl e/brush 11 android: layout_width= "wrap_ con ten tv android: layout_height= nwrap_ con ten tuI >ProgressBar<ProgressBarandroid: id=业+id/progress “ android: layout_width= nwrap_ con ten tn android: layout_height= nwrap_ con ten t99/ >SpinnerSpinner<Spinnerandroid: id= n+id/wid

52、getl99android: layout_width= nfill_parent “ android: layout_height= uwrap_ con ten t android: drawSelectorOnTop= 9rfalse "/>TiinePicker12:15 PM37C1CXOQandroid<TimePickerandroidandroidandroid:id=d/wi dge t3 n:layout width= "wrap content97:laRadioButton000®yjlaineriold p s B一 Ur a

53、p con ten t99 >Bold & Italic#android#android<RadioGroupandroid: id= n&+id/widgetl"android: layout_width= nwrap_ con ten t9,android: layout_height= nwrap_ con ten tnxmlns: android= "http:/schemas. android, com/apk/res/android,r android:orientation= vertical b<RadioButtonandroid: id= r,&-hid/widget2"android: layout_width= "wrap_ con ten tnandroid: layout_height= "wrap_ con ten t99android: text= "Plain99android: checked= nfalse99android: lay out _gravity= 99 1 eftn android: layout_weight= "09></RadioButton><Radi