Droid Draw

Droid Draw Beta

Website. 

http://www.droiddraw.org/

Tool: 안드로이드 폰을 위한 UI를 미리 그려볼 수 있는 프로그램

지원 운영체제: 맥, 윈도우, 리눅스

튜토리얼

Tutorial 1: Currency Converter

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. - DroidDraw UI Designer를 실행한다. Step Two Set the root layout to RelativeLayout - RelativeLayout으로  Root Layout을 설정한다. - 만들고자 하는 어플의 스크린 사이즈도 설정한다(여기서는 QVGA Landscape으로 설정하였다). * Screen Size QVGA Landscape (320*480 가로가 긴 형태) QVGA Portrait (320*480 세로가 긴 형태) HVGA Landscape (480*800 가로가 긴 형태) HVGA Portrait (480*800 세로가 긴 형태) Step Three Select the "Layouts" tab. - Screen 우측의 "Layout'을 선택한다. Step Four Drag and drop a LinearLayout object from the Layouts panel into the top-center of the screen. - 레이아웃 패널에서 LinearLayout 오브젝트를 스크린의 top-center(상단 가운데)로 드래그 & 드랍한다. 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. - LinearLayout 오브젝트를 선택하고 우측의 properties 탭을 선택하여 레이아웃 오브젝트의 속성(properties)을 편집한다. 넓이(width)를 200px로, 높이(height)를 130px로 변경한다. 그리고 이러한 변경을 적용하기 위해 'Apply' 버튼을 누른다. (Apply 버튼을 누르지 않으면 변경된 내용이 적용되지 않으니 참고하기 바란다.)

Step Six Go to the "Widgets" tab. - "Widgets" 탭을 클릭한다.(우측 탭들 중에 가장 왼쪽에 위치하고 있다) Step Seven Drag and drop two TextView objects and two EditText objects into the LinearLayout so that they alternate. - 2개의 TextView 오브젝트와 2개의 EditText 오브젝트를 LinearLayout으로 드래그 & 드랍하여 올려 놓는다.  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: 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)); } }