微信号:ProgrammerLeague

介绍:巴黎的嵌入式软件工程师.为你原创; 浪漫篇章.官网 coderunity.com

苹果WatchKit轻松入门

2014-12-25 08:35 谢恩铭





背景

前段时间苹果Apple推出 WatchKit,用于开发Apple Watch应用,同时也推出了 Xcode6.2 Beta(非稳定版,好期待稳定版)版本用于开发 Watch App。Apple Watch是苹果在智能穿戴领域的一个尝试,对于苹果和开发者都非常具有挑战。学会开发 WatchApp 将大幅度提高自己的竞争能力。



内容提要

1、初识WatchKit

2、安装Xcode 6.2 Beta

3、iOS工程添加WatchKit支持

4、WatchKit项目结构和UI控件

5、主界面

6、Glance界面

7、通知界面



初识WatchKit


我们去Apple的官网的WatchKit的开发页面:

https://developer.apple.com/watchkit/




相当高大上吧,全是英文,英文没学好的话吃亏不?作为程序员,英语还是要尽量努力学习的,因为很多好的资源和开发环境都是英语的。扯远了... ——||


苹果WatchKit App的特点:

  1. 不少的智能手表的App是直接运行在手表中,受限于智能手表的内存和运算能力,不能运行很复杂的App。

  2. 目前苹果的做法是:WatchKit分为两部分,一个WatchKit的扩展程序(Extension)以后台程序运行在你的智能手机iPhone上(充分利用iPhone的运算能力和内存),而Watch App运行在你的Apple Watch智能手表上,负责渲染界面,当你的App在Apple Watch上启动时,你的手表就从iPhone获取数据,展示运行结果。(自己的理解,有不对,请指正)

  3. 当然了,Apple也承诺之后会允许真正运行在Apple Watch 上的 App 的出现,Apple Watch 和 WatchKit 的未来还是很值得期待的。


推荐一个大牛的博客,里面一篇《Apple WatchKit 初探》写得不错,值得学习。

http://onevcat.com/2014/11/watch-kit/


如果英语还不错,可以观看苹果的官方WatchKit开发介绍视频,那自然是极好的(甄嬛体):



点击中间的播放按钮即可。



安装Xcode 6.2 Beta


目前Xcode的正式版是6.1.1,可是没有集成WatchKit。只有Xcode 6.2 Beta(测试版)集成了WatchKit,所以只好下来试试,期待含有WatchKit的Xcode正式版快些放出。


进入链接:https://developer.apple.com/xcode/downloads/



点击 Download Xcode 6.2 beta 3,会提示你登陆苹果开发者账号,没有的话注册一个。Xcode 6.2 beta 3有2.81GB,所以下载需要些时间,可以够你吃两三只烤鸡 :P 。下载完后双击 xcode_6.2_beta_3.dmg 这个文件,出现如下窗口(对苹果用户应该不陌生):



只需要简单地将Xcode-Beta这个图标拖放到Applications那个图标上,就开始安装了,安装完大小是5GB多。然后可以在LaunchPad里打开或者在Applications里打开。也可以拖放到Dock里,以方便以后访问。


启动Xcode 6.2 Beta,



点击 Create a new Xcode project (创建一个新的Xcode项目)



我们选择iOS的 Single View Application,点击Next到下一步,



上图是项目的基本配置,项目名称我们叫做“HelloWatchKit”,随便取。Language(编程语言)选择Swift,毕竟是全新的苹果开发语言,老的Objective-C虽然好,但是上手没有Swift那么容易(其实关键是小编只会Swift...),而且苹果也会大力发展Swift。Next下一步,选择存放路径,默认就好,你也可以自己选择放在哪里。



iOS工程添加WatchKit支持


iOS项目创建好了,如何添加WatchKit支持呢?我们需要添加一个Target。可以点击 HelloWatchKit -> Add target 来添加



也可以点击 File -> New -> Target来添加



选择了添加Target之后,会弹出如下窗口,选择 iOS -> Apple Watch,点击Next



进入基本设置,记得勾选 Include Glance Scene(因为之后要用到Glance界面),如下图红色框所示



点击Finish按钮,就可以了。


接下来测试一下我们的工程。


选择运行目标是 HelloWatchKit WatchKit App(如下图红框所示),模拟器我选了默认的iPhone 6,点击左上角的灰黑色小三角(红框所示)来运行



