ios 加载页

原创

mob649e8156b567 2024-10-16 05:38:58 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8156b567的原创作品，请联系作者获取转载授权，否则将追究法律责任

iOS 加载页实现指南

在 iOS 应用开发中，加载页（又称启动画面）可以给用户提供重要信息和较好的用户体验。本文将带你一步步实现一个简单的加载页，并详细解释每一步所需的代码。

实现流程

下面的表格展示了实现加载页的主要步骤：

步骤号	步骤描述
1	创建加载页的界面
2	实现加载逻辑
3	设置时间延迟
4	跳转到主界面

每一步详解

步骤 1：创建加载页的界面

首先，我们需要创建一个新的 UIViewController 类作为加载页。

import UIKit

class SplashViewController: UIViewController {
    
    // 创建一个标签显示加载信息
    let loadingLabel: UILabel = {
        let label = UILabel()
        label.text = "正在加载..."
        label.font = UIFont.systemFont(ofSize: 24)
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white  // 设置背景颜色为白色
        view.addSubview(loadingLabel)   // 添加标签到视图中
        
        // 水平和垂直居中标签
        NSLayoutConstraint.activate([
            loadingLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            loadingLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

步骤 2：实现加载逻辑

接下来，加载页需要在启动时显示一定时间，然后跳转到主界面。我们可以在 viewDidLoad 方法中实现这一逻辑。

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    // 延时2秒后跳转到主界面
    DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
        self.goToMainScreen()
    }
}

func goToMainScreen() {
    let mainVC = MainViewController()  // 初始化主界面控制器
    mainVC.modalTransitionStyle = .crossDissolve  // 设置过渡效果
    mainVC.modalPresentationStyle = .fullScreen  // 全屏展示
    present(mainVC, animated: true, completion: nil)  // 显示主界面
}

步骤 3：设置时间延迟

如上代码中所示，我们使用 DispatchQueue.main.asyncAfter 方法实现了延时跳转的功能。2.0 表示加载页会被展示两秒钟。

步骤 4：跳转到主界面

在 goToMainScreen 方法中，我们实例化了 MainViewController 类，并采用了过渡效果，可以让加载页平滑地过渡到主界面。

类图

classDiagram
class SplashViewController {
    +loadingLabel: UILabel
    +viewDidLoad()
    +viewDidAppear(animated: Bool)
    +goToMainScreen()
}

class MainViewController {
}

SplashViewController --> MainViewController : present