Apple Watch开发-初探

目录:

  • 前言
  • 一、Apple Watch简介
  • 二、Watch App在项目中的结构
  • 三、 Apple Watch上的app特点和原理
  • 四、 Watch App UI介绍
  • 五、App Watch与iphone 之间的通信
  • 六、Watch App 和watchKit Extention之间数据共享
  • 七、Watch App通知
  • 八、App Watch单独发送网络请求

前言:
随着现在 Apple 生态圈的发展,越来越多的 App 会把自己的简化版从 iOS 迁移至 WatchOS(支付宝、微信、手Q、头条、QQ音乐、网易云音乐等等,都有Watch版App)。

一、Apple Watch简介

Apple Watch是苹果公司主打 “健康” 概念的智能手表。
于2014年发布第一代Apple Watch 1,截至2020年,已发布Apple Watch 5。

2015年3月10日,苹果在旧金山Moscone Center召开2015年春季新品发布会,正式发布了Apple WATCH,分为运动、标准、定制三版,将于2015年4月10号预售,4月24日上市。

Apple Watch支持电话,语音回短信,连接汽车,天气、航班信息,地图导航,播放音乐,测量心跳、计步等几十 种功能,是一款全方位的健康和运动追踪设备。

Apple Watch App分为两种:

  • Watch App for iOS App
    从iOS迁移过来的Watch App,可与iOS App通信。
  • Watch App
    独立的Watch App,可独立安装在Apple Watch上。

大部分是第一种,Watch App for iOS App。

二、Watch App在项目中的结构

新建一个watchOS的target。

企业微信截图_e1206af5-51d4-44b6-8f02-0ee72d50de39.png
  • 这时,会出现两个target:WatchKit App、WatchKit Extension。
2.png

注意:在 WatchOS 中,无法像 iOS 那样依赖 UIKit 写出各种复杂的界面。目前,只能依赖 storyboard 搭建出一些简单的UI界面与界面跳转逻辑。

三、 Apple Watch上的app特点和原理

我们从开发的角度说下Apple Watch上的app特点和原理。

Apple Watch运行模式

首先手表上app和iPhone上app是一种联动关系,即Apple Watch上的开发的app是离不开iPhone的。为什么呢,这个它的运行策略有关,手表的cpu、硬件、电量都是有限的,所以节约空间和电量是很重要的,所以手表界面设计要精简,操作比较少。

Watch app和iPhoneapp是无缝关联的,因为Watch上的app都是iPhone帮它运行的,手机和Watch离得近,靠无限传输,在一定程度上节省了Watch的很多工作量,Watch负责显示iPhone处理后的结果,这其实也是一种绑定销售策略。Watch上的app其实就是iPhone上app的一部分、一种扩展。

Apple Watch app界面类型

image.png

Watch app有三种和用户交互的方式,或者说Watch app有三种界面:

  • 常规Watch app,这个是必须的,一些简单内容的显示和简单操作,可以看成手机上的精简版;
  • glance类型的界面,是一种纯提示型的界面,是不能和用户互动的,这部分可有可无;
  • notification类型的界面,这是消息通知时用到的,手机也可以接收推送通过这种界面显示,这种是可以和用户互动的。

Watch app和iPhone app的关系

image.png

Watch app和iPhone app是一种联动关系,其实也是一个绑定关系,是一个整体,Watch app并不是一个单独的project,而是在iOS project上扩展的一个Target,Watch app上并没有代码,只有界面资源,代码是在iPhone上运行的。

在WatchOS 2 之前, WatchKit App负责展示,安装在Watch上,WatchKit Extension负责业务和控制逻辑,安装在iPhone上。所有运算、逻辑以及控制都是在iPhone上完成。Watch app和iPhone app是通过Watchkit进行桥接的,所有的代码执行逻辑方面都是在iPhone上运行的,storyboard和图片资源在Watch端显示的,并且Watch app的安装运行都是由iPhone控制的。

  • 此外,一个iPhone每次可关联一个Apple Watch,它们是一对一的关系。目前Apple Watch只能跟iPhone设备配对,不支持iPad。
appFramework.png

在WatchOS 2之后,最大的改变就是将WatchKit Extension 直接从iPhone 移植到AppleWatch上。

watchOS2.png

Watch app启动过程

image.png

上图是Watch app加载的一个过程,可以看出Watch app的加载是依靠iPhone来进行的,启动app,加载Watch端的storyboard和图片等资源,然后会初始化UI,这个时候就走到iPhone端扩展里的初始化方法了,初始化完了之后就是显示UI,UI中的触发的动作都是去iPhone扩展里调用代码,将执行结果显示到Watch上。

刚才提到的init方法顾名思义了,awakeWithContext:方法就是通过iPhone传递过来的信息初始化UI的,类似我们之前的viewDidLoad,willActivate就相当于之前的viewWillAppear,这样就应该好理解了。

Watch App 生命周期

image.png

