【iOS】iPhoneの一等地にロック画面ウィジェットを設置しよう！

リルオッサ

2023.03.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

作ったアプリをユーザーの皆様に出来るだけ多く触っていただけると嬉しい限りですが、その為にも触れ易い位置にアプリを設置することが大事だと思います。

iOS 16からロック画面をカスタマイズできるようになっており、ロック画面にもウィジェットを設置することが可能です。ロック画面こそがiPhoneを手に取った時のユーザーに一番近いエントリーポイントになるので出来るなら対応しておきたいところですね。

新機能!?となると、実装に少し腰が重くなる気持ちもありますが、とても簡単に実装できるので実装方法について紹介していきます。

はじめに

ウィジェットのFamilyには様々なものがありますが、今回はロック画面ウィジェットだけに使うものを抜粋して紹介いたします。今回はロック画面にウィジェットを設置することに特化した記事になる為、TimelineProviderのメソッドやウィジェットの更新の流れについての説明等は行っておりません。

環境

Xcode 14.2
iOS 16.2

メニューバーの File > New > Target を選択し、表示されたポップアップ上でWidget Extensionを選択します

名前は任意の名前を設定します。今回はLockScreenWidgetという名前にしました。

その後、アクティベートするか問われるのでアクティベートします。

ロック画面用のWidget Family

今回はロック画面に対応するWidgetFamilyのみを追加する為、そのファミリーのみの値を作成しました。各ファミリーがどういった見え方をするかは後述します。

extension WidgetFamily {

    static let lockScreenFamilies: [WidgetFamily] = [
        .accessoryInline,
        .accessoryCircular,
        .accessoryRectangular
    ]
}

Widget Extensionを作成した時に自動で生成されるWidget構造体のbodyに.supportedFamiliesを追加します。値は上記で作成したロック画面用のファミリーを設定しています。

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

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            LockScreenWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
        // 追加
        .supportedFamilies(WidgetFamily.lockScreenFamilies)
    }
}

ロック画面用ウィジェットのViewを設定

Widget Extensionを作成した時に自動で生成されるEntryView構造体のbody内にロック画面用のウィジェットのViewを設定します。

@Environment(\.widgetFamily)で現在のWidgetFamilyの状態が取得できる為、その値によってViewの見た目を変更しています。

struct LockScreenWidgetEntryView : View {

    @Environment(\.widgetFamily) var family

    var entry: Provider.Entry

    var body: some View {
        switch family {
        case .accessoryInline:
            Text("インライン")
        case .accessoryCircular:
            CircularView()
        case .accessoryRectangular:
            RectangularView()
        default:
            Text(entry.date, style: .time)
        }
    }
}

struct CircularView: View {

    var body: some View {
        Image(systemName: "face.smiling")
            .resizable()
    }
}

struct RectangularView: View {

    var body: some View {
        Rectangle()
            .fill(.red)
            .overlay {
                Text("長方形")
            }
    }
}

たったこれだけでロック画面ウィジェットの実装は完了です。どのように表示されるか見てみましょう。