天天看點

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>

繼續閱讀