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));
	}
}