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閱讀 230,563評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,694評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,672評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,965評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,690評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,019評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,013評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,188評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,718評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,438評論 3 360
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,667評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,149評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,845評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,252評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,590評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,384評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,635評論 2 380