android图形开发工具DroidDraw教程

Jingc

贡献于2012-10-21

字数:6219 关键词: Android开发 移动开发

android图形开发工具DroidDraw教程(英文版),轻松实现类似VS一样的拖放编程 DroidDraw Tutorial Step Zero  This tutorial will give you a brief introduction to developing a GUI application on Android using the DroidDraw user interface designer. This tutorial assumes that you have downloaded and installed the Android SDK. This tutorial also assumes that you are reasonably familiar with concepts in GUI programming and the Java programming language.   Step One Go to the DroidDraw UI Designer.   Step Two Set the root layout to RelativeLayout   Step Three Select the "Layouts" tab.   Step Four Drag and drop a LinearLayout object from the Layouts panel into the top-center of the screen   Step Five Select the LinearLayout object and click on the properties tab to begin editing the layout properties. Change the width to "200px" and the height to "130px" Press "Apply" to apply your changes. Step Six Go to the "Widgets" tab.   Step Seven Drag and drop two TextView objects and two EditText objects into the LinearLayout so that they alternate.   Step Eight Drag and drop a RadioGroup object into the LinearLayout. Drag and drop two RadioButton objects into the RadioGroup.   Step Nine Drag and drop a Button object into the root RelativeLayout below the LinearLayout object. It should align with the right edge of the LinearLayout.   Step Ten Edit the properties of each TextView object. Make text for the upper one read "Dollars" and make its style "bold". Make the lower one read: "Euros" and make its style bold also.   Step Eleven Edit the properties of the upper EditText as follows: Change the id to read: "@+id/dollars"Change the text to be emptyChange the width to be "100px".   Step Eleven and a half Repeat step eleven with the second EditText under the "Euros" TextView, but make the id be "@+id/euros"   Step Twelve Edit the first RadioButton so that its text reads: "Dollars to Euros" and its id is "@+id/dtoe". Edit the second RadioButton so that its text reads: "Euros to Dollars" and its id is "@+id/etod". Important Note: You must get the ids exactly correct, because this is how you will look up the widgets in source code.     Step Thirteen Edit the Button so that its text reads: "Convert" and its id is "@+id/convert". The final GUI should look like:   Step Fourteen Press the "Generate" button to generate the layout XML. It will look something like this   Step Fifteen In Eclipse create a new android project. Cut and paste the XML from DroidDraw to replace the contents of res/layout/main.xml. At this point you should be able to run your GUI in Android. It should look something like this:   Step Sixteen The last step is to actually code the currency conversion. There's not much to it, you can look up your GUI elements with: this.findViewById(R.id.). Here is the complete code for the CurrencyConverter activity: import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.RadioButton; import android.widget.TextView; public class CurrencyConverter extends Activity implements OnClickListener { TextView dollars; TextView euros; RadioButton dtoe; RadioButton etod; Button convert; /** Called when the activity is first created. */ @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.main); dollars = (TextView)this.findViewById(R.id.dollars); euros = (TextView)this.findViewById(R.id.euros); dtoe = (RadioButton)this.findViewById(R.id.dtoe); dtoe.setChecked(true); etod = (RadioButton)this.findViewById(R.id.etod); convert = (Button)this.findViewById(R.id.convert); convert.setOnClickListener(this); } public void onClick(View v) { if (dtoe.isChecked()) { convertDollarsToEuros(); } if (etod.isChecked()) { convertEurosToDollars(); } } protected void convertDollarsToEuros() { double val = Double.parseDouble(dollars.getText().toString()); // in a real app, we'd get this off the 'net euros.setText(Double.toString(val*0.67)); } protected void convertEurosToDollars() { double val = Double.parseDouble(euros.getText().toString()); // in a real app, we'd get this off the 'net dollars.setText(Double.toString(val/0.67)); } }   Step Seventeen Well, that's it. I hope you enjoyed the tutorial. Comments and Questions to jinlantao on gmail! 第零步 本教程将向您简单介绍一下使用DroidDraw UI设计软件开发Android GUI应用程序。 本教程假设您已经下载并安装了Android的SDK。 本教程还假设你有一定的GUI编程和Java语言编程的基础。 第一步 转到 DroidDraw UI设计软件。 第二步 首先设置根布局为RelativeLayout(相对布局) 第三步 选择“Layouts”选项卡。 第四步 从布局面板中,将一个LinearLayout对象拖放在屏幕顶部中心位置。 第五步 选择LinearLayout对象,在属性选项卡上单击"Properties"布局属性,开始编辑的。 改变Width为“200 px”,Height为“130px” 点击“Apply”应用更改。 第六步 转到“Widgets”标签。 第七步 把两个EditText和两个TextView插入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" 十二步 编辑第一个单选按钮,以便其内容为"Dollars to Euros",并把它id 设置成"@+id/dtoe"。 编辑第二个单选按钮,以便其内容为"Euros to Dollars ",并把它id 设置成"@+id/etod"。 重要注意事项: 你必须得到的ID完全正确,这是因为在源代码中你将通过ID查找相应的部件。 十三步 编辑按钮,内容为“Convert”和它的ID是“@+id/convert”。 最终的图形用户界面应该是这样的: 十四步 按“Generate”按钮以生成布局的XML。 十五步 在Eclipse中创建一个新的Android项目。 剪切和粘贴DroidDraw的XML内容,以取代res/layout/main.xml。 此时运行, 它应该是这个样子: 十六步 最后一步是实际货币转换的代码。 没有多少吧,你可以使用代码this.findViewById(R.id.)查找你的GUI元素, 下面是完整CurrentConverter Activity 的代码: 1 import android.app.Activity; 2  import android.os.Bundle; 3  import android.view.View; 4  import android.view.View.OnClickListener; 5  import android.widget.Button; 6  import android.widget.RadioButton; 7  import android.widget.TextView; 8  9  public class CurrencyConverter extends Activity implements OnClickListener { 10     TextView dollars; 11     TextView euros; 12     RadioButton dtoe; 13     RadioButton etod; 14     Button convert; 15     16     /** Called when the activity is first created. */ 17     @Override 18     public void onCreate(Bundle icicle) { 19         super.onCreate(icicle); 20         setContentView(R.layout.main); 21          22         dollars = (TextView)this.findViewById(R.id.dollars); 23         euros = (TextView)this.findViewById(R.id.euros); 24          25         dtoe = (RadioButton)this.findViewById(R.id.dtoe); 26         dtoe.setChecked(true); 27         etod = (RadioButton)this.findViewById(R.id.etod); 28          29         convert = (Button)this.findViewById(R.id.convert); 30         convert.setOnClickListener(this); 31     } 32      33     public void onClick(View v) { 34         if (dtoe.isChecked()) { 35             convertDollarsToEuros(); 36         } 37         if (etod.isChecked()) { 38             convertEurosToDollars(); 39         } 40     } 41     42     protected void convertDollarsToEuros() { 43         double val = Double.parseDouble(dollars.getText().toString()); 44         // in a real app, we'd get this off the 'net 45         euros.setText(Double.toString(val*0.67)); 46     } 47     48     protected void convertEurosToDollars() { 49         double val = Double.parseDouble(euros.getText().toString()); 50         // in a real app, we'd get this off the 'net 51         dollars.setText(Double.toString(val/0.67)); 52     } 53 } 十七步 嗯,就是这样。 我希望你喜欢该教程。 将你的意见和建议Gmail给 brendan.d.burns!

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享文档获得金币 ]
0 人已下载

下载文档

相关文档