iOS

iOS16 ロック画面ウィジェットの実装解説

iOS16から導入された、ロック画面に表示できるウィジェットの実装方法を解説します。

XCodeのtarget欄に有る「 + 」ボタンを押します。

 

Widget Extension、を選んで、Next

唐突に聞かれるので、Activate!

これで、ウィジェットに必要なファイルが自動生成されます。
後は、ウィジェットの形をSwiftUIに書き込めば完成です。

今回は、LockWid、という名前にしたので、LockWidを開きます。
そしたら、body、って書いてある画面を作っている部分をこんな感じにして

struct LockWidEntryView : View {
  var entry: Provider.Entry

  var body: some View {

    // 背景と画像を重ねて表示する
    return ZStack {
          // これを入れると背景が表示される
      AccessoryWidgetBackground()

      // ワンポイント画像。アプリのアイコンとかが良いかもね。
      Image("lockwidget").resizable().frame(width: 50, height:50)
    }
  }
}

 

そして、今回は、丸いロック画面ウィジェットにするので、丸いロック画面ウィジェット(.accessoryCircular)を指定します。

struct LockWid: Widget {
  let kind: String = "LockWid"

  var body: some WidgetConfiguration {
    StaticConfiguration(kind: kind, provider: Provider()) { entry in
      LockWidEntryView(entry: entry)
    }
    // 説明タイトル
    .configurationDisplayName(NSLocalizedString("widget_dispalyname", comment: "アプリボタン"))
    // 説明詳細
    .description(NSLocalizedString("widget_description", comment: "アプリを素早く起動できます。"))
    // ウィジェットの種類
    .supportedFamilies([
      // 丸いロック画面ウィジェット
      .accessoryCircular
    ])
  }
}

 

ローカライズ対応させている 「widget_dispalyname」 と 「widget_description」 はロック画面ウィジェットを追加する時に表示される説明文になります。

アプリ側のローカライズファイルに、ウィジェットのローカライズ文言も入れる場合は、ロック画面ウィジェットからも参照できるよう、チェックを入れるのを忘れずに!

これでもう完成です!超簡単。
かわいいmizutamaさんのロック画面ウィジェット、誕生!