В современных мобильных приложениях крайне важно предоставлять пользователям визуальную обратную связь при выполнении трудоемких задач. Индикаторы активности, также известные как счетчики загрузки, являются важным компонентом, указывающим текущие процессы. В этой статье мы рассмотрим различные методы реализации индикаторов активности в SwiftUI, мощной платформе пользовательского интерфейса для разработки под iOS. Итак, хватайте чашечку кофе и давайте окунемся в мир индикаторов активности SwiftUI!
Метод 1: UIActivityIndicatorView
Самый простой способ отобразить индикатор активности в SwiftUI — использовать UIActivityIndicatorView
из UIKit. SwiftUI предоставляет механизм моста для беспрепятственного использования компонентов UIKit. Вот пример:
import SwiftUI
import UIKit
struct ActivityIndicatorView: UIViewRepresentable {
func makeUIView(context: Context) -> UIActivityIndicatorView {
let activityIndicator = UIActivityIndicatorView(style: .large)
activityIndicator.startAnimating()
return activityIndicator
}
func updateUIView(_ uiView: UIActivityIndicatorView, context: Context) {}
}
struct ContentView: View {
var body: some View {
VStack {
Text("Loading...")
ActivityIndicatorView()
}
}
}
Метод 2: ProgressView в SwiftUI
Начиная с iOS 14, в SwiftUI появился элемент ProgressView
, который можно использовать в качестве индикатора активности. Он предоставляет больше возможностей настройки по сравнению с UIActivityIndicatorView
. Вот пример:
import SwiftUI
struct ContentView: View {
@State private var isLoading = true
var body: some View {
VStack {
if isLoading {
ProgressView("Loading...")
} else {
Text("Content Loaded!")
}
}
.onAppear {
simulateNetworkRequest()
}
}
func simulateNetworkRequest() {
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
isLoading = false
}
}
}
Метод 3: собственный индикатор активности с формой и анимацией
Если вы хотите создать собственный индикатор активности со своим собственным дизайном, вы можете использовать API формы и анимации SwiftUI. Вот пример вращающегося круга:
import SwiftUI
struct RotatingCircle: View {
@State private var isAnimating = false
var body: some View {
Circle()
.trim(from: 0, to: 0.8)
.stroke(Color.blue, lineWidth: 5)
.frame(width: 50, height: 50)
.rotationEffect(Angle(degrees: isAnimating ? 360 : 0))
.animation(Animation.linear(duration: 1).repeatForever(autoreverses: false))
.onAppear {
isAnimating = true
}
}
}
struct ContentView: View {
var body: some View {
VStack {
Text("Loading...")
RotatingCircle()
}
}
}
В этой статье мы рассмотрели несколько методов реализации индикаторов активности в SwiftUI. Мы начали с простого UIActivityIndicatorView
из UIKit, затем перешли к ProgressView
, представленному в SwiftUI 14, и, наконец, создали собственный индикатор активности, используя API формы и анимации SwiftUI. С помощью этих методов вы можете обеспечить удобство и визуально привлекательный пользовательский интерфейс, одновременно отображая текущие процессы в ваших приложениях SwiftUI.
Теперь, когда вы оснащены этими методами индикатора активности, продолжайте улучшать свои приложения с помощью анимации загрузки, чтобы ваши пользователи были вовлечены и информированы!