[SwiftUI]「インジケータ」を表示する方法

方法
使用例
オススメの記事

方法

プログラマ, プログラミング, コード, 仕事, コンピュータ, インターネット, 技術, コーディング

SwiftUIには、インジケーターのビューが用意されていません。

なので、インジケータをSwiftUIで表示するには、UIKitのUIActivityIndicatorViewを使います。

具体的には、次の３つの手順があります。

UIViewRepresentableに準拠した構造体でインジケータを作る
SwiftUI側でインジケータを表示
SwiftUIとUIKitのビューで状態変数をバインディングする

UIViewRepresentableに準拠した構造体でインジケーターを作る

struct IndicatorView : UIViewRepresentable {
    
    //インジケーターを進行させるか
    @Binding var onIndicator : Bool
    
    func makeUIView(context: Context) -> UIActivityIndicatorView {
        
        //UIKitのビューを作成
        return UIActivityIndicatorView()
        
    }
    
    func updateUIView(_ uiView: UIActivityIndicatorView, context: Context) {
        //インジケータビューを更新する
        if onIndicator {
            
            //進行させる
            uiView.startAnimating()
            
        } else {
            
            //進行させない
            uiView.stopAnimating()
            
        }
    }
}

makeUIViewでUIKitのビューを作成します。

そして、updateUIViewで、ビューが更新された時の処理をします。

インジケータの場合は、インジケータの表示・非表示を切り替えます。

SwiftUIでインジケーターを表示

先ほど作ったインジケータをSwiftUIで表示させます。

IndicatorView()

SwiftUIとUIKitで状態変数をバインディングする

最後にSwiftUIとUIKitのビューを状態変数でバインディングし、SwiftUIの値が更新されるのUIKitにも反映されるようにします。

IndicatorView(onIndicator: $onIndicator)

使用例

struct ContentView: View {
    
    @State var onIndicator = false
    
    var body: some View {
        VStack {
            Button(action: {
                self.onIndicator.toggle()
            }, label: {
                Text("進行状態を切り替える")
            })
            
            IndicatorView(onIndicator: $onIndicator)
        }
    }
}


struct IndicatorView : UIViewRepresentable {
    
    //インジケーターを進行させるか
    @Binding var onIndicator : Bool
    
    func makeUIView(context: Context) -> UIActivityIndicatorView {
        
        //UIKitのビューを作成
        return UIActivityIndicatorView()
        
    }
    
    func updateUIView(_ uiView: UIActivityIndicatorView, context: Context) {
        //インジケータビューを更新する
        if onIndicator {
            
            //進行させる
            uiView.startAnimating()
            
        } else {
            
            //進行させない
            uiView.stopAnimating()
            
        }
    }
}

上記は、インジケーターを使った例です。