DroisDraw教程（一）

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 empty Change 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.<id>). Here is the complete code for the CurrencyConverter activity:   Step Seventeen Well, that's it. I hope you enjoyed the tutorial. Comments and Questions to brendan.d.burns on gmail! 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)); } }