Zenn
🚀

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

2020/10/20に公開
iOS
Swift
SwiftUI
tech

一言でいうと

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:)です。

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

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

詳しくは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