Станом на Xcode 12 бети ( IOS 14 ), новий вид під назвою ProgressView
є доступним для розробників , і які можуть відображати як детерміновані і невизначений прогрес.
Його стиль за замовчуванням CircularProgressViewStyle
- саме те, що ми шукаємо.
var body: some View {
VStack {
ProgressView()
}
}
Xcode 11.x
Досить багато подань ще не представлено в SwiftUI
, але їх легко перенести в систему. Потрібно укутати UIActivityIndicator
і зробити UIViewRepresentable
.
(Докладніше про це можна дізнатись у чудовій дискусії WWDC 2019 - Інтеграція SwiftUI )
struct ActivityIndicator: UIViewRepresentable {
@Binding var isAnimating: Bool
let style: UIActivityIndicatorView.Style
func makeUIView(context: UIViewRepresentableContext<ActivityIndicator>) -> UIActivityIndicatorView {
return UIActivityIndicatorView(style: style)
}
func updateUIView(_ uiView: UIActivityIndicatorView, context: UIViewRepresentableContext<ActivityIndicator>) {
isAnimating ? uiView.startAnimating() : uiView.stopAnimating()
}
}
Тоді ви можете використовувати його наступним чином - ось приклад накладання завантаження.
Примітка: Я віддаю перевагу використанню ZStack
, а не overlay(:_)
тому, тому я точно знаю, що відбувається в моїй реалізації.
struct LoadingView<Content>: View where Content: View {
@Binding var isShowing: Bool
var content: () -> Content
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .center) {
self.content()
.disabled(self.isShowing)
.blur(radius: self.isShowing ? 3 : 0)
VStack {
Text("Loading...")
ActivityIndicator(isAnimating: .constant(true), style: .large)
}
.frame(width: geometry.size.width / 2,
height: geometry.size.height / 5)
.background(Color.secondary.colorInvert())
.foregroundColor(Color.primary)
.cornerRadius(20)
.opacity(self.isShowing ? 1 : 0)
}
}
}
}
Щоб перевірити його, ви можете скористатися цим прикладом коду:
struct ContentView: View {
var body: some View {
LoadingView(isShowing: .constant(true)) {
NavigationView {
List(["1", "2", "3", "4", "5"], id: \.self) { row in
Text(row)
}.navigationBarTitle(Text("A List"), displayMode: .large)
}
}
}
}
Результат: