你的位置:首页 > Java教程

[Java教程]一步一步跟我学DeviceOne开发


这是一个系列的文档,长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用,我们会最大化的实现这些应用的每一个功能和细节,不只停留在简单的UI模仿和Demo阶段,而是一个基本可以使用的实际App。

 

在实现的过程中,会有很多困难,还会发现有一些功能目前缺乏组件支持而无法实现,也会碰见各种移动开发中都会碰到的常见技术问题。一步一步的操作和问题的解决可以让开发者直观的了解通过DeviceOne如何开发一个实际App,也可以了解移动开发本身的很多技术细节,可以让App开发者少走很多弯路。


这个文档主要介绍微信的模仿。
第一部分是框架的搭建


UE和UI设计,通常App的开发需要产品人员的UE设计和美工人员的UI设计,这二个步骤完成后才开始功能实现。我们现在是模仿已有的微信,这些步骤都可以省去,看下图是美工提供的主界面UI设计图,里面的元素的尺寸都标记了。
 
<ignore_js_op>


1.    新建项目:我们选择了Simple template,选择空模板是因为我们可以更细致的讲解开发的过程。实际上这个项目是可以选择Multi View with ViewShower模板更合适。
 
<ignore_js_op>

 

2.    简单分析一下主界面,整个主界面的尺寸是iphone6的尺寸750*1334. 分上下二个部分,底部是一个Bottom Bar导航栏,上面是4个独立的界面,这4个界面永远只有一个界面显示,其他三个界面在内存中,靠底部的导航来切换,这个适合用do_ViewShower为框架的主体如下图:
 
<ignore_js_op>

 

对应这个设计,我们在新建的项目上删除自动生成的button,添加一个do_ALayout组件和do_ViewShower组件,设置它们的高宽和x,y坐标:
 

<ignore_js_op> 

3.    接下来我们为ViewShower增加4个分页,在这里我还强调一下,实际App会多人参与,我们的代码结构要清晰易读,命名尽量使用英文,实在不行使用中文全拼,包括要建立多级子目录,不要都混在一起。在这里我们增加4个子目录:chats, contacts, discover, me. 右键每个子目录,选择New--Other--DeviceOne--UI File,创建4个index.ui,对应的index.ui.js会自动生成。
 
<ignore_js_op>

 

这里注意把这4个ui文件对应的根节点ALayout的高度设置为1220,因为这4个ui文件都是主界面的ViewShower的子view,不应该超过ViewShower的大小。
另外为每个ui里都添加一个label,标记中文名,只是一会儿debug看真实效果更清楚。
 
<ignore_js_op>


4.    Bottom Bar内简单添加4个按钮,然后添加相应的js代码实现ViewShower的页面切换功能。这里提一个技巧,选中2个或以上组件,可以使用各种对齐方式的功能,如下图:
 

<ignore_js_op> 

5.    在index.ui.js里添加ViewShower初始化的代码和按钮的点击事件。
[JavaScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var viewshower = ui("viewshower");
var page = sm("do_Page");
 
// 为viewshower增加4个子页面
viewshower.addViews([ {
       id : "chats",// 页面的标示
       path : "source://view/chats/index.ui"// 页面的路径
}, {
       id : "contacts",
       path : "source://view/contacts/index.ui"
}, {
       id : "discover",
       path : "source://view/discover/index.ui"
}, {
       id : "me",
       path : "source://view/me/index.ui"
} ]);
// 初始化先显示第一个页面
viewshower.showView("chats");
 
var button1 = ui("do_Button_1");
button1.on("touch", function() {
       viewshower.showView("chats");
});
 
var button2 = ui("do_Button_2");
button2.on("touch", function() {
       viewshower.showView("contacts");
});
 
var button3 = ui("do_Button_3");
button3.on("touch", function() {
       viewshower.showView("discover");
});
 
var button4 = ui("do_Button_4");
button4.on("touch", function() {
       viewshower.showView("me");
});





 
6.    我们来真机看看运行效果,启动设计器的调试服务,启动手机端的调试程序,最后我们看到的效果图如下,iOS和Android界面完全一样。点击底部的4个按钮,切换效果都是好的:
 
<ignore_js_op>

 

7.    这一节的内容就到这里,框架工作完成了吗?只能说框架的第一步工作完成,如果我们有很多同事一起开发这个App的话,我们可以把工作开始分开并行,接下来分5个部分:
* Bottom Bar的完成
* /chats/index.ui的完成
* /contacts/index.ui的完成
* /discover/index.ui的完成
* /me/index.ui的完成
多人并行工作的前提是代码版本管理比如SVN,GIT,我们这里使用GIT,地址是https://github.com/do-project/Fake-Weixin,每一节结束后我们都会提交GIT服务,你可以下载这个节点的代码参考。我们也会在附件附加这一节的项目代码。



下一节我们完成第一个子任务,BottomBar的实现。