実行環境
Swift | 5.6.1 |
Xcode | 14.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)
}
}
参考記事
まとめ
ということで、本記事は通信中にPKHUDを使う方法を自分のメモ程度にまとめました。
全体のソースコードはこちらのGitHubからどうぞ。
アドバイスや改善などあれば本記事の最後のコメント欄からお願いします。
最後まで読んでいただきありがとうございました。
作業効率がグッと上がるPC道具
リンク
リンク
間違いなしのSwift書籍2冊
リンク
リンク