Освоение индикаторов активности в SwiftUI: подробное руководство

В современных мобильных приложениях крайне важно предоставлять пользователям визуальную обратную связь при выполнении трудоемких задач. Индикаторы активности, также известные как счетчики загрузки, являются важным компонентом, указывающим текущие процессы. В этой статье мы рассмотрим различные методы реализации индикаторов активности в 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.

Теперь, когда вы оснащены этими методами индикатора активности, продолжайте улучшать свои приложения с помощью анимации загрузки, чтобы ваши пользователи были вовлечены и информированы!