iPhone上app都有各自的生命周期,那么Watch app的生命周期呢,从上图我们就可以很直观的看到,从显示UI、用户交互到app结束,每一步都和iPhone对应app的扩展密切交流。

  • WKInterfaceController继承于NSObject WKInterfaceController 相当于UIViewController 。生命周期方法分别是:

    1. -initWithContext: 被初始化时调用,一般在这里配置视图元素,相当于-viewDidLoad
    2. -willActivate 将要呈现的时候调用,也可以在这个方法中进行视图元素的设置,相当于-viewWillAppear
    3. -didAppear 已经呈现的时候调用 , 相当于-viewDidAppear
    4. -willDisappear 将要消失时调用 相当于-viewWillDisappear
    5. -didDeactivate 呈现后调用,在这个方法中停用持有self的对象,如NSTimer。相当于-viewDidDisappear
  • WKInterfaceObject 及其子类

    1. WKInterfaceObject 相当于UIView的代理,WatchKit实际呈现的View对于开发者来说是不可见的,只能通过WKInterfaceObject对UI对象属性进行设置,可以设置的属性非常少。
    2. WKInterfaceButton 相当于UIButton的代理
    3. WKInterfaceImage 相当于UIImageView的代理
  • WatchKit独立于UIKit,所有的类都继承自NSObject,没有完整的Response chain

四、 Watch App UI介绍

此章节会在后续的文章中介绍

我们做UI开发, 主要用的是WatchKit框架, 对比UIKit, 功能更少, 更简洁.

Watch App 布局

  • Watch App 的视图开发不能使用代码,必须StoryBoard, 布局方式如下 。
image.png
  • Watch App 采取的布局方式和 iOS App完全不同。不能使用 autoLayout或者坐标。只能使用相对布局。

    1. 水平:left center right
    2. 垂直:top center bottom
  • View Size可以使用三种方式设置:

    1. Size To Fit Content : View的大小适应内容的大小
    2. Relative To Container : 相对容器设置自身大小
    3. Fixed :设置固定的宽高

UI 常见控件

  • WKInterfaceObject - (相当于UIView)

  • WKInterfaceGroup

    • 其他的WKInterfaceObject子类对象都不能重叠,只有这个类可以同其他的WKInterfaceObject对象重叠布局。
      1. 不能重叠如图所示:


        image.png
      2. 可以重叠


        image.png
  • WKInterfaceButton - (相当于UIButton)

  • WKInterfaceLabel - (相当于UILabel)

  • WKInterfaceImage - (相当于UIImageView)

  • WKInterfaceTable - (相当于UITableView)

  • WKInterfacePicker - (相当于UIPickerView)

  • WKAlertControllerStyle - (三种弹窗方式)

    1. alert
image.png
  1. actionSheet
image.png
  1. sideBySideButtonsAlert
image.png
  • WKInterfaceMenu - (当按压时候触发显示)
    1. Apple Watch的 Retina屏是支持 Force Touch功能的, 提供了一种新的交互方式.
    2. 这是一个 WatchOS独有的类, 当页面中配置这 Menu时, 按压屏幕将会激活页面中的Menu。并且显示出Menu下的操作, 这些操作是另一个类型, WKInterfaceMenuItem。
    3. Menu最多可显示四个MenuItem, 它们可以关联各自的点击事件。
image.png
  • 其他...

导航开发

  • 所有的导航方式都可以通过代码或者SB的方式实现

  • 栈导航方式,类似UINavigationController。触碰左上角可返回

    1. pushControllerWIthName:context: 第一个参数是Controller对应的Identifier字符串,在SB中设置。可通过context传递数据。


      image.png
    2. popController

    3. popToRootController

  • modal方式

    1. presentControllerWithName:context:


      image.png
    2. dismissController
  • 分页导航

    1. 类似UIPageController。左右滑动切换
    2. presentControllerWithNames:contexts: 传入 names 和 contexts数组,通过这种方式被呼出的 Controller 将以 page 导航方式呈现。

Apple Watch 和iOS的对比

  • 只能用storyboard拖拽相应控件,搭建基本UI。
  • 简单布局,默认是垂直布局。可通过嵌套Group来完成纵向布局需求。
  • 界面之间的传值,需要依赖contextForSegue方法。
    • 在storyboard中设置segueIdentifier。
    • 同时在下一级controller的awake(withContext context: Any?)方法接收解析context。

五、App Watch与iphone 之间的通信

在 WatchOS中有个WatchConnectivity框架是专门负责 WatchOS与 iOS之间的通信的。使用Connectivity框架在 WatchKit Extension和 iOS App之间进行通信。该框架提供了两个进程之间的双向通信,并允许在前台或后台进行数据和文件的传输。

  1. 在数据传输中可以使用NSDictionary包含要发送的数据的对象,进行数据传输。

  2. 字典的键和值必须都是属性列表类型。例如NSNumbe、NSString、NSArray、NSDictionary、Bool等基础类型

  3. 如果需要包含非属性列表类型的类型,可以将他们打包到NSdata对象中,或者在发送之前将它们写入文件。

