Android 开发教程

Size: px

Start display at page:

Download "Android 开发教程"

驹针
5 years ago
Views:

1 封面 1

2 GUI 可视化设计器 DroidDraw DroidDraw 是一个基于 Java Swing 的 Android 界面设计器, 可以通过它来生成复杂的 Android Layout XML 文件,Android 的 Layout 和 Swing Layout 中有很好的对应, 设计器的代码编写起来比较容易 2

3 AnDroidDraw AnDroidDraw 是一个与 DroidDraw 集成的 Android 应用程序, 它允许你从 DroidDraw 应用程序下载你的 GUIs, 也允许你在一个 Android 设备上预览你的 GUIs. 下载 DroidDraw 步骤零下载 AnDroidDraw.apk 使用 :adb install AnDroidDraw.apk 把它安装到你的 Android 设备上安装一个端口转发规则 :adb forward tcp:6100 tcp:7100 步骤一在你的 Android 设备上运行 AnDroidDraw, 你应该看到像这样的 : 步骤二在你的电脑上运行 DroidDraw, 并且创建一个 GUI,( 获取更多关于创建 GUI 的信息, 请看教程 1 教程 2 教程 3 ) 接下来从 DroidDraw 菜单中选择 "Project"->"Send GUI to Deviec" 3

4 步骤三现在你应该在 Android 屏幕上看到你新创建的 GUI 的像这样的 xml: 步骤四点击 "Preview GUI" 按钮来预览你的 GUI 步骤五当你结束时, 点击向后的箭头, 来返回到 AnDroidDraw 的主屏幕记住, 如果你感兴趣, 你可以在文本框中编辑该 XML 文件, 并且再次点击 "Preview GUI" 来查看你的修改然而, 这些修改将不会返回到 DroidDraw 步骤六大功告成!??/Comments/Bugs brendan.d.burns 在 gmail 上 4

5 DroidDraw 教程一 :Currency Converter 步骤零本教程将给你一个简短的介绍开关于使用 DroidDraw 用户界面设计器来开发一个在 Android 上的 GUI 应用程序本教程假设你已经下载并安装了 Android SDK 本教程也假设你对 GUI 编程概念和 Java 编程语言相当熟悉步骤一登陆到 DroidDraw UI Designer 步骤二设置根布局为 RelativeLayout( 相对布局 ) 步骤三选择 "Layout" 标签 5

6 步骤四从 Layouts 面板中把一个 LinearLayout 对象拖放到屏幕顶部中心位置步骤五选择该 LinearLayout 对象并点击属性 "Properties" 标签来开始编辑 layout 属性值把宽度 "width" 改成 "200px", 高度 "height" 改成 "130px" 点击 "Apply" 来应用改变步骤六转到 "Widgets" 标签 6

7 步骤七把两个 TextView 对象和两个 EditText 对象交替地拖放到 LinearLayout 中步骤八把一个 RadioGroup 对象拖放进 LinearLayout 中把两个 RadioButton 对象拖放到 RadioGroup 中 7

8 步骤九把一个 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" 8

9 重要注意事项你必须正确地获取 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=" <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" 9

10 android:text="dollars" android:textstyle="bold"> </TextView> <EditText android:layout_width="100px" android:textsize="18sp"></edittext> <TextView android:text="euros" android:textstyle="bold"></textview> <EditText android:layout_width="100px" android:textsize="18sp"></edittext> <RadioGroup android:orientation="vertical"> <RadioButton android:text="dollars to Euros"> </RadioButton> <RadioButton android:text="euros to Dollars"> </RadioButton> </RadioGroup> </LinearLayout> <Button android:text="convert" 10

android:layout_alignright="@+id/widget31"> </Button> </RelativeLayout> 步骤十五在 Eclipse 中创建一个新的 Android 工程从 DroidDraw 剪切该 XML 并粘贴替换到 res/layout/main.

11 </Button> </RelativeLayout> 步骤十五在 Eclipse 中创建一个新的 Android 工程从 DroidDraw 剪切该 XML 并粘贴替换到 res/layout/main.xml 的内容中到这里你就可以在 Android 中运行你的 GUI 它应该像这样 : 步骤十六最后一步是实际的代码货币转换它不多, 你可以用一下代码来查找到你的 GUI 元素 : this.findviewbyid(r.id.<id>); 下面是完整 CurrentConverter Activity 的代码 : 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; 11

