ウィジェットにおけるSwiftUIビューの構築

ウィジェットはAppが提供する一部の情報を表示し、ホーム画面やTodayビューに配置することもできます。SwiftUIを用いて、ウィジェットのビューを最初から構築する手順をご説明します。ウィジェットに特化した構成に必要となるシンタックスをブラッシュアップし、そのコマンドを取り込み、一目で分かりやすい体験のためにウィジェットのインターフェースをカスタマイズする方法もお伝えします。ウィジェットについての更なる情報は"Meet WidgetKit"と"Widgets Code-along"をご覧ください。

リソース

関連ビデオ

WWDC21

優れたウィジェットの原則

WWDC20

こんにちは WWDCへようこそ “ウィジェットにSwiftUIビューを作成する” iOSシステムエクスペリエンスチームのエンジニアのニルスです今日はウィジェット用のSwiftUIビューをビルドする方法をご紹介します

最初に SwiftUIでウィジェットがどのように有効化されているかをお話しします次にウィジェットのビューを一緒にビルドすることをメインに据え最後にウィジェットをすばらしいものにする新しいAPIをいくつかお見せします

SwiftUIとWidgetKitを使えばビューのタイムラインをホーム画面に適切なタイミングで表示できます SwiftUIの適応性のおかげで iOSとmacOSの両方にデプロイするウィジェットを書くことができますウィジェットは自己完結型なので iOS 14やmacOS Big Surで SwiftUIを使ったり学習したりするのに最適ですたとえSwiftUIが非対応の古いOSにデプロイする必要があっても有益です私は最近コーヒーをよく飲みます飲みすぎる日もあるくらいですそこで私は飲んでいるカフェイン飲料のログを記録するアプリケーションを作りましたこれは体内のカフェインの摂取量の推測することもでできます “ワイアード”と名づけましたウィジェットはすばらしい機能だと思いますカフェインをどの程度摂取しているかを一目で確認できるからですウィジェットをこのような見た目したいとします

まずアプリケーションの外観の特徴と配色の方法を見てください上部は現在の私の体内のカフェイン量で下部は最後に飲んだの飲み物と経過した時間です

カフェイン量の表示の背景に注目するとウィジェットの形状と同心円状になっています

またウィジェット下部の経過時間はリアルタイムで常に正確に表示しています

では SwiftUIで簡単に作成できるか試してみましょう

すでにタイムラインを読み込んだウィジェットコンフィギュレーションなのでウィジェットのビューの作成にフォーカスできます今回私はSwiftUIを使ってウィジェットビューをビルドしますつまりあなたのアプリケーションでも同じように使えるということです

これが私のビューとそのプレビューです Widget Preview Contextを使いながら表示させたいウィジェットファミリーのプレビューを指示しますこの場合はsystem Smallです

まずUIを駆動するデータの構造体を定義してみましょう

Caffeine Widget Dataには３つのプロパティがありそれぞれカフェインの量と飲み物の名前そして飲んだ日付ですまたプレビューをリアルに見せるためにプレビュー値はsteady constantを使います

ではプロパティをビューに追加してみましょう

次にプレビューデータを使うためにプレビューを更新します

これでビューのビルドを始められるのでコンテンツを追加してみましょう

ビューを縦に重ねるには VStackを使います上部にある本文フォントが太字の “caffeine”という文字列には定義済みのアセットカタログにあるカスタムカラーが使われています

その下に表示されている量は大きなフォントですが見た目は同じですフォントが大きい理由はレイアウト上で必要ならば文字を縮小できるようにするためですなのでここで最小限のスケールファクタを設定したのです

次はウィジェットに個性を与えてみましょう ZStackを使って背面に背景色を付けてみます ZStackを使えば互いのトップにビューを重ねて配置できます

お気づきでしょうがウィジェットが自動的に形状サイズ角丸をシステムから取得しました

では最後に飲んだ飲み物の名前と経過時間の情報も加えていきます

経過時間の表示に新しいイニシャライザを使用していますそれは日付とスタイルのフォーマットを拾うものですこのイニシャライザを使うと指定した日付から時間の経過に従って自動的にコンテンツがカウントアップまたはダウンしますこれは躍動感のあるウィジェットになるすばらしい方法ですキャンバス内のlive previewボタンで見え方を確認してみましょう経過時間がカウントアップされています

