😇

SwiftUIで「クルクル」回るローディング　

2024/07/05に公開

iOS

SwiftUI

tech

ProgressViewというらしい？

iOSの開発をしているときに、クルクル回る棒線のローディングあると思うけど、自作したり、　gif画像を使うと思っていた...

いやまて😇
あったぞ！

標準機能!!!!

不確定なプログレス・ビューを作成するには、プログレス値を取らないイニシャライザを使用する：

var body: some View {
    ProgressView()
}

[example]

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(spacing: 40) {
            ProgressView()
        }
        .padding()
    }
}


#Preview {
    ContentView()
}

ページが表示された時に、ローディングのアラートを表示したい。
こちらを使ってみようと思います。

import SwiftUI

struct LoadingAlert: View {
    var body: some View {
        VStack(spacing: 20) {
            ProgressView()
                .scaleEffect(1.5)
            Text("読み込み中...")
                .font(.headline)
        }
        .padding(30)
        .background(Color.white)
        .cornerRadius(10)
        .shadow(radius: 10)
    }
}

struct ContentView: View {
    @State private var showLoadingAlert = false
    
    var body: some View {
        VStack {
            Text("Hello World")
                .font(.largeTitle)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(
            ZStack {
                if showLoadingAlert {
                    Color.black.opacity(0.4)
                        .edgesIgnoringSafeArea(.all)
                    LoadingAlert()
                }
            }
        )
        .onAppear {
            showLoadingAlert = true
            // ダミーの遅延を追加（実際のデータロード処理に置き換えてください）
            DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
                showLoadingAlert = false
            }
        }
    }
}

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

このコードの特徴：

LoadingAlertという新しいViewを作成し、ProgressViewとテキストを含むカスタムアラートを定義しています。
ContentViewのbody内で、.overlayモディファイアを使用してカスタムアラートを表示しています。
onAppearモディファイアを使用して、ビューが表示されたときに即座にローディングアラートを表示します。
3秒後（実際のアプリではデータのロードが完了したタイミングに置き換えてください）、ローディングアラートが非表示になります。
アラートの背景に半透明の黒色を使用し、アラート自体は白背景で表示しています。

このアプローチにより、ページが表示されたときにすぐにローディングアラートが表示され、その中にProgressViewが含まれるようになります。実際のアプリケーションでは、ダミーの遅延の代わりに実際のデータ取得処理を行い、その完了時にアラートを非表示にするようにしてください。
また、必要に応じてアラートのデザインやアニメーションをカスタマイズすることができます。

[こんな感じですね]

最後に

今回は、iOSらしい、ヨドバシカメラのアプリとかで表示されるような、ローディングをするUIを作成してみました。

ProgressViewというらしい？

最後に

Discussion