Android GUI设计工具——DroidDraw

1、 GUI可视化设计器——DroidDraw

      Dr oidDraw是基于Java Swing的Android界面设计器，可以通过它生成复杂的Android Layout Xml文件。

2、AnDroidDrow

      AnDroidDrow是与DroidDraw集成的Android应用程序，它允许你从DroidDraw应用程序下载你的GUI，也允许你在一个AnDroidDraw设备上预览你的GUI。

      步骤零：

           下载AnDroidDraw.apk

           使用 adb install  AnDroidDraw.apk把它安装到你的Android设备上。（参考CSDN做的笔记）

           安装一个端口转发规则：adb forward tcp:6100 tcp:7100

步骤一：

在你的Android设备上运行AnDroidDraw，你应该看到这样。

       步骤二：

在你的电脑上运行DroidDraw，并创建一个GUI，接下来从DroidDraw菜单中选择“project->send GUI to Device”。

步骤三：

现在可以在Android屏幕看到新创建的GUI的XML。如图。

步骤四：

点击“preview Layout”按钮预览你的GUI。

步骤五：

当你结束时，点击向后的箭头，来返回AnDroidDraw的主屏幕。

记住：如果你感兴趣，你可以在文件框中编辑该XML文件，并且你再次点击“Preview layout”来查看修改。然而，这些修改并不会返回到DroidDraw。

步骤六：

OK。

DroidDraw教程一：Currency Converter

步骤零：

本教程讲给你一个简短的介绍，关于使用DroidDraw用户界面设计器来开发一个Android上的GUI应用程序。

步骤一：

登陆到DroidDraw UI Designer.

步骤二：

设置根布局为RelativeLayout（相对布局）

步骤三：

选择“layouts”标签

步骤四：

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

步骤五：

选择该linearlayout对象并点击属性“properties“标签开始编辑Layout属性值，把Width属性值设为”200px“，Height属性值设为”130px“，点击”Apply“来应用改变。

步骤六：

转到“Widget“标签。

步骤七：

把两个TextView对象和两个EditView对象交替拖放到LinearLayout中。

步骤八：

把一个RadioGroup对象拖放到LinearLayout中，把两个RadioButton对象拖放到RadioGroup对象中。

步骤九：

把一个Button对象放到根RelativeLayout中，它在LinearLayout下面。他应该和LinearLayout对象的右边对齐。

步骤十：

编辑每个TextView对象的属性值，上面一个文本设置成“Dollars“，

并设置成“bold“字体样式。下面一个文本设置成“Euros“，并设置成“bold“字体样式。

步骤十一：

如以下内容编辑EditView的属性值：

      id修改成：“@+id/dollors“

      文本内容设置为空

      宽度修改为：“100px“

十一步半：

      把第二个EditView也加上如上设置，只不过id修改为“@+id/euros“。

步骤十二：

编辑第一个RadioButton属性：文本设为“Dollors To Euros“,并把它的的id设为”@+id/dtoe“.

编辑第二个RadioButton属性：为本设为“Euros To Dollors“,并把它的id设为”@+id/etod“.

重要注意事项：

你必须正确的获取id，因为这是你在代码中如何获取搜索到该UI元素的方式。

步骤十三：

编辑Button属性，文本修改为“Convert“，它的id设置为”@+id/convert“.

步骤十四：

点击“Generate“按钮生成XML布局。

步骤十五：

在Eclipse中创建一个新的Adroid工程，从DroidDraw剪切该XML并粘贴换到res/layout/main.xml的内容。

到这里你就可以运行你的GUI了。

步骤十六：

最后一步是实际的代码转换。它不多，你可以用代码查看一下你的GUI元素。

如下代码：

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

}

}

最终效果图：

DroidDraw教程二：TableLayout

步骤零：

本教程将介绍如何创建一个DroidDraw输入和TableLayout布局。

步骤一：

启动DroidDraw UI Designer

步骤二：

根布局设置为relativelayout。

步骤三：

选择Layout标签

步骤四：

把一个TableLayout对象从Layout面板拖放到屏幕中间。

步骤五：

双击“TableLayout”对象，设置其属性。把它的宽度设置为“fill_parent”。

步骤六：

把三个TableRow对象从Layout面板中拖放到TableLayout中。当你拖放“TableRow”

时你应该从弹出菜单中选择TableLayout。

步骤七：

每个TableRow拖放一个TextView.

步骤八：

双击每个TextView，设置其属性，如图所示：

步骤九：

每个TableRow拖放一个EditView.

 

步骤十：

选中TaleLayout，修改“stretchable column”（可扩展栏）属性值为1，这将把所有的EditText Widget扩展开来，填充满整个Table域。

步骤十一：

双击EditText，修改其属性，Text设置为“”。

步骤十二：

把一个Button对象拖放到TableLayout下面右下角处。它应该在TableLayout的外面，并与它右对齐。

步骤十三：

编辑Botton的属性，文本设置为“OK”

步骤十四：

点击Generate生成XML文件。

步骤十五：

在Eclipse中创建一个项目。

步骤十六：

复制DroidDraw生成的XML，将其替换到“res/layout/main.xml”中。

步骤十七：

运行程序，最终效果图.

DroidDraw教程三：使用ListView和array资源

步骤零：

在Eclipse中创建一个工程

步骤一：创建初始化布局

        开启DroidDraw，创建一个新的布局。

        在Widget列表中拖放一个ListView到Layout中

        双击ListView，设置其属性。

        将其宽设为“fill_paratent”.

        点击apply。

步骤二：创建一个array资源

注意：这些使用是针对独立的DroidDraw可执行文件。

点击DroidDraw中的array标签。

点击NEW来添加一个新的Array数组。

当提示名称时，使用“items”

对于数组值，使用逗号隔开

点击Save按钮，并把其保存为array.xml,将其放入到“res/values”中。

步骤三：让你的数组与列表相连。

在第一步创建的ListView上双击

修改“Entry Array Id“属性为”@arrays/items“

点击“Apply“按钮

生成的Layout布局代码保存为“main.xml“,保存到”res/layouts“中。

步骤四：

在你的mainActivity.java中使用如下代码：

/** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle icicle) {

        super.onCreate(icicle);

        this.setTitle("DroidDraw");

        setContentView(R.layout.main);

    }

Step Five - Done!
Run your code in the Android emulator.