文字列補間を使って内容を追加できるのでこのように“ago”という言葉を追加しました

文字列補間を使うとフレームワークがあなた用にローカライズされた文字キーを作成しこのフォーマットが他の地域や言語にも対応できるようになります

テキストの色が異なる２つのグループコンテンツがあります上部にある茶色のテキストとその下にある白いテキストですこれら２つをVStacksで分割しその間にSpacerを追加しますこのテキストをクリックし “Embed in VStack”を選択します

このテキストをVStackの中に移動させます

次にこのテキストも同様に “Embed in VStack”を選択します

そして２番目のテキストを内側に移動させます

それから両者の間にSpacerを追加します

両方のVStacksを左寄せにしてみますキャンバスを使う場合は vertical stackセクションの leadingボタンをクリックします

ここと―

ここです

少し複雑になってきたので下と上の部分を抽出して固有のサブビューに分割します SwiftUIなのでビューが安くほとんどコストがかかりません

ここへ移動してVStackをクリックし “ExtractedView”を選択しますこれをCaffeine Amount Viewと名づけましょう

データを保持するためにプロパティを追加しましょう

それから下のVStackについても同様に行います “Extract Subview”をクリックしこれを“Drink view”と名づけましょう

そしてここにも同じプロパティを追加します

最後にデータを動かしてみましょう

見た目は同じですがよりよいコード構造でビルドできます

中央寄せにする代わりにコンテンツを左寄せにします CaffeineAmountViewのコンテンツを HStack内にラップし最後にSpacerを追加します移動して“Embed in HStack”をクリックします

“HStack”つまり水平スタックを使用するとビューを隣り合わせに配置できます最後にSpacerを置くことで左端に押し寄せるように指示を出しています

最小間隔を必要としないため最小の長さをゼロにすることでコンテンツができるだけ多くのスペースを取ることができます

見栄えをよくするためパティングを追加してみましょう SwiftUIだからこそキャンバスでできるのですメインのVStackにカーソルを置きます

そしてAttributes Inspectorの paddingセクション内で４つのチェックボタンをクリックします

パディングで数値を指定していないことが分かります動作しているデバイスとコンフィギュレーションに対し SwiftUIが適切なデフォルト値を使用するのです

Caffeine Amount Viewを強調するための指示を背景に出してみます

アセットカタログにある “latte”という色を使います４つのチェックボックスをクリックし再度パディングを追加します

少し多すぎるので数値を８にします

この形状の角は丸みを帯びていませんね Human Interface Guidelines for Widgetsにある通り角丸四角形はウィジェットのビジュアルデザイン言語の重要なパーツですではこの角も丸めてみます

このように角丸モディファイアのコードを使えるはずです

よさそうな値を見つけてくださいしかし時に別のデバイスがウィジェットの半径を変えてしまうことがあり少し厄介です

iOS14ではもっといい方法があります新機能である Container Relative Shapeです

これは新しい形状タイプのひとつです形状の位置に基づいて適切な角丸を持った親コンテナにより最も近いコンテナ形状のパスを取得しますこの例ではシステムがウィジェットのコンテナ形状を定義するので同心円状の角の取得がとても簡単に行えます

メインのVStackのパディングの値を変えると Caffeine Amount Viewの角半径が変化しますそのため周りの境界線の太さがその角の曲線周りで一定に保たれるのです

最後に一番大切なコンテンツを指示しましょう Spacerを使って少し空間を作ります

さあ私たちが目指していたデザインが完成しましたいいデザインだと思いますホーム画面に追加されるのが楽しみですダークモードでの見え方を確認してみましょうまずプレビューを複製してからモディファイアを追加してダークモードにします

配色はすべて外観を暗くする変化を定義したアセットカタログから引っ張っているのでウィジェットが自動的にダークモードを適用します

私の母もコーヒーをよく飲むのでワイアードを知ったらきっと喜ぶでしょうしかし母には下部の小さな文字が読みにくいかもしれませんそこで大きな文字を好むすべてのユーザーのために dynamic typeをサポートするウィジェットに更新してみましょうまずは新しいプレビューを追加しより大きなサイズのカテゴリのウィジェットを確認します

ここではsize categoryを extra Extra Extra Largeにしました

すばらしい見栄えです SwiftUIの適正のおかげで何も変える必要がありませんでしたそして追加作業なしでより包括的なウィジェットをビルドしました