苹果的Xcode的运行速度真的很快(虽然Google新发布的Android Studio已经很快了,但还是与Xcode速度上有些差距),立即就为我们呈现了 iPhone 6 和 Apple Watch的两个模拟器的运行状态



怎么样,有点意思不,我们继续学习吧。



WatchKit项目结构和UI控件


我们先来看一下Xcode为我们打开的项目:HelloWatchKit



在左边的项目列表里,点开HelloWatchKit WatchKit App这个目录,再单击Interface.storyboard,在中间就会显示其可视化的界面。我们可以看到有三个界面,最上面的是Main Interface(主界面),在它下面是Glance Interface(Glance界面),Glance是英语:反光; 瞥见 的意思。所以Glance界面是一个用于呈现信息的即时界面,如果不需要也可以把它挥扫掉或者点击一下重新进入主界面Main Interface(我们一般在智能手机上体验过的每个软件更新后,打开下面有好几个白色小圆点的,你要一一扫过才能进入主界面的,那几个就是Glance界面)。在Glance Interface下面是Notification Interface(通知界面),当Apple Watch手表接收到一个通知时,就会进入通知界面,也可以从通知界面再回到主界面。


Apple Watch的程序是写在WatchKit Extension这个目录下的(在我们的项目中就是HelloWatchKit WatchKit Extension)。里面有三个类:InterfaceController,GlanceController和Notification Controller(Controller是控制器的意思),分别对应上面我们介绍过的三个界面:主界面,Glance界面和通知界面。



我们再回到Interface.storyboard,点击Main Interface,可以看到右下角的控件栏显示了可以被添加到主界面的所有控件。目前还不多,一共大概13个控件。比如Group控件是一个布局容器,有垂直或水平之分。Table控件是用来呈现列表的。其他控件如Button(按钮),Label(标签)等大家应该不陌生。




主界面


为了测试,我们随便往Main Interface里拖进去几个控件,选中控件不放开直接拖到主界面上,我们拖了一个Switch(开关),一个Separator(分割线),一个Button(按钮)和一个Timer(计时器,会从零开始计时),此时我们的布局是默认的垂直布局,如下图



我们把目标选为HelloWatchKit WatchKit App,然后点击运行按钮。



可以看到运行起来后,除了Timer计时器控件没有显示,其他都显示了,这是因为我们没有把Timer置为Enabled(可用),我们选中Timer控件,把右上角的Enabled的勾打上,如下图红框所示。并且把Format(格式)改为下拉列表中的Short(短格式),再把Timer的框往右拉大一些(不然显示不全)。



再次运行程序,会看到如下图,Timer开始计时了,有趣吧



然后我们把Timer和Switch控件删除(用不着了),接下来我们选中Label控件,可以在右边配置它的属性,比如我们可以把Position(位置)中的Horizontal(水平)属性改为Center(居中),如下图,可以看到我们的Label由默认的靠左对齐变为居中对齐了,也可以更改Vertical(垂直)的属性为居中或靠底部对齐。



在界面中,我们除了可以添加各种控件,也可以配置界面的各种属性。例如,选中主界面,可以看到右上角的属性列表,我们可以配置它的背景颜色,在Color(颜色)那一栏,我们选择紫色,可以看到背景颜色变为很美的紫罗兰。



我们也可以添加背景图片,在Background(背景)那一栏,目前还没有图片可以选择(No Image)。我们来添加一张图片到工程中,随便拖放一张电脑里的图片到Supporting Files(支持文件)目录,在弹出的窗口点击Finish(完成),



可以看到我们的图片IMG_6090.JPG已经添加到我们的工程了。重新回到我们的Interface.storyboard,在主界面的属性列表里的Background一栏已经可以选择刚添加的图片了,选好后,则主界面如下图所示。



那么,我们如何和主界面中的控件来交互呢?我们来学习一个苹果Xcode的高级功能:Assistant Editor(助手编辑器)。默认的编辑器是Standard Editor(标准编辑器)。在左上角,点击红框所示的Show Assistant Editor,会发现Xcode为我们在Interface.storyboard右边打开了InterfaceController.swift这个文件(前面提到了,这个文件里的类正是控制主界面的),



