iOS 15でSwiftUIビューを定期的にリロードします


iOS 15のSwiftUI 3では、新しいビュー構造TimeLineViewがあります。このビュータイプを使って、(あなたが定義した)一定期間ごとにビューをリロードすることができます。

例えば、アニメーションのロード画面を作ることができます。

ezgif-2-554a1eb56133.gif

実装

public init(_ schedule: Schedule, @ViewBuilder content: @escaping (TimelineView<Schedule, Content>.Context) -> Content)

コードクロージャに渡された変数Contextがあります。この変数を使って、ビューがリロードされた時間にアクセスすることができます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        TimelineView(.periodic(from: Date(), by: 1)) { context in
            Text("\(context.date)")
        }
    }
}

アニメーション付きローディング画面の作成

1秒ごとに画面をリロードできるため、日付から現在の秒の値を読み取り、その値を使用して別の画面を表示することができます。

0、1、2を繰り返すシーケンス番号を生成することができ、その値を使用して別の画面を表示することができます。

let sequenceNo = Calendar.current.component(.second, from: context.date) % 3
struct ContentView: View {

    var body: some View {
        Form {

            TimelineView(.periodic(from: Date(), by: 1)) { context in

                // A number that's in range 0, 1, 2
                let sequenceNo = Calendar.current.component(.second, from: context.date) % 3

                HStack {

                    Image(systemName: "gamecontroller")
                        .font(.largeTitle)

                    Image(systemName: "chevron.right")
                        .font(.largeTitle)
                        .foregroundColor((sequenceNo >= 0) ? .green : .init(UIColor.label))

                    Image(systemName: "chevron.right")
                        .font(.largeTitle)
                        .foregroundColor((sequenceNo >= 1) ? .green : .init(UIColor.label))

                    Image(systemName: "chevron.right")
                        .font(.largeTitle)
                        .foregroundColor((sequenceNo >= 2) ? .green : .init(UIColor.label))

                    Image(systemName: "network")
                        .font(.largeTitle)
                        .symbolRenderingMode(.multicolor)

                }

            }

            Text("Connecting your console to the Internet...")

        }
    }

}

関連記事

SwiftUIのビューは自動的に再描画され、通常は特定の関数をコールして再読み込みさせることはできません。どの変数を監視させるかをSwiftUIのビューに知らせるには、次の変数型を使用できます。

変数が変更されたときにSwiftUIのViewがリロードされるようにする


:relaxed: Twitter @MszPro

:newspaper: iOS開発に関するニュースレター iOS Dev Letter

:sunny: 私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。