次にプレースホルダについてお話しします優れたウィジェットにはプレースホルダーが必要です拡張からのビューを要求した場合やデバイスがブロックされた場合でもシステムが使えるためですウィジェットと同じ見た目ですが具体的なコンテンツはありませんプレースホルダーとしても使えるようにビューを修正してみましょうまず既存のものをコピーして別のプレビューを作成します

そして“is placeholder true” モディファイアを追加します

自動的にコンテンツが入れ替わってテキスト部分が丸みを帯びた四角形になりましたコンテンツにマッチするようにスタイルが作られたのです

プレースホルダにテキストを保存したい場合は “is placeholder false” モディファイアを追加します “caffeine”という言葉を追加しましょう

ウィジェットのプレースホルダとして使用することでビューを更新しました簡単ですね

この“is placeholder”モディファイアは後のシードで利用できるようになりますウィジェットは３つのファミリーで構成されています smallとmediumそしてlargeです別のウィジェットファミリーを使いウィジェットの更新を見てみましょう system Mediumで別のプレビューを追加して始めます

よさそうに見えますが余分なスペースがあります

このアプリケーションではユーザーが飲み物の写真を記録できますそこで写真をウィジェットに入れ限られた画面を上手に使いましょうまず写真の名前を保存するためにデータ構造体にプロパティを追加します

そしてプレビューアセットカタログからサンプル写真を追加します

写真をビューに追加します system Mediumでは飲み物の写真だけを表示させますこの条件付きのレイアウトを作成するためウィジェットファミリーに環境変数を追加します

写真を既存のコンテンツの横に配置したいのですべてのコンテンツをHStack内にラップします

もしsystem Mediumウィジェットでかつ写真を表示する場合は Imageを追加しましょう

そしてresizableにします

いいですね

最後に別のプレビューを追加してサイズ用プレースホルダを見てみましょうコツがつかめてきたでしょう既存のものをコピーしてデモティファイを追加しプレースホルダーを作成します

SwiftUIが自動的に画像を背景着色されたコンテンツに置き換えましたね system Mediumのプレースホルダーを作成するのに追加作業はしていませんすごいでしょう？ SwiftUIでウィジェットビューをビルドすることはこんなに簡単です先ほどデモでお見せした２つの新しいAPIについてお話しします

まずウィジェットで美しく見えるような角丸の作り方です角丸四角形を入れ子にする時全く同じ角半径を使うことは避けたいでしょう同心円状がいいはずです

iOS14ならそれが難なくできますビューの背景として Container Relative Shapeをセットすると SwiftUIがそこから取得します簡単すぎるくらいです

iOS14にはスタイルに従って日付をフォーマットするための新しいイニシャライザをテキストに追加しましたそのためカウントダウンやタイマー絶対日付や相対日付などを作ることができますこれは時が経つにつれ自動的に更新されるので躍動感のあるウィジェットになる優れた方法です

ではまとめましょう SwiftUIで魅力的なウィジェット体験をユーザーに提供できますウィジェットはSwiftUIに既存の適用可能なレイアウト用のサポートを活用します

ウィジェット間で共通した現象をより簡単にする新しいAPIを追加しましたウィジェットだけでなくどこでも動作するのでぜひアプリケーションにも使ってみてください

ウィジェットのタイムラインの詳細は “Meet WidgetKit”をご覧くださいまた私の同僚のイジーの “Widgets Code-along”では ScratchからWidgetKitを使ってウィジェットを作る過程が見られますすてきなWWDCをお過ごしくださいありがとうございました

18:40 - Concentric corner radius with ContainerRelativeShape

// Concentric corner radius with ContainerRelativeShape

struct PillView : View {
    var title: Text
    var color: Color

    var body: some View {
        Text(title)
            .background(ContainerRelativeShape().fill(color))
    }
}

19:09 - Displaying date and time

// Displaying date and time

// June 3, 2019
Text(event.startDate, style: .date)

// 11:23PM
Text(event.startDate, style: .time)

// 9:30AM - 3:30PM
Text(event.startDate...event.endDate)

// +2 hours
// -3 months
Text(event.startDate, style: .offset)

// 2 hours, 23 minutes – Automatically updating as time pass
Text(event.startDate, style: .relative)

// 36:59:01 – Automatically updating as time pass
Text(event.startDate, style: .timer)