[SwiftUI]UIActivityIndicatorViewを作成する

投稿の経緯

個人開発中のアプリでインディケーターを作成したので備忘録。

環境

Swift version 5.4.2
Xcode version 12.5.1

完成イメージ

表示されているViewの上にopacityをつけた背景と画面中央にインディケーターを表示させます。

インディケーターの作成

import Foundation
import SwiftUI

struct ActivityIndicator: UIViewRepresentable {
    func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
        UIActivityIndicatorView(style: .large)
    }

    func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
        uiView.startAnimating()
    }
}

UIViewRepresentableを使ってUIActivityIndicatorViewを作成します。
インディケーターをカスタムする場合はupdateUIViewの中でuiViewをカスタムしてあげれば編集できます。

インディケーターの呼び出し

@State private var isShowsIndicator = false


var body: some View {

    /////省略/////

    if isShowsIndicator {
        ZStack {
            Color.black.opacity(0.5)
                .edgesIgnoringSafeArea(.all)
            ActivityIndicator()
        }
        .animation(.linear)
    }
}

@Stateオブジェクトを使ってインディケータの表示する状態を管理します。
今回の場合、isShowsIndicatorがtrueでインディケータを起動させるのでこのように書いています。

インディケーターを表示する時に背景色としてZStackで囲んでColorと重ねます。
アニメーションをつけると自然にインディケーターが表示されるので書いています。

お知らせ

現在、iOS開発案件を業務委託で募集中です（副業）。TwitterDMでご依頼をお待ちしています