🚀

iOS 14のSwiftUIでウォークスルー画面が簡単に作成できる件

2 min read

一言でいうと

iOS14で追加されるSwiftUIの新機能の@AppStorageを使えば数行で初期表示したい画面を一度のみ表示できます。

@AppStorage("isFirstLaunch") var isFirstLaunch = true
var body: some View {
    ContentView()
        .sheet(isPresented: $isFirstLaunch) {
	    WorkThroughView()
        }
}

実際にApple純正の初回起動の画面を真似てやってみます。

コードの全文はこちらのリポジトリで公開しています。

https://github.com/arasan01/WorkThrough_SwiftUI

AppStorageってなんですか?

変数に対してUserDefaultsを関連付ける新しいアノテーションです。
以下の書き方をするとUserDefaultsにisFirstLaunchをキーとする値がなければ右辺値のtrueを持ちます。

@AppStorage("isFirstLaunch") var isFirstLaunch = true

これを使うことによってUserDefaultsに対してextensionを生やして処理するなどが必要なくサクッと永続化の対象とできます。すごいね。

SwiftUIについてちょっとだけ解説

SwiftUIではモーダル表示をする場合に、表示させたいビューとそれを覆うビューを関連づけるような書き方をします。

ContentView()
    .sheet(...)

.sheetとなっている部分をModifierと呼び、この書き方で見た目や動作を特定のビューに対して付与する形を取ります。

今回使っているModifierはsheet(isPresented:onDismiss:content:)です。

isPresentedBinding型を受け取ります。Binding型という文字はコードに一切出てきませんが、AppStorageアノテーションを付与した値に接頭辞$を付与するとBinding型として渡す糖衣構文になっています。
ここで指定したBindingのオブジェクトはモーダルを閉じた場合に暗黙的にfalseとする仕組みとなっているため、閉じたイベントを検知して値を操作する必要はありません。

追記
onDismissで操作しなくても良かったです。
ここでは操作することはないため、onDismissを省略しています。

onDismiss(() -> Void)?を受け取るコールバック関数です。モーダルとして表示したViewが閉じられた場合に呼び出されます。
今回やりたいことでは、isFirstLaunchは一度見た場合にfalseを入れてあげることで一度のみ表示の要件を満たします。そのためにここでisFirstLaunch = falseとして、アプリを再起動時に表示がされないように永続化してあげます。

contentでは見せたいビュー指定することでモーダル表示をさせることができます。これはVStackListなどを定義しているものと同様です。

詳しくはApple公式リファレンスを読むほうが早いです。
https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:)

終わりに

ここまでの要素を踏まえるとより簡単にUserDefaultsを扱える仕組みのAppStorageは今までextensionを生やして色々していた部分を、より簡単に提供してくれるインターフェイスとしてコードの量が減らせそうですね!
気をつけなければならないのはiOS14からの機能なため、既存のプロダクションコードには中々入れられないという部分ですね。

なるほどなー、となったらサンプルリポジトリにStarをポチッとしていただけると嬉しいです。

リンク集

サンプルリポジトリ: https://github.com/arasan01/WorkThrough_SwiftUI
sheetのリファレンス: https://developer.apple.com/documentation/swiftui/view/sheet(ispresented:ondismiss:content:)

Discussion

ログインするとコメントできます