转载

手把手教学:巧用Core Data和RubyMotion开发iOS应用

这篇指南将教你如何用Core Data为Pomotion计时器添加Persistence,关于这点,可以参考我之前所写的《RubyMotion新手指南( RubyMotion Tutorial for Beginners )》系列。

如果熟悉RubyMotion,建议从GitHub储存库( The GitHub Repository )下载完整代码,跟着练练手; 如果还是新手,建议先去读前两篇指南入门,再来读这一篇。

为确保 达到预期的指导效果,读者最好满足以下条件:

  • Objective-C的iOS开发经验;
  • Ruby基本了解;
  • 掌握 CSS的基础知识;
  • 简单使用过 Terminal。

当然,如果用过 Core Data或ActiveRecord就更好了,但并不是硬性条件。

准备工作

首先从 之前的系列指南 或 GitHub 上下载最终方案(final project):

打开 Terminal,转到根目录,运行以下命令,确保App创建成功:

rake device_name="iPhone 4s"

注意 :RubyMotion 3为rake命令新添了 device_name ,以区分运行app的不同设备模拟器。我个人倾向于iPhone 4s模拟器,因为它尺寸更小,屏幕内容一目了然。

如果屏幕显示如下,那就对了——如果不是,那就问问自己是否完全遵照了安装指南和之前 Pomotion指南中的所有步骤。

手把手教学:巧用Core Data和RubyMotion开发iOS应用

开始的屏幕显示是这样的。

然后运行 Pomotion后,准备工作就做好了。

依赖项( Dependency)更新: 很久没用过 RubyMotion的需要更新一些gems。具体来说是bundler gem,在Terminal里运行以下命令即可: gem update bundler

此外,可能会出现 Bundler::GemNotFound: Couldn t find sass-3.4.2 in any of the sources 这种错误。要解决这个问题就用 gem install sass -v 3.4.2 来安装 Sass v3.4.2。

添加任务按钮

Pomotion计时器添加任务列表,相当于用户的每日待办事项列表,可以添加、删除或选择当前任务。 当用户点下导航栏上的按钮时,就能打开任务列表,所以先从添加任务按钮开始。

挑一个用得最顺手的文本编辑器,打开 app/controllers/main_view_controller.rb ,在 timer_button 定义方法( method definition)下添加以下代码:

def tasks_button   @tasks_button ||= UIBarButtonItem.alloc.initWithImage(tasks_image,      style: UIBarButtonItemStylePlain, target: self, action: nil) end   def tasks_image   @tasks_image ||= UIImage.imageNamed('todo.png') end

这样就在 MainViewController 类上定义了两个属性:一个命名为 tasks_button UIBarButtonItem ,另一个命名为 tasks_image UIImage

改动过后,运行之前,需要为 App资源添加 tasks_image 方法引用过的图片文件。

下载 图片文件 ,保存在 App的 resources 目录下,命名为 todo.png

还是在 app/controllers/main_view_controller.rb 上,在 tasks_image 方法下面添加下面的方法:

def viewDidLoad   super   self.title = "Pomotion"   self.navigationItem.rightBarButtonItem = tasks_button end

这样就为 MainViewController 导航栏添加了 tasks_button 。还是老方法创建,运行App,看看有什么变化。 

rake device_name="iPhone 4s"

手把手教学:巧用Core Data和RubyMotion开发iOS应用

进展不错!但A pp的配色是红、白、绿,而蓝色的 tasks_button 看起来有点扎眼,对吧?别担心,小 case!

还记得 Pomotion指南的内容吗?用 PixateFreestyle App外观添加CSS样式(styles),可以在 resources/default.css 文件中找到样式定义( style definition)。

打开 resources/default.css ,为 navigation-bar 选择器添加以下代码:

-ios-tint-color: white;

蓝色导航栏变白了。想了解更多知识,请参阅 Pixate reference

保存文件,再次用 rake device_name="iPhone 4s" 创建,运行App,导航栏由蓝色变成了白色。

手把手教学:巧用Core Data和RubyMotion开发iOS应用

很简单吧?

试着点下 tasks_button ,啊哦,为啥一点儿反应都没有呢?哦,原来是因为没有定义“点击屏幕即调用”的 action。

正文到此结束
Loading...