SwiftUI Appへのリッチなグラフィックスの追加

SwiftUI Appへのリッチなグラフィックスの追加

SwiftUIでグラフィックを活用する方法について確認しましょう。キーボードセーフエリアを含むセーフエリアの利用からはじめ、オンスクリーンキーボードに重ならない、端から端まで広がる美しいグラフィックをデザインする方法を紹介します。また、簡単にカスタマイズできる背景やコントロールを作成するために、SwiftUIで使用できるマテリアルや鮮やかさについて確認し、drawingGroupなどのグラフィックスAPIとまったく新しいCanvasについても説明します。これらのツールにより、SwiftUIで完全にインタラクティブで割り込み可能なアニメーションやグラフィックスをこれまで以上にシンプルにデザインできます。

リソース
関連ビデオ

WWDC21
ダウンロード

私はジェイコブですようこそ「SwiftUI Appへのリッチなグラフィックスの追加」へ私は同僚とグラデーションを作成する Appに取り組んでいます今年私たちのチームは “色”に注目していますすでにほぼ実装は完了していますリッチグラフィックスを追加して完成させましょう Appをカスタマイズしていくといくつかの異なる領域に気づきますセーフエリアのカスタマイズ新しいフォアグラウンドスタイル新しいリッチなマテリアルセット Canvasを使った描画新しい強力なビューなどですそれでは始めます Appの中身を紹介しますグラデーションのライブラリで様々なグラデーションを見ることができますこのグラデーションの何かに惹かれました具体的に何かは説明できませんがグラデーションを編集して色の変化を止めることもできます
新たなグラデーションを追加することもできます
これらのグラデーションをビジュアライザーで使うこともできます 1つずつ解説していくので後で説明します
ここではグラデーションの詳細表示に注目しましょう機能的ですが画面の大きさに対してかなり小さく空白が多いですグラデーションを主役にしたいと思います早速 Xcodeで編集してみましょう
これがメインの詳細表示で編集モードにも使われます「Editing false」から始めましょう編集モードについては後述しますフレームを削除してなるべく多くのスペースを使うようにしたいです
グラデーションがすべての高さを占めているのでこのスペーサーはもう必要ありません
これをZStackに変更してこのグラデーションの上にコントロールを配置しさらに先に進むことができます
ZStackを見たことがない方のために説明すると ZStackは要素を隣り合わせではなく重ねて配置します編集コントロールを一番下に移動しましょう
そしてグラデーションではなくコントロールにのみパディングが必要ですこれを移動しましょう
パディングを削除してもグラデーションの上下に空きスペースがあるのはなぜでしょうか？デフォルトでは SwiftUIはコンテンツをセーフエリア内に配置しホームインジケーターや表示されているバーなど視界を遮ったり切り取ったりするものを避けますセーフエリアはビューが表示される一番外側のフルエリアからインセットされた領域として表わされますセーフエリア内のコンテンツは自動的に適切なインセット内にレイアウトされコンテンツが見えなくなるエリアを回避しますセーフエリアは SwiftUIがキーボードの下にコンテンツを描かないようにするための方法でもありますこのAppではコントロールが自動的にキーボードの邪魔にならないように表示されます
これも同様です詳しく見てみると複数の異なるセーフエリアがあります最も一般的なのはコンテナセーフエリアですビューが表示されるコンテナによって駆動されバーやデバイスクロームなどが含まれますさらにキーボードを回避するためのキーボードセーフエリアがありますキーボードセーフエリアは常にコンテナのセーフエリア内の領域であることにご注意くださいキーボードに加えてコンテナのセーフエリアと同じエリアでコンテンツを安全に保護しますセーフエリアを除外することもできます通常これは必要ありませんほとんどのコンテンツがセーフエリアにあるためクリップされないようになっていますこのままで安全です背景やその他のコンテンツを端から端まで完全に表示したい場合はセーフエリアを無視してもいいでしょうこのコードを使用してすべてのセーフエリアからオプトアウトすることもキーボードのセーフエリアのみ除外もできますリニアグラデーションに ignoresSafeAreaを追加して縁なしの状態で表示しましょう
Edit ボタンはグラデーション上では見にくいので下端のセーフエリアのみを無視しましょう
グラデーションのせいで下のテキストが読めなくなるという同じ問題に遭遇しないように背景を追加しましょう
背景のカスタマイズについては後ほど説明しますまずは最もシンプルなデフォルトの設定ですダークモードで自動的に変化する白い背景が表示されます
この背景は自動的にセーフエリアを超えて広がりますこのバージョンの背景とその動作は iOS15 と並行してリリースされたOSですその仕組みを見てみましょう最初にコンテナビューとそのセーフエリアについて説明しますそしてコンテンツビューですが読みやすさを保つためにセーフエリア内に設置します適用されるビューに同じ境界を持つ背景を単純に追加するとこのようになりますしかし ignoresSafeArea修飾子を背景ビューだけに適用するとメインコンテンツはきれいに安全に保たれたままセーフエリアを超えて拡大します新しいbackground 修飾子はこの動作を自動的に生成します
背景に戻ってカスタマイズを始めましょう特定のスタイルを渡すことができ色やグラデーションなどの他のスタイルにすることができます
このAppではあまり意味がありませんがパステルカラーのものを見てみましょう
またシェイプを渡してこの背景をクリップします例えば角が丸い長方形にします
カスタムシェイプを使用すると背景がセーフエリアからはみ出さなくなりコンテンツの境界に一致していますこのAppの背景にぼかしを入れたいと思います別の新しいAPIの Materialを使います標準的なぼかしのセットです
この背景を元に戻し全体を占めるようにしましょう
Materialはカラフルなコンテンツで見せたい場所に最適です超淡色から超濃色までさまざまな素材が用意されていますどのようなプラットフォームでも適切なデザインを自動的に表示します
ここでは淡い色彩の素材を使用します
次にテキストをカスタマイズしますここでは名前が主要な情報であることを示すため色の数を少し目立たなくしてみましょう
セカンダリの前景スタイルを設定します
セカンダリコンテンツは背後の色をブレンドする「Vibrancy」という効果で自動的に表示されます SwiftUIにはこの効果用の特別なAPIはありません Materialコンテキストでセカンダリからクォータナリスタイルを使用すると自動的に発生します先ほどのようにMaterialを使って背景を明示的に追加した場合やコンテンツがサイドバーなどのシステムコンポーネントの中にある場合に Materialを追加すると自動的に起こります
これらのスタイルは多くが自動的に賢く振る舞います鮮明にする効果を使わないぼかしていない状況でも自動的に正しい効果を施します色を設定すると自動的に動作が変わりレベルに応じた色のバージョンが設定されます同じサポート機能でグラデーションなどの基本的な前景スタイルを設定することができますセンス良く使ってみてください注意点としては任意のテキストに適用される前景スタイルは1つですがその範囲内で複数の色を適用できます例えば文字列の変数置換を使って Textを埋め込んだり
colorsという単語に赤のforegroundColorを適用します自動的に設定した赤色が透けた色を除外して表示されます
さらに重要なのはこれらの前景スタイルを使用すると初めて埋め込まれた絵文字が正しく機能します
良い感じですねもう一度編集モードを試してみましょう
ほぼできていますぼかし効果の下でも色が見えますねしかしよく見ると正しく作動していないようです下までスクロールするとリストの一部がぼかしの下に隠れてしまいます何が起きているか見てみましょう飾りを取り除いて関連するビューのみを表示します
ビューを少し水平方向にスライドさせてみるとバーがコンテンツの上に ZStackされていることがわかります背面のすべてのビューを見たいのでこれは正しい動作ではありません
ここでVStackに変更してもいいのですがボカシの下にリストがないと下にスクロールしても色が透けて見えませんリストの背景とスクロール可能な領域をバーの下に拡張したいのですがメインコンテンツは拡張したくありませんまさにこれがセーフエリアの目的ですセーフエリアをこのバーでインセットして重要なコンテンツが隠れないようにしますビューのセーフエリアをカスタマイズするために新しい修飾子safeAreaInset を使用しますメインコンテンツの上にバーなどの補助コンテンツを追加できます ZStackを
safeAreaInsetに変更します
Edge: .bottomを使って
制御できるようにしますもう一度確認してみましょう
ビューはほとんど同じに見えますそれでよいですセーフエリアを無視しているからです
編集モードでは
ボカシの下でもスクロールできます最下部までスクロールしても何も隠れていません良いでしょう次に Visualizerを見ていきましょう
すでに作成されている Shapes visualizer から始めます
多数のランダムな形状のシンボルが表示され Appのグラデーションで描画されていますシンボルをタップして拡大したり
背景をタップしてシンボルの位置を変更できます
SwiftUIアニメーションのデモにもあるとおり常にインタラクティブで中断可能です再配置を続けたり
タップして図形を選択したり選択を解除したりすることもできます
コードを見るとグラフィックを描画する
一般的な手法を使用しています GeometryReaderによってビューのサイズを読み取ってすべてのグラフィックをレイアウトし ZStackを読み取って配置することができます
そしてボディの最後には、 drawingGroup修飾子があります drawingGroupは SwiftUIに含まれるすべてのビューを 1つのレイヤーにまとめて描画するように指示しますこれはこれらのようなグラフィック要素には有効ですがテキストフィールドやリストなどの UIコントロールには使用しないでください
これは今回のように多数のグラフィック要素を表示したい場合に有効な手法ですまたdrawingGroupの利点の1つはこれらのビューの描画方法が異なっていても Appの他の場所で使用しているのと同じ機能を SwiftUIで使用できることです
たとえばここではシンボルをタップするために各シンボルにジェスチャが適用されていますまた選択を変更したりシンボルを再配置するときに適用されるアニメーションもありますこれらのビューに含まれるアクセシビリティ情報も通常どおり渡されますたとえば各シンボルに対するアクセシビリティアクションのようにですしかしこれらの機能をすべてサポートするためには各ビューにその情報の保持とストレージが必要です要素の数が十分に多い場合はオーバーヘッドが多すぎる可能性がありますそのようなケースがあるので新しいCanvasビューを導入しました次のビジュアライザーは複雑なパーティクルシステムを表示しますがまだ作成されていません早速作ってみましょう Canvasビューを使って描いてみましょう
Canvasが描画されるたびに実行される描画コマンドを含むクロージャを作ることができます UIKitまたはAppKitの drawRectに精通している場合ほとんど同じように機能しますこのクロージャーにより描画コマンドの送信先となるコンテキストと Canvas全体のサイズを取得するために使用できるサイズが得られます画像を描くことから始めましょう
同じ画像タイプを使用して作成できます SwiftUIの残りのコードで使用しています
そして、コンテキストに画像の描画を指示します
0,0で描画すると原点を中心に表示されあまり目立たなくなりますせっかくCanvas全体のサイズがあるのでそれを使って真ん中に描いてみましょう
プレビューをダークモードに変更するとわかることが1つあります
以前に見たのと同じ前景スタイルを使用しているため画像が自動的に反転して白で描画されますパーティクルシステムを構築したいのでこの画像をもう数回描きましょう
このクロージャは通常のコード用で ViewBuilderではありませんしたがって通常の forループを使用できます
実際に見えるように各画像を少しずらします
現在この画像を数回描画していますが毎回同じ画像であってもコンテキストが解像して現在の環境などに基づいて評価する必要がありますこれを改善するには画像を自分で解像してから描くことです
同じ解像度の画像を共有しているためパフォーマンスが向上し解像度の高い画像を使用して他のこともできるようになりました
サイズとベースラインを求めることができますそのサイズを使用してそれぞれの形を適切な量だけシフトします
次にきらめきの後ろに楕円を加えてみましょう同じリージョンに描きます双方を引き寄せるためのフレームを出してみましょう
同じXとYの値を持つ CGRectを作成して幅と高さにはImageSizeを使って幅と高さを調整します
そして枠の中にイメージを描きます
各描画操作は順番に行われるため楕円を画像の後ろに配置するには最初に楕円を描画する必要があります context.fillで描くことができます
これはパスとシェーディングを取ります標準的なベジエ曲線を使ってパスを作成できますが次のようなヒントもあります楕円のような図形を使って与えられた長方形の中でのパスを求めることもできます
もう1つの引数はシェーディングですこれはパスを埋めるためのものです他のSwiftUI Appと同じスタイルを使用できますシアン色を使いましょう
楕円です画像とのコントラストがあまりありませんそれを修正しましょうグラフィックスコンテキストには不透明度ブレンドモード変換などの描画プロパティがありますここで不透明度を設定しましょうこのコンテクストが今までとは少し違った動きをする分野を見てみましょうコンテキストに不透明度を設定するだけで期待通りの動作になりますこれはその後のすべての操作に影響します
以前は一部の描画操作にのみ適用されるグラフィックコンテキストに変更を加えたい場合は, それらの操作を保存と復元の呼び出しで囲む必要がありましたしかしSwiftUIのコンテキストではコピーに変更を加えるだけです
これらの変更は変更されたコンテキストで行われた描画にのみ影響します元のコンテキストで行われた描画は影響を受けません
イメージに色を加えてみましょう
解像した画像でできるのはシンボルの描画方法を制御するためのシェーディング設定です
青を設定します
期待より暗い青です描画しているときに正しくブレンドモードを使うと効果てきめんですブレンドモードは色の組み合せを制御します特にここにある半透明な色などです
画面をブレンドモードにします常に明るくなるように色を組み合わせます良くなりました
実行できる描画操作は他にもたくさんあります GraphicsContextタイプをチェックして可能なすべてを確認してくださいシミュレーションのようにするためには実際に動かす必要があります SwiftUIには時間の経過とともに変化させるためのツールがいくつかありますアニメーションは最も一般的であり通常変更を加えると自動的に変化します今年新しい TimelineViewという下位ツールを紹介します時間の経過で起きる変化を正確にコントロールしたい場合に使います変更したいビューをラップするだけで TimelineViewを使用できます.
更新の頻度を示すスケジュールを使用して構成できます
タイマーなどのスケジュールもありますが今回はアニメーションのスケジュールを使って更新情報をすぐに表示できるようにします
ディスプレイリンクをご存知ならそれとよく似た仕組みです知らなくても大丈夫です何を表示するか情報を提供するタイムラインコンテキストが渡されます
画像をアニメーション化するために使用する時間を秒単位で引き出します
画像を回転振動させてみましょう今から角度をつけます
remainderを使って 3秒ごとにループさせてみましょう
それを120倍すると 360度になります.
そしてコサインでXの値を得ますサインだったかな？三角法を覚えていますか
その値を使ってオフセットを変更しましょう
プレビューで見え方を確認してください
良いですね重なるとさらに明るくなるか見てくださいスクリーンブレンドモードが稼働している状態です次にインタラクティブ機能を追加しましょう個々のビューにジェスチャを追加することで実行できるインタラクションを確認しました Canvasを使用することのトレードオフとして Canvas内の個々の要素が１つの図面にまとめられることを覚えておいてくださいそのため例えば個々の画像にジェスチャを付けることはできませんがビュー全体にはジェスチャをつけることができます表示される輝きの数を増やす機能を追加しましょう何個表示するかの設定を追加します
最初は2個からですカウントを使ってループを制御しましょう
TapGestureを追加してカウントを増加させます
プレビューを更新しましょう
タップして輝きを追加できます
Canvasを使う上で大事なことは 1つのグラフィックであるためアクセシビリティで利用できるコンテンツに関する情報がないことですアクセシブルにするために標準的なaccessibility 修飾子を使ってビューに関する情報を追加します
より高度なケースでは強力な新機能である .accessibilityChildren 修飾子はビューに関するアクセシビリティ情報を生成するために使用する任意のSwiftUIビュー階層を指定することができます「SwiftUIのアクセシビリティ: 基礎を超えて」をご覧になってください
比較的簡単なCanvasの使い方を紹介しましたがもっと複雑な使い方にも対応できます少し試してみましょう同僚が書いてくれたシミュレーションコードは同じように動作しますがより多くの要素がより面白いことをします彼が送ってくれたファイルがここにありますのでビューに貼り付けます
このコードも同じ構造ですこれですべてのパーティクルを追跡し時間の経過とともに更新される長寿命のモデル･オブジェクトができました同じTimelineViewとCanvas を使ってコンテンツのアニメ化と描画を行いますモデルを新しい日付で更新しスクリーンのブレンドモードを設定し各アクティブパーティクルに先ほどの楕円と同じように描画するように指示していますそして最後に少し複雑なジェスチャを使用して同じ修飾子を適用しますどのように見えるか見てみましょう
定期的に新しい花火バーストを作成しますタップしてさらに追加することもできます Appのグラデーションの色を使った楕円で作られています
Canvasでの描画のもう一つの素晴らしい点は watchOS tvOS macOSでも動作することです全SwiftUIプラットフォームで利用できますこれで Appが完成しましたその過程でセーフエリアの操作と修正前景スタイルを使ってコンテンツの描画を制御する方法マテリアルを使ってぼかしや鮮やかさを表現する方法 CanvasとTimelineViewを使って複雑なアニメーショングラフィックを作成しましたみなさんの素敵な作品を期待しています [音楽]

