Swift 步骤指示器创造新的可能

2023-12-29 22:14:05

Swift 步骤指示器创造新的可能

Swift步骤指示器是一个功能强大的工具，可以帮助您创建美观且易于使用的应用程序。步骤指示器允许您显示任务或过程的进度，并让用户轻松跟踪他们的位置。它们非常适合应用程序教程、注册流程和其他需要分步指导用户的地方。

创建步骤指示器

要创建步骤指示器，您可以使用SwiftUI或UIKit。SwiftUI是一种声明性编程语言，允许您使用更少的代码创建更复杂的UI。UIKit是一种面向对象的编程语言，提供了更多的灵活性。

使用SwiftUI创建步骤指示器

import SwiftUI

struct StepIndicator: View {
    var steps: [String]
    var currentStep: Int

    var body: some View {
        HStack {
            ForEach(steps, id: \.self) { step in
                StepView(step: step, currentStep: currentStep)
            }
        }
    }
}

struct StepView: View {
    var step: String
    var currentStep: Int

    var body: some View {
        ZStack {
            Circle()
                .stroke(Color.gray, lineWidth: 2)
                .frame(width: 20, height: 20)

            if currentStep >= steps.firstIndex(of: step)! {
                Circle()
                    .foregroundColor(.blue)
                    .frame(width: 10, height: 10)
            }

            Text(step)
                .font(.caption)
                .foregroundColor(currentStep >= steps.firstIndex(of: step)! ? .blue : .gray)
        }
    }
}

struct ContentView: View {
    @State private var currentStep = 1

    var body: some View {
        VStack {
            StepIndicator(steps: ["Step 1", "Step 2", "Step 3"], currentStep: currentStep)

            Button(action: {
                currentStep += 1
            }) {
                Text("Next")
            }
        }
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

使用UIKit创建步骤指示器

import UIKit

class StepIndicator: UIView {
    var steps: [String]
    var currentStep: Int

    init(frame: CGRect, steps: [String], currentStep: Int) {
        self.steps = steps
        self.currentStep = currentStep

        super.init(frame: frame)

        setupViews()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setupViews() {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually
        stackView.spacing = 10

        for step in steps {
            let stepView = StepView(step: step, currentStep: currentStep)
            stackView.addArrangedSubview(stepView)
        }

        addSubview(stackView)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: topAnchor),
            stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
            stackView.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
    }
}

class StepView: UIView {
    var step: String
    var currentStep: Int

    init(frame: CGRect, step: String, currentStep: Int) {
        self.step = step
        self.currentStep = currentStep

        super.init(frame: frame)

        setupViews()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setupViews() {
        let circleView = UIView()
        circleView.backgroundColor = UIColor.gray
        circleView.layer.cornerRadius = 10
        circleView.translatesAutoresizingMaskIntoConstraints = false

        let label = UILabel()
        label.text = step
        label.font = UIFont.systemFont(ofSize: 14)
        label.textColor = UIColor.gray
        label.translatesAutoresizingMaskIntoConstraints = false

        addSubview(circleView)
        addSubview(label)

        NSLayoutConstraint.activate([
            circleView.centerXAnchor.constraint(equalTo: centerXAnchor),
            circleView.centerYAnchor.constraint(equalTo: centerYAnchor),
            circleView.widthAnchor.constraint(equalToConstant: 20),
            circleView.heightAnchor.constraint(equalToConstant: 20),

            label.centerXAnchor.constraint(equalTo: centerXAnchor),
            label.topAnchor.constraint(equalTo: circleView.bottomAnchor, constant: 5)
        ])

        if currentStep >= steps.firstIndex(of: step)! {
            circleView.backgroundColor = UIColor.blue
            label.textColor = UIColor.blue
        }
    }
}