一步一步教你学开发

这是一个系列的文档,长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用,我们会最大化的实现这些应用的每一个功能和细节,不只停留在简单的UI模仿和Demo阶段,而是一个基本可以使用的实际App。笔者特从开源中国社区上总结以下经验,一步一步的操作和问题的解决可以让开发者直观的了解通过DeviceOne如何开发一个实际App,也可以了解移动开发本身的很多技术细节,可以让App开发者少走很多弯路。

操作方法

  • 01

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

  • 02

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

  • 03

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

  • 04

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

  • 05

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

  • 06

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

  • 07

    在index.ui.js里添加ViewShower初始化的代码和按钮的点击事件。

  • 08

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

  • 09

    这一节的内容就到这里,框架工作完成了吗?只能说框架的第一步工作完成,如果我们有很多同事一起开发这个App的话,我们可以把工作开始分开并行,接下来分5个部分: * Bottom Bar的完成 * /chats/index.ui的完成 * /contacts/index.ui的完成 * /discover/index.ui的完成 * /me/index.ui的完成

(0)

相关推荐

  • 从零开始学电脑一步一步成为电脑高手

    本文从电脑的硬件.软件等电脑的方方面面为电脑初学者讲解了电脑入门知识,包括电脑硬件的组成.软件.电脑上网安全和操作系统等,从零开始学电脑,让你一步一步成为电脑高手. 操作方法 01 硬件篇:电脑硬件的 ...

  • 一步一步教你免费建一个网站!

    一步一步教你免费建一个网站! 步骤/方法 01 不懂任何网站技术,技能,也能快速制作一个功能强大的网站: 02 只需在耐思尼克申请一套网站建设套餐即可(域名,虚拟主机,企业邮局,网站建设,网站推广)一 ...

  • 如何注册淘宝网店 一步一步教你开网店

    现在电子商务在中国迅速发展,阿里巴巴更是中国电商界的巨头,而旗下的淘宝更是很多人自主创业的选择,不管是全职做,还是兼职做都可以.今天教大家如何注册自己的淘宝店铺,一步一步教你怎么开网店 操作方法 01 ...

  • 教你学Windows 7附件中的老家伙

    朋友,你还在坚守“XP”吗?你还在忍受“Vista”吗?为什么不试试Windows 7?只要你曾领略她卓越的性能、华丽的外表,就一定会为她的魅力所折服。怎么?对Wndows 7不了解?不知道怎么使用? ...

  • 手把手教你自学开发手机APP软件,一天包会教程

    这几年APP开发底层技术不断发展,APP平台化出现后,借助平台,不懂技术也能自己制作手机APP,平台共享模式,费用不到传统外包的十分之一.这对于我们这些草根创业者来说,无意是一个重大利好. 第一.注册 ...

  • QQ五笔输入法输入更快捷 寓教于学

    五笔输入法素来是国人的骄傲,快捷的五笔输入体验,“横、竖、撇、捺、折”一笔一划犹如书法一般,让用户时刻感受到汉字的博大精深。用户输入的不是字,是境界! 不过对初学者来说,熟练掌握五笔输入是个漫长的学习 ...

  • 早教app定制开发的功能和费用分析

    早教app定制开发的功能有很多,包括早教课程定制,趣味学习,社区交流以及商城服务等. 操作方法 01 早教app定制开发的功能 1.早教课程定制 早教课程定制.根据宝宝的发育情况,量身定制宝宝的课程进 ...

  • 从零开始教你学版式设计(三)

    小编:今天是教你学版式设计的第三期,让我们一起来聊聊最常见的黄金分割构图法吧!黄金分割是指将整体一分为二,较大部分与整体部分的比值等于较小部分与较大部分的比值,其比值约为0.618.这个比例被公认为是 ...

  • 从零开始教你学版式设计(四)

    小编:今天是<从零开始教你学设计>的第四篇,不知道大家学得怎么样了呢?接着上一次的黄金分割与构图法上.今天@孙青椒-作者主要告诉大家黄金分割在版面设计中的具体应用 ,非常值得一看哦! 本文 ...