iOS 使用Swift開發Widget

On_looker發表於2017-12-21

最近玩手機發現了widget這個app外的控制元件還是蠻有意思的,於是在上網查了一下資料,是iOS 8的系統開始開放的一個快捷顯示操作功能,這個功能彌補了沒有3D touch功能的iPhone。雖然網上百度可以檢視到很相關的開發資料,但是我發現基本上都是Objective-C的例子,關於Swift開發的我僅僅只是看到了一篇(可能有一些我沒看到),主要是都不夠詳細,作為一個新手的我,也為了讓新手們少爬一些坑,我將詳細為大家講解如何玩轉這個widget功能。附上圖片

螢幕快照 2017-02-17 11.24.25.png

開發環境:Xcode 8.2.1 開發語言:Swift 3.0(以上)

1.第一步:如何建立widget 如何建立?在網上有已經有很多了,這裡我還是給大家截圖一下:

螢幕快照 2017-02-17 11.30.49.png

螢幕快照 2017-02-17 11.31.42.png

選擇Today Extension ,點選Next ,專案中就會自動建立一個如下圖所示的資料夾:

螢幕快照 2017-02-17 11.35.22.png

(這裡的swiftWidget資料夾是我自己命名的)

螢幕快照 2017-02-17 11.37.32.png

裡面有一個TodayViewController.swift、MainInterface.storyboard和Info.plist檔案(裡面的image的兩個資料夾是我後來放的圖片)

到這裡就建立完成了!可以執行下看看效果(建議真機上執行效果更加)

2.第二步:介面UI佈局 widget的UI佈局,一般來講以iOS 10為分界線,iOS 10和10以上是一種,iOS 8至iOS 10(不包含iOS 10)又是一種,如下圖:

iOS 10及以上.png

iOS 10以下.png

主要是背景的不同,雖然widget也可以自定義背景色,但是最好還是用系統自帶的!這裡我給了兩套UI。

編寫UI介面佈局有兩種,這裡要注意用純程式碼編寫需要修改widget資料夾裡面的Info.plist檔案裡面的NSExtension的配置檔案:如下

NSExtensionMainStoryboard:MainInterface(你的storyboard)這個是預設的

螢幕快照 2017-02-17 13.45.54.png

NSExtensionPrincipalClass:TodayViewController(你widget控制器的名稱)

螢幕快照 2017-02-17 13.48.24.png

重點注意:(我自爬出來的坑) 用Swift開發(目前的swift3.0版本)widget的UI佈局必須用storyboard拉取控制元件,也就是上面預設的,如果你用純程式碼編寫是不會有效果出來的(本人也是個純程式碼控,這裡Swift這個坑確實難搞,我經過數十次的嘗試才發現這個bug。網上根本沒有人記載,apple官方文件我也看不懂,問大神也不知道是怎麼回事,爬坑的過程是痛苦的...。如果有大神知道如何用Swift純程式碼來佈局UI的話,迫切希望您能告訴我,我也收回說這是Swift語言的bug的話)。但是Objective-C兩者都行,這裡我只說Swift如何來寫。

用storyboard來編寫UI佈局.png

具體如何給約束,還是你們自己去搞吧!這個不難!當然Swift雖說不能用純程式碼來UI,但是用storyboard拉取控制元件定義的屬性和方法還是必須要用程式碼來寫的,要不然就不能開發widget了!^_^ 對於如何使用兩套UI,這個就要根據iOS 系統來做判斷,改變image了!

3.證書申請: 如果要上架的,那麼必須要申請證書了。我的這個demo一開始就用的證書執行的(本人強迫症,只要真機執行就要用證書)這裡我就跟大家講講需要注意哪些事情: 因為widget是一個單獨的控制元件,所有它是需要獨立的bundle ID和證書的

widget的證書.png

當然主app的bundle ID也是一樣的,但是兩者不能相同的名字,這裡我用的企業級證書申請的。

這裡要注意的是widget是app的一個元件,要資料共享的話,這裡涉及到一個叫做App Groups的id設定和申請:

BFF39167-B2C0-4E39-91A8-3489F6E2953D.png

注意主app的id和widget的id設定都需要開啟App Groups這個功能,這裡我只用widget的id的截圖做示範:

widget ID的App Groups和主app ID的App Groups都需要開啟.png

還需要與你申請的App Groups的ID和主app的ID相關聯,如果你之前就已經申請了證書但是未關聯的話,請編輯bundle ID,重新新增:

CB86CBB5-697E-4EE4-A491-C1C9DE02905A.png

選中申請的App Groups的ID.png

然後在Xcode中一定要重新更新證書,開啟App Groups:

主app和widget都需要開啟這裡選中元件id.png

主app的App Groups.png

(一定能要更新證書後才能使用哦!因為蘋果的證書在網站上更新後,在你的xcode中並沒有更新,他會重新生成一個新的,需要你手動刪除再新增)。

至此,證書和App Groups的新增完成。如果有報錯,請仔細檢查(你要相信,程式是不會故意報錯的;有錯誤,一定是你那裡沒有做好,在自己身上找原因)。

4.資料共享和傳輸: 有了上面的App Groups的新增,我們就可以用程式碼進行資料傳輸和共享了。一般來講,widget這個功能只是在手機上快捷顯示的資料和操作的功能,你可以用你手機上的支付寶來進行測試操作一下。

這裡我把程式碼截圖出來,我用的UserDefaults來儲存資料,在主app裡面進行判斷,開啟相應的介面。

在TodayViewController裡面進行相應的操作.png

注意因為widget是單獨的控制元件操作,所以這麼的點選widget上的按鈕,跳轉到主app,需要給主app一個URL Schemes:

主app的URL Schemes.png

然後在主app裡面進行判斷你儲存的資料(這裡要注意,iPhone的程式有兩種情況,一種是在後臺狀態,一種是程式完全關閉狀態),跳轉相應的介面。說明一下,我上面的充電狀態是我自己給的死資料,沒有做相關的資料共享操作,自己思考解決,很簡單的。如果有需要demo的,請在github下載:https://github.com/chenwupeng/CCwidget/tree/7f28c5f458a38cb174b7e038dc21db7a7710dcd6 總結一下,這次用Swift開發Widget,確實走了很多彎路,不過還好的是,從坑裡爬起來了,也希望蘋果能快點把這個坑填起來!在這裡,希望我的這篇文章能對同行的你們有些幫助,如果發現有關swift開發的坑,儘量會幫大家指出來!

相關文章