天天看點

[iOS]簡單的APP引導頁的實作 (Swift)

在第一次打開APP或者APP更新後通常用引導頁來展示産品特性

我們用NSUserDefaults類來判斷程式是不是第一次啟動或是否更新,在AppDelegate.swift中加入以下代碼:

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.

    // 得到目前應用的版本号
    let infoDictionary = NSBundle.mainBundle().infoDictionary
    let currentAppVersion = infoDictionary!["CFBundleShortVersionString"] as String

    let userDefaults = NSUserDefaults.standardUserDefaults()
    let appVersion = userDefaults.stringForKey("appVersion")

    var storyboard = UIStoryboard(name: "Main", bundle: nil)

    // 如果appVersion為nil說明是第一次啟動;如果appVersion不等于currentAppVersion說明是更新了
    if appVersion == nil || appVersion != currentAppVersion {

        userDefaults.setValue(currentAppVersion, forKey: "appVersion")

        var guidanceViewController = storyboard.instantiateViewControllerWithIdentifier("GuidanceVC") as GuidanceViewController
        self.window!.rootViewController = guidanceViewController
    }

    return true
}           

在GuidanceViewController中,我們用UIScrollView來裝載我們的引導頁

import UIKit

class GuidanceViewController: UIViewController {

    var scrollView:  UIScrollView!

    @IBOutlet weak var pageControl: UIPageControl!
    @IBOutlet weak var startButton: UIButton!

    var numOfPages = 4

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.

        var frame = self.view.bounds

        scrollView = UIScrollView()
        scrollView.frame = self.view.bounds
        scrollView.delegate = self

        // scrollView的contentSize設為螢幕寬度的4(我這裡設了四張引導頁)倍
        scrollView.contentSize = CGSizeMake(frame.size.width * CGFloat(numOfPages), frame.size.height)

        scrollView.pagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.showsVerticalScrollIndicator = false
        scrollView.scrollsToTop = false

        for i in 0..<numOfPages {
            var image = UIImage(named: "Guidance\(i + 1)")
            var imageView = UIImageView(image: image)

            imageView.frame = CGRectMake(frame.size.width * CGFloat(i), 0, frame.size.width, frame.size.height)

            scrollView.addSubview(imageView)
        }

        scrollView.contentOffset = CGPointZero

        self.view.addSubview(scrollView)

        startButton.alpha = 0.0

        // 将這兩個控件拿到視圖的最上面
        self.view.bringSubviewToFront(pageControl)
        self.view.bringSubviewToFront(startButton)
    }


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func start(sender: AnyObject) {
        var storyboard = UIStoryboard(name: "Main", bundle: nil)
        var viewController = storyboard.instantiateViewControllerWithIdentifier("LoginVC") as LoginViewController

        viewController.modalTransitionStyle = UIModalTransitionStyle.CrossDissolve
        presentViewController(viewController, animated: true, completion: nil)
    }
}           
// MARK: - UIScrollViewDelegate
extension GuidanceViewController: UIScrollViewDelegate {

    func scrollViewDidScroll(scrollView: UIScrollView) {
        var offset = scrollView.contentOffset
        // 随着滑動改變pageControl的狀态
        pageControl.currentPage = Int(offset.x / view.bounds.width)
        // 因為currentPage是從0開始,是以numOfPages減1
        if pageControl.currentPage == numOfPages - 1 {

            UIView.animateWithDuration(0.5) {
                self.startButton.alpha = 1.0
            }

        } else {

            UIView.animateWithDuration(0.5) {
                self.startButton.alpha = 0.0
            }
        }
    }
}           
[iOS]簡單的APP引導頁的實作 (Swift)

效果展示