// Ignore all safe areas
ContentView()
    .ignoresSafeArea()

// Ignore keyboard only
ContentView()
    .ignoresSafeArea(.keyboard)

7:08 - Foreground Styles

VStack {
    Text("Primary")
        .foregroundStyle(.primary)
    Text("Secondary")
        .foregroundStyle(.secondary)
    Text("Tertiary")
        .foregroundStyle(.tertiary)
    Text("Quaternary")
        .foregroundStyle(.quaternary)
}

7:35 - Purple Foreground Styles

VStack {
    Text("Primary")
        .foregroundStyle(.primary)
    Text("Secondary")
        .foregroundStyle(.secondary)
    Text("Tertiary")
        .foregroundStyle(.tertiary)
    Text("Quaternary")
        .foregroundStyle(.quaternary)
}
.foregroundStyle(.purple)

7:41 - Blue Gradient Foreground Styles

let blueGradient = LinearGradient(
    colors: [.blue, .teal], startPoint: .leading, endPoint: .trailing)
VStack {
    Text("Primary")
        .foregroundStyle(.primary)
    Text("Secondary")
        .foregroundStyle(.secondary)
    Text("Tertiary")
        .foregroundStyle(.tertiary)
    Text("Quaternary")
        .foregroundStyle(.quaternary)
}
.foregroundStyle(blueGradient)

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC21