如何為 iOS14 創(chuàng)建一個 Widget

Widget 是 iOS14 的新特性,是一個桌面小插件,它的 UI 需要使用到 SwiftUI, 所以想要寫 Widget 首先需要學(xué)會寫 SwiftUI.
最終代碼 Github(https://github.com/wintelsui/iOS14Widget)

準(zhǔn)備寫個包括三種樣式的簡單的 Widget

WidgetFamily中包含 3 中定義:
systemSmall // A small widget.
systemMedium //A medium-sized widget.
systemLarge // A large widget
具體大小可以看蘋果的設(shè)計指南
https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/widgets/
Widget 又有 2 中配置,靜態(tài)和動態(tài),區(qū)別在于是否使用了Intent
StaticConfiguration 和 IntentConfiguration.
如果需要"編輯小組件"中設(shè)置 Widget 參數(shù),那么就需要用到Intent.

配置.jpg

隨意創(chuàng)建一個iOS項(xiàng)目(無關(guān)緊要,因?yàn)槲覀冎辉诤?Widget), 然后創(chuàng)建Target 選擇 Widget Extension

image.png

因?yàn)樾枰@示 "編輯小組件" 中配置參數(shù),所以選擇 "Include Configuration Intent"

image.png

創(chuàng)建完成后,我們先來編輯一下TestWidget.intentdefinition文件, 這里我將它自動生成的Configuration(改一個有辨識度的名字,改名字這一步不做也可以) 隨意的改成 TestWidgetConfiguration,去TestWidget.swift文件中將原有的ConfigurationIntent都替換為TestWidgetConfigurationIntent, 并 build 一次(會自動生成TestWidgetConfigurationIntent.swift 類), 讓后在 Parameters 中添加兩個參數(shù),并配置類型.

image.png

現(xiàn)在我們運(yùn)行一下代碼,并在手機(jī)上把 Widget 添加到桌面, 長按Widget顯示菜單,選擇"編輯小組件",這時我們將看到我們的參數(shù):

IMG_9847.jpg

下面到了去寫代碼的時間了

模板生成了一些必要的代碼:

image.png

struct PlaceholderView : View {} 是臨時展示的視圖
struct TestWidgetEntryView : View {} 是 Widget 展示的主要視圖
struct SimpleEntry: TimelineEntry {} 是 Widget 的時間線中必要的對象
struct Provider: IntentTimelineProvider {} 控制著 Widget 的刷新,我們要提供一些用于刷新的內(nèi)容,比如請求網(wǎng)絡(luò)數(shù)據(jù)后提交給時間線顯示數(shù)據(jù).

/// 用于展示時候的快照(在插件中心選擇插件時候)
public func snapshot(for configuration: TestWidgetConfigurationIntent, with context: Context, completion: @escaping (SimpleEntry) -> ()) {}

/// 是真是的展示情況
public func timeline(for configuration: TestWidgetConfigurationIntent, with context: Context, completion: @escaping (Timeline<Entry>) -> ()) {}

在這里 timeline 這個方法的刷新規(guī)律,并不清楚,看WWDC視頻的時候,感覺難道是 30 分鐘左右嗎? 反正應(yīng)用并不知道什么時候會刷新(當(dāng)然貌似可以從主程序中調(diào)用 WidgetCenter.shared.reloadAllTimelines() 強(qiáng)制刷新),但是不管怎樣,我們需要在timeline被調(diào)用時,提供數(shù)據(jù)用于展示.

開始編寫代碼 timeline(for configuration:....方法

    public func timeline(for configuration: TestWidgetConfigurationIntent, with context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        
        // 讀取了設(shè)置中的參數(shù), 實(shí)際上并不用,只是展示一下這個功能怎么寫
        let userName = configuration.userName ?? ""
        let showFullName = configuration.showFullName?.boolValue ?? true
        
        //此處并不著急completion(),可以發(fā)起網(wǎng)絡(luò)請求等
        /*
         let reqUrl = URL(string: "https://api.xygeng.cn/Bing")!
         let task = URLSession.shared.dataTask(with: reqUrl) { (data, response, error) in
             guard error == nil else {
                 let entryDate = Calendar.current.date(byAdding: .second, value: 20, to: Date())!
                 let entry = SimpleEntry(date: entryDate)
                 let timeline = Timeline(entries: [entry], policy: .after(entryDate))
                 completion(timeline)
                return
             }
             let _ = getCommitInfo(fromData: data!)
                 let entryDate = Calendar.current.date(byAdding: .second, value: 20, to: Date())!
                 let entry = SimpleEntry(date: entryDate)
                 let timeline = Timeline(entries: [entry], policy: .after(entryDate))
                 completion(timeline)
             }
          task.resume()
         */
        
        //本代碼 在 2 秒后刷新界面
        let entryDate = Calendar.current.date(byAdding: .second, value: 2, to: Date())!
        let entry = SimpleEntry(date: entryDate)
        let timeline = Timeline(entries: [entry], policy: .after(entryDate))
        completion(timeline)
    }

視圖代碼,使用 @Environment(.widgetFamily) var family 來判斷當(dāng)前是什么大小樣式,其中PhotoView不多說了,是 Image 加了邊框.

struct TestWidgetEntryView : View {
    var entry: Provider.Entry

    @Environment(\.widgetFamily) var family
    
    @ViewBuilder
    var body: some View {
        switch family {
            case .systemSmall:
                ZStack {
                    Color(red: 0.55, green: 0.73, blue: 1.0)
                    VStack(spacing: 10) {
                        PhotoView(imageName: "aragaki")
                    }
                }
            case .systemMedium:
                ZStack {
                    Color(red:0.61, green:0.35, blue:0.71)
                    HStack(spacing: 10) {
                        PhotoView(imageName: "aragaki2")
                        Text("Aragaki")
                            .font(Font.system(size: 18))
                            .fontWeight(.heavy)
                            .shadow(color: Color.gray, radius: 5, x: 2, y: 2)
                        
                    }
                }
            default:
                ZStack {
                    Color(red:0.97, green:0.54, blue:0.88)
                    VStack {
                        HStack(spacing: 10) {
                            PhotoView(imageName: "aragaki3")
                            Text("Aragaki")
                                .font(Font.system(size: 18))
                                .fontWeight(.heavy)
                                .shadow(color: Color.gray, radius: 5, x: 2, y: 2)
                            
                        }
                        
                        Text("Aragaki")
                            .font(Font.system(size: 18))
                            .fontWeight(.heavy)
                            .shadow(color: Color.gray, radius: 5, x: 2, y: 2)
                        
                    }
                }
        }
    }
}

最終運(yùn)行效果

IMG_9852.JPG

最終代碼 Github(https://github.com/wintelsui/iOS14Widget)