码迷,mamicode.com
首页 > 移动开发 > 详细

苹果WatchKit轻松入门

时间:2014-12-25 10:04:15      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:苹果   智能手表   可穿戴设备   watchkit   入门   

技术分享



背景

前段时间苹果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


技术分享

苹果WatchKit轻松入门

标签:苹果   智能手表   可穿戴设备   watchkit   入门   

原文地址:http://blog.csdn.net/frogoscar/article/details/42141703

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!