SwiftUIでローディング画像を表示するメモ

はじめに

これは僕が使いたくなるかもしれないコードを書いたメモです。

ローディング画像表示View

import SwiftUI

// ローディングを表示します。
struct LoadingView: View {
    @State private var isAnimating = false
    private let animation = Animation.linear(duration: 1).repeatForever(autoreverses: false)

    // 画像を表示する場合はこちらを使う。
//    @State private var index = 0
//    private let images:[UIImage] = { UIImage.loadImages(path: "Images/Loading") }()
//    private var timer = LoadingTimer(0.05)

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                // 他のタップを許さないようにする。
                Color(.black)
                    .opacity(0.01)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .edgesIgnoringSafeArea(.all)

                Circle()
                    .trim(from: 0, to: 0.6)
                    .stroke(AngularGradient(gradient: Gradient(colors: [.gray, .white]), center: .center),
                            style: StrokeStyle(
                                lineWidth: 8,
                                lineCap: .round,
                                dash: [0.1, 16],
                                dashPhase: 8))
                    .frame(width: 48, height: 48)
                    .rotationEffect(.degrees(self.isAnimating ? 360 : 0))
                    .onAppear() {
                        withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: false)) {
                            self.isAnimating = true
                        }
                    }
                    .onDisappear() {
                        self.isAnimating = false
                    }
                // アニメーションを表示する。
//                Image(uiImage: self.images[self.index])
//                    .resizable()
//                    .frame(width: 100, height: 100, alignment: .center)
//                    .onReceive(
//                        self.timer.publisher,
//                        perform: { _ in
//                            self.index = self.index + 1
//                            if self.index >= self.images.count { self.index = 0 }
//                        }
//                    )
//                    .onAppear { self.timer.start() }
//                    .onDisappear { self.timer.cancel() }
            }
        }
    }
}

struct LoadingView_Previews: PreviewProvider {
    static var previews: some View {
        LoadingView()
    }
}

import Foundation

// ロード状態を表示します。
class Loading: ObservableObject {
    static private var instance:Loading?

    @Published var isShow:Bool = false

    init() {
        // インスタンスを保持しておく
        Loading.instance = self
    }

    static func show() {
        Loading.instance?.isShow = true
    }

    static func hide() {
        Loading.instance?.isShow = false
    }
}

使い方

struct ContentView: View {
    // ローディング表示用
    @ObservedObject var loading = Loading()

    var body: some View {
        ZStack {
            // コンテンツ表示

            // ローディング表示
            if loading.isShow {
                LoadingView()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environmentObject(User())
    }
}

// これでローディングが表示される。
Loading.show()

本当はこうしたかった。

まぁ、今回はここまでしなくても良かったので・・・。

    var body: some View {
        ZStack {
            // コンテンツ表示
        }.loading(isShow: $loading.isShow)
    }