2014春暖花开了。

经历了少见的暖冬，也看到了初春的雪花。

前面介绍过了DroidDraw用户界面设计器的基础知识，有朋友给我探讨了这个技术的一些内容，今天我就写一下关于这个技术的一个实战过程，加深大家的理解。

步骤一
登陆到DroidDraw UI Designer（这个前面篇博客已经介绍过了）。

步骤二
设置根布局为RelativeLayout(相对布局)

步骤三
选择"Layout"标签

步骤四
从Layouts 面板中把一个LinearLayout 对象拖放到屏幕顶部中心位置

步骤五
选择该LinearLayout 对象并点击属性"Properties"标签来开始编辑layout 属性值。把宽度"width"改成"200px",
高度"height"改成"130px"，点击"Apply"来应用改变。

步骤六
转到"Widgets"标签

步骤七
把两个TextView 对象和两个EditText 对象交替地拖放到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"
步骤十二
编辑第一个RadioButton 属性：文本设置为"Dollars to Euros",并把它id 设置成"@+id/dtoe"
编辑第二个RadioButton 属性：文本设置为"Euros to Dollars ",并把它id 设置成"@+id/etod"

重要注意事项
你必须正确地获取id，因为这是你在代码中如何获取搜索到该UI 元素的方式。
步骤十三
编辑Button 属性：文本修改为"Convert"、它的id 设置成"@+id/convert"。
最终的GUI 应该像这样：

步骤十四
点击"Generate"按钮来生成XML 布局。该xml 应像这样：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/widget30"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:id="@+id/widget31"
android:layout_width="180px"
android:layout_height="228px"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<TextView
android:id="@+id/widget41"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dollars"
android:textStyle="bold">
</TextView>
<EditText
android:id="@+id/dollars"
android:layout_width="100px"
android:layout_height="wrap_content"
android:textSize="18sp"></EditText>
<TextView
android:id="@+id/widget43"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Euros"
android:textStyle="bold"></TextView>
<EditText
android:id="@+id/euros"
android:layout_width="100px"
android:layout_height="wrap_content"
android:textSize="18sp"></EditText>
<RadioGroup
android:id="@+id/widget45"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:id="@+id/dtoe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dollars to Euros">
</RadioButton>
<RadioButton
android:id="@+id/etod"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Euros to Dollars">
</RadioButton>
</RadioGroup>
</LinearLayout>
<Button
android:id="@+id/convert"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Convert"
android:layout_below="@+id/widget31"
android:text="Dollars"
android:textStyle="bold">
</TextView>
<EditText
android:id="@+id/dollars"
android:layout_width="100px"
android:layout_height="wrap_content"
android:textSize="18sp"></EditText>
<TextView
android:id="@+id/widget43"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Euros"
android:textStyle="bold"></TextView>
<EditText
android:id="@+id/euros"
android:layout_width="100px"
android:layout_height="wrap_content"
android:textSize="18sp"></EditText>
<RadioGroup
android:id="@+id/widget45"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RadioButton
android:id="@+id/dtoe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dollars to Euros">
</RadioButton>
<RadioButton
android:id="@+id/etod"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Euros to Dollars">
</RadioButton>
</RadioGroup>
</LinearLayout>
<Button
android:id="@+id/convert"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Convert"
android:layout_below="@+id/widget31"
步骤十五
在Eclipse 中创建一个新的Android 工程。从DroidDraw 剪切该XML 并粘贴替换到res/layout/main.xml 的内
容中。
到这里你就可以在Android 中运行你的GUI。它应该像这样：

步骤十六
最后一步是实际的代码货币转换。它不多，你可以用一下代码来查找到你的GUI 元素：
下面是完整CurrentConverter Activity 的代码：
android:layout_alignRight="@+id/widget31" >
</Button>
</RelativeLayout>
this.findViewById(R.id.<id>);
package zyf.CurrentConverter;
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 CurrentConverter 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));
}
}
步骤十七
嗯，就是这样。我希望你喜欢这个技术。意见和问题给我发私信，我会尽快回复，谢谢大家。

春天来了大家赶紧播种吧。