basic4android 开发教程翻译(二)可视化设计与猜数字程序

xalion

Member
Licensed User
Longtime User
要学习本教程,请先参考下面的教程:
安装 Basic4android 和 Android SDK
Hello world - 安装Android 模拟器

在这个教程里面我们要使用设计器来建立layout. 这个layout包括一个文本框和一个按钮.
用户需要猜一个随机的数字. 用户在文本框里面输入数字并通过点按钮提交猜的数字.
然后系统会通过"toast"信息来给用户提示其输入的数字比系统选择的数字大还是小.

- 建立一个新工程并保存它.
-选择菜单来打开设计器.

设计器有两部分组成.一部分是"控制面板", "控制面板"是IDE 的一部分,它包含所有的属性和选项:

gmn_designer.png


另外一部分是运行在模拟器上的"可视"元件:

gmn_emulator_designer.png



正如其名,可视化面板可以显示layout,并允许你移动和改变views的大小.
在可视化面板上改变layout 的话,会同时改变控制面板上的保存的值.

由于所有的数据都保存在控制面板上,因此我们不用担心模拟器崩溃或者被关掉.当你下一次连接上时,layout 会自动重新显示.

首先要连上设备.请点Tools - Connect.
这一步需要几秒钟时间. 请注意IDE 会一直保持这个连接直到IDE 被关闭,关闭设计器并不断开这个连接.

使用 Add View menu 菜单来增加一个 Button, 一个 EditText 和一个 Label.
并按下图来设置相应的属性和位置:

gmn_layout1.png


改变 Activity的 Drawable 属性为 GradientDrawable来取得过渡色效果.

小贴士 : 当你在小的显示器工作时,你会发现点了 "Top Most"(在控制面板右上角)勾选后会感觉非常方便 .这样控制面板就会显示在最上方而不会被模拟器挡住.

保存这个layout,并命名为 Layout1.

layout是一个非常重要的概念 ,因为其在你的代码和设计之间建立了完全的分界.
layout被保存成一个文件,扩展名为".bal".每个工程可以有好几个这样的文件,除非你显式的载入一个layout文件,否则不会在你工程中造成任何影响.

一旦你保存了一个layout, 它会自动的被加入"File manager". 你可以在 IDE右面的"Files"面板里面看见它.

我们将要使用button的 click 事件.
每个 view 都有一个EventName的值. 在设计器里面是属性, 当在程序中添加view 时,会作为一个参数传递到Initialize过程中.
为了使用一个事件,你应该使用下面的格式写一个子程序(其实很简单):
Sub <EventName>_<Event> (event parameters).

在设计器里,EventName属性默认为view的名字.
如果我们要通过按钮的EventName的值来调用按钮的click 的事件的话,我们应该按照下面的格式写:
Sub Button1_Click

So here is the complete code:
Code:
Sub Process_Globals

End Sub

Sub Globals
Dim MyNumber As Int
Dim EditText1 As EditText'will hold a reference to the view added by the designer
End Sub

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Layout1") 'Load the layout file.
MyNumber = Rnd(1, 100) 'Choose a random number between 1 to 99
End Sub

Sub Button1_Click
If EditText1.Text > MyNumber Then
ToastMessageShow("My number is smaller.", False)
Else If EditText1.Text < MyNumber Then
ToastMessageShow("My number is larger.", False)
Else
ToastMessageShow("Well done.", True)
End If
EditText1.SelectAll
End Sub
一些注意事项:
- 每个activity 模块都有一个Activity 对象,你可以使用这个对象来访问activity.
- Activity.LoadLayout 可以用来载入layout文件.
- 还有其他views也可以载入 layout 文件. 例如Panel 和 TabHost. 对于TabHost,每个页面都可以通过载入layout文件来建立.
- 为了访问在设计器里面添加的views, 我们需要在Sub Globals里面定义它们.
- ToastMessageShow 用来显示一段短的信息, 并且会在一小段时间后消失.
在这里使用toast message其实不是非常合适,因为有时当软键盘打开时会使其无法提示.

写事件子程序的小贴士:
在IDE里, 先写Sub,然后按空格键. 你会看到小的提示 "press tab to insert event declaration".
再按 tab键, 选择对象类别并选择事件.
sub_event_code_snippet.png

现在你做的就是写需要的事件名和按回车.

支持多种屏幕分辨率和方向

每个layout文件可以包含一系列layout变体.每个layout变体保存views的不同的位置和大小的值.
例如, 你改变任何view的文本的话,所有的变体的会自动改变. 然而当你改变view 的位置的话,只会影响当前变体的值.
请注意,如果需要的话,按比例缩放会自动进行.这意味着当我们运行在一个高分辨率设备的时候,layout会自动缩放的.
然而你可以为不同的缩放选择建立不同的变体.

当你载入一个layout文件时,最匹配设备的那个变体将会被载入.

一般你需要两个变体:
- 320 x 480, scale = 1 (160 dpi). 这个是竖向的默认的比例.
- 480 x 320, scale = 1 (160 dpi). 横向的默认比例.

好, 重新打开设计器.载入 Layout1 文件.
选择 "New Variant" 并选择 480 x 320 (第二个选项).

designer3.png


选择模拟器,并通过按Ctrl + F11改变模拟器的方向.
请注意,设备的layout详情会在变体列表下面出现.

请如下图改变layout:

gmn_landscape.png


你可以改变当前所选的变体,然后看看它是如何影响可视的layout.
保存这个layout并运行这个程序.
现在改变模拟器的方向,看看layout是如何对应改变的.

每次当方向改变的时候,Android 就会销毁老的activity并建立新的activity. 每次 Activity.LoadLayout将会被再次调用. 因此非常不幸,每次要猜的数会被重新选择. 当然这个会很简单的改正... 但这不是本教程要做的.

工程文件在附件下载.
这个教程的最后小贴士:
- IDE的Files菜单下面包括一个"Export as zip"选项. 用来生成一个包括所有需要文件的zip文件.

文件下载地址: http://www.b4x.com/android/fil...ssMyNumber.zip
 
Top