如何借助UserOnboardingHelper类实现用户引导流程多视图复用？

嘿，我来帮你搞定这个引导页复用的问题～首先得先把你的UserOnboardingHelper类调整得更通用，然后配合数据模型和通用视图控制器，就能轻松实现姓名、年龄、性别这三个页面的复用啦。

第一步：修正并优化UserOnboardingHelper类 #

你原来的代码有语法小问题（比如类型写反了），我们先把它改成真正能工作的样子，并且把UI配置逻辑封装成方法，让它能根据不同的引导步骤动态生成对应的UI：

import UIKit

class UserOnboardingHelper {
    // 存储当前步骤的核心信息
    private let stepText: String
    private let inputConfig: InputConfig
    private weak var viewController: UIViewController?
    private var continueAction: () -> Void
    
    // 定义输入类型枚举，区分不同步骤的输入需求
    enum InputConfig {
        case textInput(placeholder: String)
        case numberInput(placeholder: String)
        case genderSelector(options: [String])
    }
    
    // 初始化方法，传入当前步骤的文本、输入配置、所属VC和继续按钮的回调
    init(stepText: String, inputConfig: InputConfig, viewController: UIViewController, continueAction: @escaping () -> Void) {
        self.stepText = stepText
        self.inputConfig = inputConfig
        self.viewController = viewController
        self.continueAction = continueAction
    }
    
    // 配置顶部问题区
    func setupQuestionBox() -> UIView {
        let questionBox = UIView()
        questionBox.backgroundColor = .systemBackground
        
        let questionLabel = UILabel()
        questionLabel.text = stepText
        questionLabel.font = .systemFont(ofSize: 24, weight: .semibold)
        questionLabel.textAlignment = .center
        questionLabel.translatesAutoresizingMaskIntoConstraints = false
        
        questionBox.addSubview(questionLabel)
        NSLayoutConstraint.activate([
            questionLabel.topAnchor.constraint(equalTo: questionBox.topAnchor, constant: 16),
            questionLabel.leadingAnchor.constraint(equalTo: questionBox.leadingAnchor, constant: 16),
            questionLabel.trailingAnchor.constraint(equalTo: questionBox.trailingAnchor, constant: -16),
            questionLabel.bottomAnchor.constraint(equalTo: questionBox.bottomAnchor, constant: -16)
        ])
        
        return questionBox
    }
    
    // 配置中间输入区
    func setupInputView() -> UIView {
        let inputContainer = UIView()
        inputContainer.translatesAutoresizingMaskIntoConstraints = false
        
        switch inputConfig {
        case .textInput(let placeholder):
            let textField = UITextField()
            textField.placeholder = placeholder
            textField.borderStyle = .roundedRect
            textField.translatesAutoresizingMaskIntoConstraints = false
            inputContainer.addSubview(textField)
            NSLayoutConstraint.activate([
                textField.topAnchor.constraint(equalTo: inputContainer.topAnchor),
                textField.leadingAnchor.constraint(equalTo: inputContainer.leadingAnchor, constant: 32),
                textField.trailingAnchor.constraint(equalTo: inputContainer.trailingAnchor, constant: -32),
                textField.heightAnchor.constraint(equalToConstant: 44),
                textField.bottomAnchor.constraint(equalTo: inputContainer.bottomAnchor)
            ])
        case .numberInput(let placeholder):
            let numberField = UITextField()
            numberField.placeholder = placeholder
            numberField.keyboardType = .numberPad
            numberField.borderStyle = .roundedRect
            numberField.translatesAutoresizingMaskIntoConstraints = false
            inputContainer.addSubview(numberField)
            NSLayoutConstraint.activate([
                numberField.topAnchor.constraint(equalTo: inputContainer.topAnchor),
                numberField.leadingAnchor.constraint(equalTo: inputContainer.leadingAnchor, constant: 32),
                numberField.trailingAnchor.constraint(equalTo: inputContainer.trailingAnchor, constant: -32),
                numberField.heightAnchor.constraint(equalToConstant: 44),
                numberField.bottomAnchor.constraint(equalTo: inputContainer.bottomAnchor)
            ])
        case .genderSelector(let options):
            let segmentedControl = UISegmentedControl(items: options)
            segmentedControl.selectedSegmentIndex = 0
            segmentedControl.translatesAutoresizingMaskIntoConstraints = false
            inputContainer.addSubview(segmentedControl)
            NSLayoutConstraint.activate([
                segmentedControl.topAnchor.constraint(equalTo: inputContainer.topAnchor),
                segmentedControl.leadingAnchor.constraint(equalTo: inputContainer.leadingAnchor, constant: 32),
                segmentedControl.trailingAnchor.constraint(equalTo: inputContainer.trailingAnchor, constant: -32),
                segmentedControl.heightAnchor.constraint(equalToConstant: 44),
                segmentedControl.bottomAnchor.constraint(equalTo: inputContainer.bottomAnchor)
            ])
        }
        
        return inputContainer
    }
    
