しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

ウィジェットをiOS18のホーム画面カスタマイズに対応

iOS18ではホーム画面をカスタマイズできるようになりました
カスタマイズすると下のようにホーム画面の色を変える事ができます

アイコンの対応方法は下で書いたので、次はウィジェットの対応方法について調べようと思います

アプリアイコンをiOS18のホーム画面カスタマイズに対応 - しめ鯖日記

まずはXcodeからウィジェットを追加します

下のように様々な背景や文字が入っているウィジェットを作成しました

ホーム画面を「ダーク」にした時はやダークモードにした時は下記のように表示されます

ただホーム画面を「色合い調整」にすると下のように一部文字が見えなくなってしまいます
おそらくラベルの背景の色や黒系は一括で白に変換されているのだと思います

それとラベルの背景を下のようにwhiteにした場合も「色合い調整」では白に変換されました
確認した所、ウィジェット自体の背景は黒・それ以外の塗りつぶしをした所は白に変換されるようです

background(Color.blue.opacity(0.5))などで背景色の透過度を変更した場合、ウィジェット上の色も少し薄くなります

「色合い調整」を選んでいるかどうかですがwidgetRenderingModeという変数で取得する事ができます
「色合い調整」の場合はwidgetRenderingModeはaccented、それ以外ではfullColorになります

@Environment(\.widgetRenderingMode) var widgetRenderingMode

ダークモードかどうかについてはcolorSchemeを使って判定できます

@Environment(\.colorScheme) var colorScheme

色合い調整で選んだ色にしたい場合、widgetAccentableを使います

Text("Text1").widgetAccentable()

下のように文字が選んだ色になります

背景を選んだ色にしたい場合、下のようにRectangleを使います
ちなみに親View(VStack)などにwidgetAccentableを使うと子ViewはwidgetAccentable(false)でも無効化ができないようなので注意が必要です

Text("Text1").background {
    Rectangle().background(Color.red).widgetAccentable()
}

実行結果は下の通りです

画像のレンダリングですが、widgetAccentedRenderingModeというメソッドで調整できるようにです
こちらについては機会あった時に詳しく調べてみようと思います

また、widgetRenderingModeを常にfullColorにする方法もないか探したのですが見つかりませんでした

最後にwidgetRenderingModeがaccentedの時に複数色を使う方法についても見つかりませんでした
ただ透過度の調整で複数色を表現できそうなので、opacityで頑張ってみようと思います

参考URL

How to support tinted home screen widgets in iOS 18 | Filip Němeček

iOS 18 Widgets: Adding Support for Tint Color 👩‍💻 | by Aleksandra Bashkirova | Sep, 2024 | Medium