12 } RadioButton etod; Button convert; /** Called when the activity is first created. 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 true); etod = (RadioButton) this.findviewbyid(r.id.etod); convert = (Button) this.findviewbyid(r.id.convert); convert.setonclicklistener(this 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)); } 步骤十七嗯, 就是这样我希望你喜欢该教程意见和问题邮件 brendan.d.burns Gmail! 12

13 结果 13

14 DroidDraw 教程二 : Table Layout 步骤零本教程描述如何创建一个从 DroidDraw 简单的输入和 TableLayout 布局本教程假设你已经下载并安装了 Android SDK 本教程也假设你对 GUI 编程概念和 Java 编程语言相当熟悉步骤一启动 DroidDraw 用户界面设计器步骤二根布局选择为 RelativeLayout 布局步骤三选择 "Layouts" 标签 14

15 步骤四把一个 TableLayout 对象从 Layouts 面板中拖放到屏幕顶的中部步骤五双击 "TableLayout" 来修改它的属性把它的宽度 "width" 改为 "fill_parent" 步骤六把三个 TableRow 对象从 Layouts 面板中拖放到 TableLayout 对象中当你拖放 TableRow 对象时, 你应该从弹出菜单中选择 TableLayout 步骤七每一个 TableRow 中拖放一个 TextView: 15

16 步骤八双击每一个 TextView 来修改它的属性, 修改显示文本如下图一样 : 步骤九每一个 TableRow 中拖放一个 EditText, 放在存在的文本右边步骤十选中 TableLayout, 修改 "Stretchable Column"( 可扩展栏 ) 属性值为 1, 这将把所有的 EditText widget 扩展开来填充满该 Table 表格 16

17 步骤十一编辑每一个 EditText 的属性, 让 Text 文本属性为 "" 步骤十二把一个 Button 拖放到 TableLayout 下面的右下角空白处它应该在 TableLayout 的外面并和它右对齐步骤十三修改该按钮的属性, 文本设置为 "OK" 步骤十四点击 "Generate" 按钮来生成.xml 文件步骤十五在 Eclipse 中, 创建一个新的 Android 工程 17

18 步骤十六用第十五步骤生成的 XML 来替换 res/layouts/mian.xml 文件内容步骤十七运行你的新工程, 你应该在 Android 中看到你的 GUI 它应该像这样 : 完成! 完整 XML 文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:id="@+id/widget49" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android=" <TableLayout android:id="@+id/widget54" android:layout_height="160px" android:orientation="vertical" android:stretchcolumns="1" android:layout_alignparenttop="true" android:layout_centerhorizontal="true" android:layout_width="fill_parent"> <TableRow android:id="@+id/widget55" android:layout_width="fill_parent" android:orientation="horizontal"> <TextView android:id="@+id/widget58" 18

19 android:text="name"> </TextView> <EditText android:textsize="18sp"> </EditText> </TableRow> <TableRow android:layout_width="fill_parent" android:orientation="horizontal"> <TextView android:text="phone"> </TextView> <EditText android:textsize="18sp"> </EditText> </TableRow> <TableRow android:layout_width="fill_parent" android:orientation="horizontal"> <TextView android:text=" "> </TextView> <EditText 19

android:textsize="18sp"> </EditText> </TableRow> </TableLayout> <Button android:id="@+id/widget64"

20 android:textsize="18sp"> </EditText> </TableRow> </TableLayout> <Button android:text="button" </Button> </RelativeLayout> 结果 20

DroidDraw 教程三 : 使用 ListView 和 array 资源步骤零在 Eclipse 新建一个工程步骤一 - 创建初始化布局开启 DroidDraw 并创建一个新的 Layout 从 Widget 列表中拖放一个 ListView 放入该 Layout 中双击该 ListView 编辑它的属性把它的宽高属性值改为 "fill_parent" 点击 "Applay" 按钮

21 DroidDraw 教程三 : 使用 ListView 和 array 资源步骤零在 Eclipse 新建一个工程步骤一 - 创建初始化布局开启 DroidDraw 并创建一个新的 Layout 从 Widget 列表中拖放一个 ListView 放入该 Layout 中双击该 ListView 编辑它的属性把它的宽高属性值改为 "fill_parent" 点击 "Applay" 按钮步骤二 - 创建一个 Array 数组资源注意 : 这些使用说明是针对独立的 DroidDraw 可执行文件的点击 DroidDraw 中的 "Arrays" 标签点击 "New" 按钮来添加一个新的 Array 数组当提示名称时, 使用 "items" 对于数组值, 使用 "," 逗号来隔开列表的值点击 "Save" 按钮并把该文件保存为 arrays.xml, 保存在你工程 res/values 目录中 21

java 文件中 : /** Called when the activity is first created.

22 步骤三 - 让你的列表和数组连接在你第一步创建的 ListView 上双击修改 "Entry Array Id" 属性为 "@+id/items" 点击 "Apply" 按钮生成 Layout 布局文件并保存它为 main.xml, 保存到你工程 res/layouts 目录中步骤四 - 代码使用以下代码在你的 mainactivity.java 文件中 : /** Called when the activity is first created. public void oncreate(bundle icicle) { } /** Called when the activity is first created. */ super.oncreate(icicle); this.settitle("droiddraw"); setcontentview(r.layout.main); 22