    // 配置底部继续按钮
    func setupContinueButton() -> UIButton {
        let button = UIButton(type: .system)
        button.setTitle("继续", for: .normal)
        button.titleLabel?.font = .systemFont(ofSize: 18, weight: .bold)
        button.backgroundColor = .systemBlue
        button.setTitleColor(.white, for: .normal)
        button.layer.cornerRadius = 8
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(continueButtonTapped), for: .touchUpInside)
        return button
    }
    
    @objc private func continueButtonTapped() {
        continueAction()
    }
}

第二步：定义引导步骤的数据模型 #

我们用一个结构体来统一管理所有引导步骤的信息，这样后续要加新步骤也非常方便：

struct OnboardingStep {
    let title: String
    let inputConfig: UserOnboardingHelper.InputConfig
}

// 初始化你的三个引导步骤
let onboardingSteps = [
    OnboardingStep(title: "请输入你的姓名", inputConfig: .textInput(placeholder: "张三")),
    OnboardingStep(title: "请输入你的年龄", inputConfig: .numberInput(placeholder: "25")),
    OnboardingStep(title: "请选择你的性别", inputConfig: .genderSelector(options: ["男", "女", "保密"]))
]

第三步：创建通用的引导视图控制器 #

做一个通用的VC，它可以接收当前的引导步骤，然后用UserOnboardingHelper来配置整个页面的UI：

class OnboardingStepViewController: UIViewController {
    private var currentStep: OnboardingStep!
    private var helper: UserOnboardingHelper!
    private var stepIndex: Int!
    private var allSteps: [OnboardingStep]!
    
    // 初始化方法，传入当前步骤索引和所有步骤列表
    init(stepIndex: Int, allSteps: [OnboardingStep]) {
        self.stepIndex = stepIndex
        self.allSteps = allSteps
        self.currentStep = allSteps[stepIndex]
        super.init(nibName: nil, bundle: nil)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        
        // 初始化Helper，传入当前步骤信息、VC和继续按钮的回调
        helper = UserOnboardingHelper(
            stepText: currentStep.title,
            inputConfig: currentStep.inputConfig,
            viewController: self,
            continueAction: { [weak self] in
                self?.navigateToNextStep()
            }
        )
        
        // 构建页面UI
        setupPageUI()
    }
    
    private func setupPageUI() {
        let questionBox = helper.setupQuestionBox()
        let inputView = helper.setupInputView()
        let continueButton = helper.setupContinueButton()
        
        view.addSubview(questionBox)
        view.addSubview(inputView)
        view.addSubview(continueButton)
        
        NSLayoutConstraint.activate([
            // 问题区约束：顶部对齐，左右留白，高度固定
            questionBox.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 32),
            questionBox.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            questionBox.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            questionBox.heightAnchor.constraint(equalToConstant: 80),
            
            // 输入区约束：问题区下方，左右留白，高度自适应
            inputView.topAnchor.constraint(equalTo: questionBox.bottomAnchor, constant: 48),
            inputView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            inputView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            inputView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            
            // 继续按钮约束：底部对齐，左右留白，高度固定
            continueButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -32),
            continueButton.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 32),
            continueButton.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -32),
            continueButton.heightAnchor.constraint(equalToConstant: 50)
        ])
    }
    
    private func navigateToNextStep() {
        let nextIndex = stepIndex + 1
        guard nextIndex < allSteps.count else {
            // 所有步骤完成，这里可以跳转到首页或者其他页面
            print("引导流程完成！")
            return
        }
        let nextVC = OnboardingStepViewController(stepIndex: nextIndex, allSteps: allSteps)
        navigationController?.pushViewController(nextVC, animated: true)
    }
}

第四步：启动引导流程 #

在你的入口VC里，比如某个启动页面或者按钮点击事件中，初始化第一个引导VC并推入导航栈：

// 示例：在按钮点击事件里启动引导
let firstStepVC = OnboardingStepViewController(stepIndex: 0, allSteps: onboardingSteps)
let navController = UINavigationController(rootViewController: firstStepVC)
navController.navigationBar.isHidden = true // 如果不需要导航栏可以隐藏
present(navController, animated: true)

这样一来，不管你是要加更多引导步骤，还是修改某个步骤的输入类型，只需要修改onboardingSteps数组里的内容就行，UserOnboardingHelper会自动帮你配置对应的UI，完全实现了复用～

内容的提问来源于stack exchange，提问作者jackbauer