接下来,很神奇的事情,我们选中主界面中的Label,按住ctrl键(不是cmd键),然后移动鼠标(如果你用触摸板操作,那就是按住触摸板移动),会发现出现一条蓝色的线,一端连接着Label,一端可以随意拖动,



把其拖动到InterfaceController类的第一个方法上面,则会弹出一个对话框,在对话框里填入myLabel这个名字(随便用什么名字),



点击connect(连接)按钮,则创建了一个Outlet(插座,出口),在程序中可以看到Xcode为我们生成了一段代码:@IBOutlet weak var myLabel: WKInterfaceLabel!



类似地,先将Button按钮的文字改为Click(点击),但是与刚才对Label的操作不一样的是,我们在弹出的对话框中不选择默认的Outlet类型,而是选择Action(动作)类型,因为Button按钮按下后我们要让其实现某些动作。名字填上myButton,点击connect生成myButton这个Action。在程序中可以看到Xcode为我们生成了一段代码:@IBAction func myButton() {}



你可以看到我们的InterfaceController.swift现在如下图这样



接着,我们在myButton这个Action的大括号里,写入一行代码:myLabel.setText("The Button is clicked”)

意思是,当Button按钮被按下后,Label的文字会改变为“The Button is clicked”



我们来测试一下效果,运行之后,如下图所示,我们点击Click按钮,可以看到Label文字变为“The Button is clicked”




Glance界面


看完了主界面,我们来学习一下Glance界面。在Glance界面中我们也拖进一个控件,用一个Label,把文字改为“Click To Show Main” (点击显示主界面),因为我们之前说过,我们可以从Glance界面点击一下返回主界面。


为了测试,我们先把运行的第一个界面设置为Glance界面(默认是运行主界面)。点击左上角的HelloWatchKit WatchKit App,在出现的下拉列表里选择 Edit Scheme (编辑体系),



会弹出如下图的窗口,我们在Excutable(可执行程序)的下拉列表里选择Glance - HelloWatchKit WatchKit App.app,然后点击Close(关闭)按钮。



重新运行。可以看到如下图,我们的启动界面变为了Glance界面



在Glance界面的任意位置点击一下,就回到了主界面,如下图,是不是很有意思。




通知界面


体验过了Main Interface(主界面)和Glance Interface(Glance界面),我们最后来看一下Notification(通知)界面。我们先用Edit Scheme把Excutable调为Notification - HelloWatchKit WatchKit App.app,点击Close按钮关闭



运行一下,可以看到通知界面的布局



从上到下有四个组件:HelloWatch那个是通知的标题;Test Message那个是通知的内容;First Button那个是一个按钮,点击会返回主界面;Dismiss(开除,解除)那个是另一个按钮,点击会关闭通知。


虽然没在真机上测试,是不能有实际的通知的,但我们可以用模拟器模拟通知的效果。当然大家也可以连接真机测试。


我们点击 HelloWatchKit WatchKit Extension目录下的Supporting Files目录中的PushNotificationPayload.apns这个文件,可以看到这个文件里面就是控制通知界面的一些代码。



我们再次点击HelloWatch Watch App目录下的Interface.storyboard,看到Glance Interface下面的就是我们的通知界面。



我们可以在PushNotificationPayload.apns这个文件修改通知文本的显示,比如我们将First Button改为“Show Main Interface”,运行,如下所示,



点击Show Main Interface,则回到我们的主界面。



后记


至此,对于WatchKit已经大体介绍完了。苹果的WatchKit开发包的能力远不止此,我们只是演示了基本的知识点。而且因为WatchKit刚放出不就,相信以后应该会越来越强大。祝愿可穿戴设备越走越好,未来可穿戴设备一定举足轻重。




* 您若觉得本文不错请点右上角“分享到朋友圈

* 新朋友请关注程序员联盟,公众号:ProgrammerLeague


 
程序员联盟 更多文章 Android Studio 1.0 苹果电脑安装配置 我为什么用简书和Markdown写作+基本使用指南 Android探索之旅 | StrictMode严苛模式 Linux中比Top颜值更高的系统监控工具Glances 对于程序员, 为什么英语比数学更重要? 如何学习
猜您喜欢 如何妥当安置那些不想被别人看到的重要信息? 图像风格化技术(1) 【HKOSCon 2016】How to Build a NewSQL Database? Android学习第三弹之Android图片颜色处理 物理内存耗尽、CMS GC碎片造成RT慢