天天看点

Watch开发:Complications教程

complications 是 watchos 2 新加入的特性,它是表盘上的小界面元素,用于自定义表盘,可以支持直接从表盘唤起自己的app。

Watch开发:Complications教程

paste_image.png

苹果提供了一个新的framework <code>clockkit</code>, clockkit 会提供一些模板clkcomplicationtemplate给我们,我们选择样式、填充自己想要展示的数据,clockkit会在某时间点向我们请求数据, 并负责将其渲染在表盘上。

watchos &gt; application &gt; ios app with watchkit app

Watch开发:Complications教程

2.配置,勾选include complication

Watch开发:Complications教程

3.如果项目已经创建,打开target -&gt; watchkit extension.你会看到complications configuration配置项。supported families 底下的五项代表着app要支持的complication families

Watch开发:Complications教程

这是这些families成员对应的在表盘上的风格

Watch开发:Complications教程

4.创建complication

打开<code>clockkit introduction watchkit extension</code>中的<code>complicationcontroller</code>,这个文件是勾选了include complication后xcode自动为我们生成的。它包含一个<code>complicationcontroller</code>类,实现了<code>clkcomplicationdatasource</code>协议. <code>clkcomplicationdatasource</code>中的方法决定了你向clockkit提供数据的方式,这些方法里都有个handler的参数,你需要在自己的实现中回调 handle,并把自己的数据作为handler回传给clockkit. 这是我们和clockkit通信的方式:

Watch开发:Complications教程

template是clockkit为开发者定义的数据模型,但是它并<code>不单纯是数据模型</code>,不同的模版有不同<code>视图布局的风格</code>。

比如,对5种complication类型,类型和布局:

Watch开发:Complications教程
Watch开发:Complications教程

比如,对于clkcomplicationtemplatemodularlargestandardbody

这个类,它的属性和布局对应如下:

Watch开发:Complications教程

在 wwdc中说,这里用imageprovider而不是uiimage, 用textprovider而不是nsstring,是因为在watch表盘的complication视图尺寸很小,防止出现文本截断等一些不好的体验,开发者使用provider可以更好说明自己的意图 , 同时clockkit会为我们做布局和显示的其他工作。

Watch开发:Complications教程

timeline是clockkit抽象出来的一个时间轴。开发者的数据单元用clkcomplicationtimelineentry 模型包装,绑定在timeline上某一点时刻. 当时间走到那一刻,clockkit会自动将我们传给的数据内容展示在表盘。在某个时间段中,clockkit 会一直展示上一刻展示的数据, 直到下一刻数据更新点。如下图:

Watch开发:Complications教程

在[11, 12) 这个域,表盘上的温度展示的是11am的时候绑定的数据55。12pm这一刻,又更新为56.

再比如说日历应用需要提前提醒用户"4:00-5:00要剪头发",开发者就需要把"4:00-5:00要剪头发"这个提示绑定在1pm这个时刻上,而不是直接绑在4pm这个时间点上。 如下图:

Watch开发:Complications教程

在代码实现中,clkcomplicationtimelineentry这个类,包含一个date属性,可以将template数据绑定在时间轴的某一个时刻上。

Watch开发:Complications教程
Watch开发:Complications教程

clockkit会回调这个方法,extension通过调用handler,向clockkit回传数据

Watch开发:Complications教程

那么如果我想给clockkit提供其他时刻的数据呢? 这里,我们在时间轴上每15分钟绑定一条数据,我们需要用到<code>- (void)gettimelineentriesforcomplication:(clkcomplication *)complication afterdate:(nsdate *)date limit:(nsuinteger)limit withhandler:(void(^)(nsarray&lt;clkcomplicationtimelineentry *&gt; * __nullable entries))handler</code>方法。

如图

Watch开发:Complications教程

如果要绑定在当前时间之前的数据实现另一个方法

Watch开发:Complications教程

现在进行真机调试,xcode schema中选择complication,手机和watch提前配置好,run

按下 digital crown 以前往表盘。

用力按压显示屏。模拟器 command+shift+2

Watch开发:Complications教程

向左或向右轻扫以选取某个表盘,然后轻点“自定”。 模拟器 command+shift+1

Watch开发:Complications教程

向左或向右轻扫以选择某个功能,然后转动 digital crown 对其进行更改。例如,您可以更改秒针的颜色或表盘上的标记。

Watch开发:Complications教程

向左轻扫至最左边,以编辑功能栏。轻点某个功能栏以将其选中,然后转动 digital crown 对其进行更改。您也可以添加来自其他应用的功能栏。

完成后,按下 digital crown 以存储您的更改。

文字没显示出来,呃,先到这儿,明天看看。

<a href="https://github.com/suelan/sueblogdemo/tree/master/watch" target="_blank">demo</a>

参考文章

<a href="https://developer.apple.com/library/content/documentation/general/conceptual/watchkitprogrammingguide/complicationessentials.html#//apple_ref/doc/uid/tp40014969-ch27-sw1" target="_blank">https://developer.apple.com/library/content/documentation/general/conceptual/watchkitprogrammingguide/complicationessentials.html#//apple_ref/doc/uid/tp40014969-ch27-sw1</a>

<a href="https://code.tutsplus.com/tutorials/an-introduction-to-clockkit--cms-24247" target="_blank">https://code.tutsplus.com/tutorials/an-introduction-to-clockkit--cms-24247</a>

<a href="http://www.informit.com/articles/article.aspx?p=2429818" target="_blank">http://www.informit.com/articles/article.aspx?p=2429818</a>

<a href="http://www.sneakycrab.com/blog/2015/6/10/writing-your-own-watchkit-complications" target="_blank">http://www.sneakycrab.com/blog/2015/6/10/writing-your-own-watchkit-complications</a>

继续阅读