【SwiftUI】PKHUDを使う方法(通信中にインジケータ表示させる)

SwiftUIでPKHUDを使う方法

実行環境

Swift5.6.1
Xcode14.0

実装

デモ動画

PKHUDは、ボタンアクション・画面遷移時のアラートライブラリです。
(詳しくは、PKHUDの公式ドキュメントをご覧ください。)

このライブラリをSwiftUIで用いて、
・通信時のインジケータ
・通信成功時のアクション

を実装するコードを詳解します。通信以外にも応用可能です。

コーディング


Viewのextentionを作成します。

import SwiftUI
import PKHUD

extension View {

    public func PKHUD(isPresented: Binding<Bool>, HUDContent: HUDContentType, delay: Double) -> some View {
        PKHUDViewModifier(isPresented: isPresented, HUDContent: HUDContent, delay: delay, parent: self)
    }

}



再利用しやすいように、PKHUDViewを作成します。
これによって、複数の画面から何度も呼び出すことが出来ます。

import SwiftUI
import PKHUD

struct PKHUDView: UIViewRepresentable {
    @Binding var isPresented: Bool
    var HUDContent: HUDContentType
    var delay: Double
    func makeUIView(context: UIViewRepresentableContext<PKHUDView>) -> UIView {
        return UIView()
    }
    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<PKHUDView>) {
        if isPresented {
            HUD.flash(HUDContent, delay: delay) { finished in
                isPresented = false
            }
        } else {
            HUD.hide()
        }
    }
}



最後にPKHUDを表示させたいViewで、下記のように記述すれば完成です。
20行目で「.infinity」を記述することで、
無限にインジケータを表示させることができ、
これによって通信中に常にインジケータを表示させ続けることが出来ます。

import SwiftUI
import PKHUD

struct ContentView: View {
    @State var PkhudProgress: Bool = false
    @State var PkhudSuccess: Bool = false

    var body: some View {
        VStack {
            Button("通信開始") {
                PkhudProgress = true

                // 通信している仮定で2秒あける
                DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                    PkhudProgress = false
                    PkhudSuccess = true
                }
            }
        }
        .PKHUD(isPresented: $PkhudProgress, HUDContent: .labeledProgress(title: "通信中", subtitle: "通信しています"), delay: .infinity)
        .PKHUD(isPresented: $PkhudSuccess, HUDContent: .labeledSuccess(title: "成功", subtitle: "通信に成功しました"), delay: 1.5)
    }
}

参考記事

【Swift】PKHUDをSwiftUIで使う

まとめ

ということで、本記事は通信中にPKHUDを使う方法を自分のメモ程度にまとめました。
全体のソースコードはこちらのGitHubからどうぞ。

アドバイスや改善などあれば本記事の最後のコメント欄からお願いします。
最後まで読んでいただきありがとうございました。

作業効率がグッと上がるPC道具

間違いなしのSwift書籍2冊



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です