WCSession

  1. WatchConnectivity框架中主要是通过WCSession类进行数据传输的。

  2. 在WCSession类中, 还有一些属性是只能在 iOS App中使用的。isPaired, isWatchAppInstalled, isComplicationEnabled, remainingComplicationUserInfoTransfers, watchDirectoryURL。这些都是仅仅在 iOS App中可用的。

  3. 在激活Session之前,可需要先进行一个检查当前 iOS设备是否支持Connectivity框架, 方法就是调用isSupported()方法。

image.png
  1. 在激活WatchKit Extension的Session前, 不必检查是否支持Connectivity框架, 因为 WatchOS一定支持Connectivity框架。
image.png
  1. iPhone 发送消息到apple watch
image.png
  1. apple watch 发送消息到 iPhone
image.png

通信方式

前台实时传输

  • 前台传输, 是实时传输, 消息字典传输和消息数据传输。
    消息字典传输
image.png

后台不定时传输

后台传输又分为覆盖式传输, 队列式传输.

覆盖式传输
  • 后台传输中覆盖式的传输意味着, 当你进行数据传输时, 如果第一次发送的数据还没有送出去, 在此时进行第二次数据传递, 将会覆盖第一次的数据。这时数据接收方接收的数据只会有第二次的, 第一次的数据会丢失。
  • 后台传输中队列式的传输意味着, 后一次的传输不会覆盖前一次所传输的数据。系统会把所有的数据按照次序进行发送。
队列式传输
  • 字典传输,
  • 文件传输,
  • 表盘数据传输。

六、Watch App 和watchKit Extention之间数据共享

在运行时可以使用共享App Group在 Watch App和 WatchKit Extension之间共享媒体文件。

  1. 启用app group 功能:


    image.png
  2. 设置数据到APP group中:


    image.png
  3. 从app group 获取内容:


    image.png

七、Watch App通知

  • WatchOS 3.0(对应 iOS 10.0)开始, 通知开始使用UserNotifications框架。
  • apple watch 通知分为Short-Look (短视界面)和 long-look(长视界面) 两种

Short-Look(短视界面):

Apple Watch首次收到通知时, 系统会显示短视界面。short-look只是简单的通知预览, 并且short-look的通知界面是不能自定义。用户继续查看通知,则系统会从short-look界面快速转换为long-lock界面。

image.png

Long-look(长视界面):

长视界面是一个可滚动的屏幕,显示通知的内容和任何相关的操作按钮。如果没有提供自定义通知界面,Apple Watch会显示一个默认界面,其中包括应用程序图标、通知的标题和通知内容。如果提供了自定义通知界面,Apple Watch会显示自定义界面。

Long-look 通知界面分为三个区域:sash区域、content区域、bottom区域。

  • sash区域: 是覆盖式的,其中包含应用图标和应用名称。它的颜色是可以自定义的。
  • content区域: 包含有关传入通知的详细信息, 这是主要的自定义区域。
  • bottom区域: 包含关闭按钮以及在 iOS中注册的可操作按钮。
image.png

自定义长视(Long-Look)

自定义长视(Long-Look)通知界面由两个独立的界面组成:一个是静态的(Static),一个是动态的(Dynamic)。

  • 静态界面(Static Interface)是必需的,是显示通知消息以及配置任何静态图像、文本的简单方法。

  • 动态界面(Dynamic Interface)是可选的,可提供一种在运行时自定义通知内容显示的方法。

  • WatchOS会除了下面几个情况会显示静态界面(Static Interface),除此之外都会显示动态界面(Dynamic Interface):

    • 当动态界面不可用时
    • 没有足够的电量来保证显示动态界面时
    • 明确告诉 WatchOS不显示动态界面时 如下图:


      image.png
  • 静态界面的目的是在 WatchKit Extension无法及时配置动态界面的情况下能提供稳定的界面。通知界面也会显示在通知中心中。
    创建静态界面的规则:

    • 所有图片都必须位于 Watch App的包中。
    • 界面不得包含control、table、map或其它交互式控件。
    • 界面的notificationAlertLabel必须外连接到Lable上。Label的内容将会被设置为通知的消息

如何判断活跃设备

  • 当 iPhone处于未锁屏的状态时, 通知将会推送至 iPhone上。
  • 当 Apple Watch没有在用户的手腕上, 通知将会推送至 iPhone上。
  • 当 Apple Watch在用户的手腕上, 且 iPhone处于锁屏状态时, 通知将会推送至 Watch上。
  • 在推送远程通知时, 如果通知推送至 Watch上后, iPhone端是可以收到通知的, 但不会有任何提醒, 甚至屏幕都不会亮起。
  • 如果想在没有佩戴 Apple Watch时对其推送, 也可以在常规设置中禁用手腕检测选项。但需要确保 Apple Watch没在充电器上。

八、App Watch单独发送网络请求

  • APP watch 也是通过 NSUrlSession 来发送网络请求的。
  • 同时也支持AFN,kingfisher .. 等ios 第三方通用库。
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345