IOS Widget（4-1）：建立可配置小元件（靜態配置資料）

popfisher發表於2021-05-07
iOS元件

引言

  經過前面幾篇文章閱讀，已經掌握開發一款小元件的基本技能了，接下來開始掌握一些相對高階一點的技能。本文建立一個可配置小元件，通過修改時間型別，讓Text空間顯示不同格式的時間。

本文大綱

  • 新增動態配置 Custom Intent Definition
  • 可配置小元件框架程式碼解析
  • 修改 .intentdefinition 檔案實現修改時間型別
  • 程式碼讀取配置資訊，實現動態佈局

新增動態配置

方式1：新建元件的時候勾選 “Include Configuration Intent” 核取方塊。

方式2：在您的Xcode專案中，選擇“File”>“New File”，然後選擇“SiriKit Intent Definition File”。單擊”Next“，並在出現提示時儲存檔案。Xcode在專案中會生成一個新的.intentdefinition 檔案。

可配置小元件框架程式碼解析

  如果預設用方式1 建立元件，程式碼如下，如果通過方式2，請參考下面的程式碼對應修改即可，註釋中已經標明與普通小元件程式碼的不同點。

//
//  WidgetConfigIntent.swift
//  WidgetConfigIntent
//

import WidgetKit
import SwiftUI
import Intents

struct Provider: IntentTimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        // 不同點3：傳遞預設引數
        SimpleEntry(date: Date(), configuration: ConfigurationIntent())
    }

    // 不同點4：比使用StaticConfiguration時多了一個配置引數
    func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), configuration: configuration)
        completion(entry)
    }

    // 不同點5：比使用StaticConfiguration時多了一個配置引數
    func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        // Generate a timeline consisting of five entries an hour apart, starting from the current date.
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate, configuration: configuration)
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    // 不同點2： 多了一個配置引數，小元件編輯介面設定引數會通過這個傳遞進來
    let configuration: ConfigurationIntent
}

struct WidgetConfigIntentEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        Text(entry.date, style: .time)
    }
}

// 小元件入口
@main
struct WidgetConfigIntent: Widget {
    let kind: String = "WidgetConfigIntent"

    var body: some WidgetConfiguration {
        //不同點1： 這裡使用 IntentConfiguration， 對比 StaticConfiguration
        //這裡還多了一個引數 intent: ConfigurationIntent.self
        IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
            WidgetConfigIntentEntryView(entry: entry)
        }
        .configurationDisplayName("可配置小元件")
        .description("選擇不同的時間型別")
    }
}
// 除錯預覽
struct WidgetConfigIntent_Previews: PreviewProvider {
    static var previews: some View {
        WidgetConfigIntentEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent()))
            .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

修改 .intentdefinition 檔案實現修改時間型別

  1. 修改配置名稱為TimeTypeConfiguration
  2. 新增引數型別TimeTypeEnum，這裡先用列舉型別

  1. 新增引數timeType引數，型別指定為TimeTypeEnum

程式碼讀取配置資訊，實現動態佈局

  現在編譯應該不通過，需要修改一下WidgetConfigIntent.swift中的程式碼

  1. 把程式碼中 ConfigurationIntent 替換為 TimeTypeConfigurationIntent（希望到這裡你能領悟到點什麼）
    執行程式碼，在桌面新增元件，長按元件 > 編輯小元件可以看到如下圖所示（目前點了還沒有什麼效果）

    程式碼中獲取配置資訊，動態改變佈局。接下來再編輯小元件，切換時間time/date時介面會發生響應的變化
struct WidgetConfigIntentEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        // 根據配置資訊動態改變佈局
        if (entry.configuration.timeType == TimeTypeEnum.time) {
            Text(entry.date, style: .time)
        } else {
            Text(entry.date, style: .date)
        }
    }
}

結語

  本文講解了實現一個簡單的可配置小元件，不過資料都是靜態配置，下一節講解動態修改配置資料，這個在實際開發中也是比較重要的環節。

相關文章