新版Android开发教程 笔记十一--可视化UI设计DroidDraw
【网学网提醒】：网学会员为需要朋友们搜集整理了新版Android开发教程 笔记十一--可视化UI设计DroidDraw相关资料，希望对各位网友有所帮助!
aokikyon(网学)贡献
Android编程基础
封面
1
Android编程基础
DroidDrawGUI可视化设计器——DroidDraw
DroidDraw是一个基于JavaSwing的Android界面设计器,可以通过它来生成复杂的AndroidLayoutXML文件,Android的Layout和SwingLayout中有很好的对应,设计器的代码编写起来比较容易.
2
Android编程基础AnDroidDraw
AnDroidDraw是一个与DroidDraw集成的Android应用程序,它允许你从DroidDraw应用程序下载你的GUIs,也允许你在一个Android设备上预览你的GUIs.下载DroidDraw
步骤零
下载AnDroidDraw.apk使用:adbinstallAnDroidDraw.apk把它安装到你的Android设备上安装一个端口转发规则:adbforwardtcp:6100tcp:7100
步骤一
在你的Android设备上运行AnDroidDraw,你应该看到像这样的:
步骤二
在你的电脑上运行DroidDraw,并且创建一个GUI,(获取更多关于创建GUI的信息,请看教程1,教程2,教程3.)接下来从DroidDraw菜单中选择"Project"->"SendGUItoDeviec"
3
Android编程基础
步骤三
现在你应该在Android屏幕上看到你新创建的GUI的像这样的xml:
步骤四
点击"PreviewGUI"按钮来预览你的GUI.
步骤五
当你结束时,点击向后的箭头,来返回到AnDroidDraw的主屏幕.记住,如果你感兴趣,你可以在文本框中编辑该XML文件,并且再次点击"PreviewGUI"来查看你的修改.然而,这些修改将不会返回到DroidDraw.
步骤六
大功告成!??/Comments/Bugsbrendan.d.burns在gmail上.
4
Android编程基础CurrencyDroidDraw教程一:CurrencyConverter
步骤零
本教程将给你一个简短的介绍开关于使用DroidDraw用户界面设计器来开发一个在Android上的GUI应用程序.本教程假设你已经下载并安装了AndroidSDK.本教程也假设你对GUI编程概念和Java编程语言相当熟悉.
步骤一
登陆到DroidDrawUIDesigner
步骤二
设置根布局为RelativeLayout(相对布局)
步骤三
选择"Layout"标签
5
Android编程基础
步骤四
从Layouts面板中把一个LinearLayout对象拖放到屏幕顶部中心位置
步骤五
选择该LinearLayout对象并点击属性"Properties"标签来开始编辑layout属性值.把宽度"width"改成"200px",高度"height"改成"130px"点击"Apply"来应用改变.
步骤六
转到"Widgets"标签
6
Android编程基础
步骤七
把两个TextView对象和两个EditText对象交替地拖放到LinearLayout中
步骤八
把一个RadioGroup对象拖放进LinearLayout中.把两个RadioButton对象拖放到RadioGroup中.
7
Androi
d编程基础
步骤九
把一个Button对象拖放到根RelativeLayout中,它在LinearLayout对象下面.它应该和LinearLayout的右边对齐.
步骤十
编辑每个TextView对象的属性值.上面一个的文本设置成"Dollars",并设置成"bold"字体样式.下面一个TextView的文本设置成"Euros",并也设置成"bold"字体样式.
步骤十一
如以下内容编辑上面一个EditText的属性值:id修改成:"@+id/dollars"文本内容设置为空宽度修改成"100px"
步骤十一半
在"Euros"TextView下面的第二个EditText上重复步骤十一,但是把id设置为"@+id/euros"
步骤十二
编辑第一个RadioButton属性:文本设置为"DollarstoEuros",并把它id设置成"@+id/dtoe"编辑第二个RadioButton属性:文本设置为"EurostoDollars",并把它id设置成"@+id/etod"
8
Android编程基础
重要注意事项
你必须正确地获取id,因为这是你在代码中如何获取搜索到该UI元素的方式.
步骤十三
编辑Button属性:文本修改为"Convert",它的id设置成"@+id/convert".最终的GUI应该像这样:
步骤十四
点击"Generate"按钮来生成XML布局.该xml应像这样:
Android编程基础
android:text="Dollars"android:textStyle="bold">
步骤十五
在Eclipse中创建一个新的Android工程.从DroidDraw剪切该XML并粘贴替换到res/layout/main.xml的内容中.到这里你就可以在Android中运行你的GUI.它应该像这样:
步骤十六
最后一步是实际的代码货币转换.它不多,你可以用一下代码来查找到你的
GUI元素:this.findViewById(R.id.);下面是完整CurrentConverterActivity的代码:packagezyf.CurrentConverter;importandroid.app.Activity;importandroid.os.Bundle;importandroid.view.View;importandroid.view.View.OnClickListener;importandroid.widget.Button;importandroid.widget.RadioButton;importandroid.widget.TextView;publicclassCurrentConverterextendsActivityimplementsOnClickListener{TextViewdollars;TextVieweuros;RadioButtondtoe;
11
Android编程基础
RadioButtonetod;Buttonconvert;/**Calledwhentheactivityisfirstcreated.*/@OverridepublicvoidonCreate(Bundleicicle){supersuper.onCreate(icicle);setContentView(R.layout.main);dollars=(TextView)thisthis.findViewById(R.id.dollars);euros=(TextView)thisthis.findViewById(R.id.euros);dtoe=(RadioButton)thisthis.findViewById(R.id.dtoe);truedtoe.setChecked(truetrue);etod=(RadioButton)thisthis.findViewById(R.id.etod);convert=(Button)thisthis.findViewById(R.id.convert);thisconvert.setOnClickListener(thisthis);}publicvoidonClick(Viewv){if(dtoe.isChecked()){convertDollarsToEuros();}if(etod.isChecked()){convertEurosToDollars();}}protectedvoidconvertDollarsToEuros(){doubleval=Double.parseDouble(dollars.getText().toString());//inarealapp,we'dgetthisoffthe'neteuros.setText(Double.toString(val*0.67));}protectedvoidconvertEurosToDollars(){doubleval=Double.parseDouble(euros.getText().toString());//inarealapp,we'dgetthisoffthe'netdollars.setText(Double.toString(val/0.67));}}
步骤十七
嗯,就是这样.我希望你喜欢该教程.意见和问题邮件brendan.d.burnsGmail!
12
Android编程基础
结果
13
Android编程基础:DroidDraw教程二:TableLayout
步骤零
本教程描述如何创建一个从DroidDraw简单的输入和TableLayout布局.本教程假设你已经下载并安装了AndroidSDK.本教程也假设你对GUI编程概念和Java编程语言相当熟悉.
步骤一
启动DroidDraw用户界面设计器
步骤二
根布局选择为RelativeLayout布局
步骤三
选择"Layouts"标签
14
Android编程基础
步骤四
把一个TableLayout对象从Layouts面板中拖放到屏幕顶的中部.
步骤五
双击"TableLayout"来修改它的属性.把它的宽度"width"改为"fill_parent"
步骤六
把三个TableRow对象从Layouts面板中拖放到TableLayout对象中.当你拖放TableRow对象时,你应该从弹出菜单中选择TableLayout.
步骤七
每一个TableRow中拖放一个TextView:
15
Android编程基础
步骤八
双击每一个TextView来修改它的属性,修改显示文本如下图一样:
步骤九
每一个TableRow中拖放一个EditText,放在存在的文本右边.
步骤十
选中TableLayout,修改"StretchableC
olumn"(可扩展栏)属性值为1,这将把所有的EditTextwidget扩展开来填充满该Table表格.
16
Android编程基础
步骤十一
编辑每一个EditText的属性,让Text文本属性为""
步骤十二
把一个Button拖放到TableLayout下面的右下角空白处.它应该在TableLayout的外面并和它右对齐.
步骤十三
修改该按钮的属性,文本设置为"OK"
步骤十四
点击"Generate"按钮来生成.xml文件
步骤十五
在Eclipse中,创建一个新的Android工程
17
Android编程基础
步骤十六
用第十五步骤生成的XML来替换res/layouts/mian.xml文件内容.
步骤十七
运行你的新工程,你应该在Android中看到你的GUI.它应该像这样:
完成!完整XML文件
Android编程基础
android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Name">
Android编程基础
android:textSize="18sp">
结果
20
Android编程基础: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目录中
21
Android编程基础
步骤三-让你的列表和数组连接
在你第一步创建的ListView上双
击修改"EntryArrayId"属性为"@+id/items"点击"Apply"按钮生成Layout布局文件并保存它为main.xml,保存到你工程res/layouts目录中
步骤四
-代码
使用以下代码在你的mainActivity.java文件中:/**Calledwhentheactivityisfirstcreated.*/@OverridepublicvoidonCreate(Bundleicicle){/**Calledwhentheactivityisfirstcreated.*/supersuper.onCreate(icicle);thisthis.setTitle("DroidDraw");setContentView(R.layout.main);}
22
Android编程基础
步骤五-完成
在Android模拟器中运行你的代码
结果
23
Android编程基础AndroidGUIWidget可视化指导
作为一个JavaAndroid手机开发员,UI设计者,为了让你的生活更简单.尝试用DroidDraw来高速开发你的用户界面.
AnalogClock
Button
24
Android编程基础
CheckBox
25
Android编程基础
DatePicker
DigitalClock
26
Android编程基础
EditText
Gallery
27
Android编程基础
ImageButton
ImageView
ProgressBar
Spinner
TimePicker
28
Android编程基础
RadioButton
Android编程基础
android:checked="false"android:layout_weight="0"android:layout_gravity="left"android:textStyle="bold_italic">
TextView
30
Android编程基础
封面
31
1