Widget機能を実装してみた

iOS14から、ウィジェットをホーム画面に配置することが可能になりました。

ウィジェットとはホーム画面に簡単な情報をミニサイズで表示する機能で、アプリを開くことなく情報をチェックすることができます。

こんな便利な機能を使わないのはもったいないので、今回試してみました。

開発環境

Xcode 13.2.1
iOS：15.2

Xcodeで新規プロジェクトを作成する

Create a new Xcode Projectを選択します。

今回はSingle View Applicationのプロジェクトを作成し、Product Nameに任意の名前を指定（ここでは「researchWidget」）します。

Widget Extensionを追加する

File -> New -> Target -> Widget Extensionを選択します。

追加するtargetのProduct Nameに任意の名前を入力し（本件では「widget」を指定）、最後にFinishボタンを押します。

これで、Widget機能に関係するフォルダが作成されます。

作成後、デフォルトのウィジェットが追加されているかと思います。

追加したWidgetターゲットを選択し、ビルド＆実行してみましょう。

時間を表示するウィジェットが表示されるかと思います。

Widgetファイルのコードの内容の確認

import WidgetKit
import SwiftUI
import Intents

struct Provider: IntentTimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), configuration: ConfigurationIntent())
    }

    func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), configuration: configuration)
        completion(entry)
    }

    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)
    }
}

ProviderはWidgetの管理コアであり、TimelineProviderまたはIntentTimelineProviderプロトコルに準拠しています。

placeholder：デフォルトのビューを表示するために使用します。例えば、データ取得できない場合は、デフォルトのインターフェイスを表示します。
getSnapshot：プレビュービューを表示するために使用します。例えば、ユーザーがWidget Galleryでサンプルデータを指定して表示します。
getTimeline：実際のウィジェット表示に使用します。

struct SimpleEntry: TimelineEntry {
    let date: Date
    let configuration: ConfigurationIntent
}

struct widgetEntryView : View {
    var entry: Provider.Entry

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

widgetEntryView：　WidgetのUI作成に使用します。

@main
struct widget: Widget {
    let kind: String = "widget"

    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
            widgetEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

struct widget_Previews: PreviewProvider {
    static var previews: some View {
        widgetEntryView(entry: SimpleEntry(date: Date(), configuration: ConfigurationIntent()))
            .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

widget：　Widgetの表示名と説明の設定に使用します。ウィジェットを編集するときに表示します。

WidgetのUIをカスタマイズする

SwiftUIで簡単にwidgetEntryViewの内容を実装してみました。

struct widgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text("Widget")
                .font(.title)
                .bold()
            HStack(alignment: .lastTextBaseline){
                Text("試してみた")
                    .font(.system(size: 14))
                    .bold()
                Spacer()
                Spacer()
                VStack(alignment: .trailing){
                    Image("sakura")
                        .resizable()
                        .frame(width: 40, height: 40, alignment: .center)
                }
            }
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
        .padding()
        .background(
            Image("bg")
                .resizable()
                .scaledToFill()
        )
        .widgetURL(URL(string: "example://widget_deeplink"))
    }
}

Widgetのタップイベント

Widgetをタップしたら、デフォルトは対応のアプリへ遷移するのですが、deep linkも使えます。

.widgetURL修飾子でURLがアプリでハンドリングできるようになります。

        )
        .widgetURL(URL(string: "example://widget_deeplink"))

Swiftで開発したアプリの場合、SceneDelegateのopenURLContextsでURLを受け取ることが可能です。

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?
    func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
        if let url = URLContexts.first?.url {
            print(url)
        }
    }
}