23 步骤五 - 完成在 Android 模拟器中运行你的代码结果 23

Android GUI Widget 可视化指导作为一个 Java Android 手机开发员 UI 设计者, 为了让你的生活更简单尝试用 DroidDraw 来高速开发你的用户界面 AnalogClock <AnalogClock android:id="@+id/clock1" /> Button <Button android:id ="@+id/button1"

24 Android GUI Widget 可视化指导作为一个 Java Android 手机开发员 UI 设计者, 为了让你的生活更简单尝试用 DroidDraw 来高速开发你的用户界面 AnalogClock <AnalogClock /> Button <Button android:id android:text="label" android:layout_width="fill_parent" android:layout_height="fill_parent"/> <Button android:id android:text="label" android:layout_width="fill_parent" android:layout_height="fill_parent" android:typeface="serif"/> <Button android:id android:text="label" android:layout_width="fill_parent" android:layout_height="fill_parent" android:textstyle="bold italic"/> 24

25 CheckBox <CheckBox android:text="plain" /> <CheckBox android:text="serif" android:typeface="serif" /> <CheckBox android:text="bold" android:textstyle="bold" /> <CheckBox android:id android:text="italic" android:textstyle="italic" /> 25

26 DatePicker <DatePicker > // Required Java init code: DatePicker dp = (DatePicker)this this.findviewbyid(r.id.widget27); // for example init to 1/27/2008, no callback dp.init(2008, 0, 27, Calendar.SUNDAY, null);... DigitalClock <DigitalClock android:id="@+id/digitalclock" /> 26

27 EditText <EditText android:id android:text="edittext 1" /> <EditText android:id android:text="(206) " android:typeface="serif" android:phonenumber="true" /> <EditText android:id android:text="supersecret" android:textstyle="bold italic" android:password="true" /> Gallery <Gallery /> 27

28 ImageButton <ImageButton /> ImageView <ImageView /> ProgressBar <ProgressBar /> Spinner <Spinner android:layout_width="fill_parent" android:drawselectorontop="false"/> TimePicker <TimePicker /> 28

29 RadioButton <RadioGroup xmlns:android=" android:orientation="vertical"> <RadioButton android:text="plain" android:checked="false" android:layout_gravity="left" android:layout_weight="0"> </RadioButton> <RadioButton android:text="serif" android:checked="true" android:layout_gravity="left" android:layout_weight="0" android:typeface="serif"> </RadioButton> <RadioButton android:text="bold" android:checked="false" android:layout_weight="0" android:layout_gravity="left" android:textstyle="bold"> </RadioButton> <RadioButton android:text="bold & Italic" 29

30 android:checked="false" android:layout_weight="0" android:layout_gravity="left" android:textstyle="bold_italic"> </RadioButton> </RadioGroup> TextView <TextView android:text="plain" /> <TextView android:text="serif" android:typeface="serif"/> <TextView android:text="bold" android:textstyle="bold"/> <TextView android:id android:text="italic" android:textstyle="italic"/> 30

31 封面 31

res/layout 目录下的 main.xml 源码 : <?xml version="1.0" encoding="utf 8"?> <TabHost android:layout_height="fill_parent" xml

res/layout 目录下的 main.xml 源码 : <?xml version=1.0 encoding=utf 8?> <TabHost android:layout_height=fill_parent xml 拓展训练 1- 界面布局 1. 界面布局的重要性做应用程序, 界面是最基本的 Andorid 的界面, 需要写在 res/layout 的 xml 里面, 一般情况下一个 xml 对应一个界面 Android 界面布局有点像写 html( 连注释代码的方式都一样 ), 要先给 Android 定框架, 然后再在框架里面放控件,Android 提供了几种框架,AbsoluteLayout,LinearLayout,