深入浅出用DroidDraw设计Android界面

【网学网提醒】：文章导读：在新的一年中，各位网友都进入紧张的学习或是工作阶段。网学会员整理了深入浅出用DroidDraw设计Android界面的相关内容供大家参考，祝大家在新的一年里工作和学习顺利！

    深入浅出用DroidDraw设计Android界面
    一、DroidDraw与AnDroidDrow简介
    1、什么是DroidDrawDroidDraw是基于JavaSwing的Android界面设计器，可以通过它生成复杂的AndroidLayoutXml文件。2、什么是AnDroidDrawAnDroidDraw是一个与DroidDraw集成配合使用的Android应用程序，它允许你从DroidDraw应用程序下载你的GUIs,也允许你在一个Android设备上预览你的GUIs。3、安装使用AnDroidDraw及AnDroidDraw其安装步骤如下:（1）先下载安装DroidDraw，我使用的版本是droiddraw-r1b22（2）下载AnDroidDraw.apk，并在模拟器上进行安装，安装步骤如下：①使用cmd进入命令行窗口，进入你安装的android-sdk下的platform-tools目录，如图：
    ②使用：adbinstallAnDroidDraw.apk把它安装到你的Android设备上③安装一个端口转发规则：adbforwardtcp:6100④装完后，你能在模拟器上看到安装好的程序图标：
    （3）在你的Android设备上运行AnDroidDraw，你应该看到像这样的：
    （4）在你的电脑上运行DroidDraw，并且创建一个GUI，接下来从DroidDraw菜单中选择"Project"->"SendGUItoDeviec"，就是将设计出来的xml发送给模拟器正在运行的AnDroidDraw程序，如果发送成功会弹出“Uploadsucceeded”消息框。
    （5）现在你应该在Android屏幕上看到你在DroidDraw创建的GUI的像这样的xml：
    （6）点击"PreviewLayout"按钮来预览你的GUI。
    （7）点击模拟器向后的箭头，来返回到AnDroidDraw的主屏幕。当然，你也可以只使用DroidDraw设计UI，然后把设计好的xml代码复制到android项目的布局文件中，直接运行看结果。记住：如果你感兴趣，你可以在文件框中编辑该XML文件，并且你再次点击“Previewlayout”来查看修改。然而，这些修改并不会返回到DroidDraw。
    二、DroidDrawUI设计教程一：CurrencyConverter
    本节讲给你一个简短的介绍，关于使用DroidDraw用户界面设计器来开发一个Android上的GUI应用程序。步骤一：登陆到DroidDrawUIDesigner.步骤二：设置根布局为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属性：文本设为“DollorsToEuros“,并把它的的id设为”@+id/dtoe“.编辑第二个RadioButton属性：为本设为“EurosToDollors“,并把它的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.).HereisthecompletecodefortheCurrencyConverteractivity:importimportimportimportimportimportimportandroid.app.Activity;
    android.os.Bundle;
    android.view.View;
    android.view.View.OnClickListener;
    android.widget.Button;
    android.widget.RadioButton;
    android.widget.TextView;
    publicclassCurrencyConverterextendsActivityimplements
    OnClickListener{
    TextViewdollars;
    TextVieweuros;
    RadioButtondtoe;
    RadioButtonetod;
    Buttonconvert;
    /**Calledwhentheactivityisfirstcreated.*/
    @Override
    publicvoidonCreate(Bundleicicle){
    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);
    }
    publicvoidonClick(Viewv){
    if(dtoe.isChecked()){
    convertDollarsToEuros();
    }
    if(etod.isChecked()){
    convertEurosToDollars();
    }
    }
    protectedvoidconvertDollarsToEuros(){
    doubleval=
    Double.parseDouble(dollars.getText().toString());
    //inarealapp,we'dgetthisoffthe'net
    euros.setText(Double.toString(val*0.67));
    }
    protectedvoidconvertEurosToDollars(){
    doubleval=
    Double.parseDouble(euros.getText().toString());
    //inarealapp,we'dgetthisoffthe'netdollars.setText(Double.toString(val/0.67));}}最终效果图：
    三、DroidDrawUI设计教程二：TableLayout
    本教程将介绍如何创建一个DroidDraw输入和TableLayout布局。
    步骤一：
    启动DroidDrawUIDesigner
    步骤二：
    根布局设置为relativelayout。
    步骤三：
    选择Layout标签
    步骤四：
    把一个TableLayout对象从Layout面板拖放到屏幕中间。
    步骤五：
    双击“TableLayout”对象，设置其属性。把它的宽度设置为“fill_parent”。
    步骤六：
    把三个TableRow对象从Layout面板中拖放到TableLayout中。当你拖放“TableRow”时你应该从弹出菜单中选择TableLayout。
    步骤七：
    每个TableRow拖放一个TextView.
    步骤八：
    双击每个TextView，设置其属性，如图所示：
    步骤九：
    每个TableRow拖放一个EditView.
    步骤十：选中TaleLayout，修改“stretchablecolumn”（可扩展栏）属性值为1，这将把所有的EditTextWidget扩展开来，填充满整个Table域。
    步骤十一：
    双击EditText，修改其属性，Text设置为“”。
    步骤十二：
    把一个Button对象拖放到TableLayout下面右下角处。它应该在TableLayout的外面，并与它右对齐。
    步骤十三：
    编辑Botton的属性，文本设置为“OK”
    步骤十四：
    点击Generate生成XML文件。
    步骤十五：
    在Eclipse中创建一个项目。
    步骤十六：
    复制DroidDraw生成的XML，将其替换到“res/layout/main.xml”中。
    步骤十七：
    运行程序，最终效果图.
    四、DroidDrawUI设计教程三：使用ListView和array资源
    在Eclipse中创建一个工程。开始以下步骤：
    步骤一：创建初始化布局
    开启DroidDraw，创建一个新的布局。在Widget列表中拖放一个ListView到Layout中双击ListView，设置其属性。将其宽设为“fill_paratent”。点击apply。
    步骤二：创建一个array资源
    注意：这些使用是针对独立的DroidDraw可执行文件。
    点击DroidDraw中的array标签。
    点击NEW来添加一个新的Array数组。
    当提示名称时，使用“items”
    对于数组值，使用逗号隔开
    点击Save按钮，并把其保存为array.xml,将其放入到“res/values”中。
    步骤三：让你的数组与列表相连。
    在第一步创建的ListView上双击
    修改“EntryArrayId“属性为”@arrays/items“
    点击“Apply“按钮
    生成的Layout布局代码保存为“main.xml“,保存到”res/layouts“中。
    步骤四：
    在你的mainActivity.java中使用如下代码：
    /**Calledwhentheactivityisfirstcreated.*/
    @Override
    publicvoidonCreate(Bundleicicle){
    super.onCreate(icicle);
    this.setTitle("DroidDraw");
    setContentView(R.layout.main);
    }
    步骤五：
    在模拟器中运行上面的代码。