iOS App初次启动时的用户引导页制作实例分享

      应用程序app一般都有引导页，引导页可以作为操作指南指导用户熟悉使用；也可以展现给用户，让用户了解app的功能作用。引导页制作简单，一般只需要一组图片，再把图片组展现出来就可以了。展示图片组常用uiscrollview来分页显示，并且由uipagecontrol页面控制器控制显示当前页。uiscrollview和uipagecontrol搭配会更加完美地展现引导页的功能作用。下面我们来看具体的实例：

我们用nsuserdefaults类来判断程序是不是第一次启动或是否更新，在 appdelegate.swift中加入以下代码：

func application(application: uiapplication, didfinishlaunchingwithoptions launchoptions: [nsobject: anyobject]?) -> bool {

    // 得到当前应用的版本号
    let infodictionary = nsbundle.mainbundle().infodictionary
    let currentappversion = infodictionary!["cfbundleshortversionstring"] as! string

    // 取出之前保存的版本号
    let userdefaults = nsuserdefaults.standarduserdefaults()
    let appversion = userdefaults.stringforkey("appversion")

    let storyboard = uistoryboard(name: "main", bundle: nil)

    // 如果 appversion 为 nil 说明是第一次启动；如果 appversion 不等于 currentappversion 说明是更新了
    if appversion == nil || appversion != currentappversion {
        // 保存最新的版本号
        userdefaults.setvalue(currentappversion, forkey: "appversion")

        let guideviewcontroller = storyboard.instantiateviewcontrollerwithidentifier("guideviewcontroller") as! guideviewcontroller
        self.window?.rootviewcontroller = guideviewcontroller
    }

    return true
}

在guideviewcontroller中，我们用uiscrollview来装载我们的引导页:

class guideviewcontroller: uiviewcontroller {

    @iboutlet weak var pagecontrol: uipagecontrol!
    @iboutlet weak var startbutton: uibutton!

    private var scrollview: uiscrollview!

    private let numofpages = 3

    override func viewdidload() {
        super.viewdidload()

        let frame = self.view.bounds

        scrollview = uiscrollview(frame: frame)
        scrollview.pagingenabled = true
        scrollview.showshorizontalscrollindicator = false
        scrollview.showsverticalscrollindicator = false
        scrollview.scrollstotop = false
        scrollview.bounces = false
        scrollview.contentoffset = cgpointzero
        // 将 scrollview 的 contentsize 设为屏幕宽度的3倍(根据实际情况改变)
        scrollview.contentsize = cgsize(width: frame.size.width * cgfloat(numofpages), height: frame.size.height)

        scrollview.delegate = self

        for index  in 0..<numofpages {
            // 这里注意图片的命名
            let imageview = uiimageview(image: uiimage(named: "guideimage\(index + 1)"))
            imageview.frame = cgrect(x: frame.size.width * cgfloat(index), y: 0, width: frame.size.width, height: frame.size.height)
            scrollview.addsubview(imageview)
        }

        self.view.insertsubview(scrollview, atindex: 0)

        // 给开始按钮设置圆角
        startbutton.layer.cornerradius = 15.0
        // 隐藏开始按钮
        startbutton.alpha = 0.0
    }

    // 隐藏状态栏
    override func prefersstatusbarhidden() -> bool {
        return true
    }
}

最后我们让guideviewcontroller遵循uiscrollviewdelegate协议，在这里判断是否滑动到最后一张以显示进入按钮：

// mark: - uiscrollviewdelegate
extension guideviewcontroller: uiscrollviewdelegate {
    func scrollviewdidscroll(scrollview: uiscrollview) {
        let 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.2) {
                self.startbutton.alpha = 0.0
            }
        }
    }
}

在上面的代码中，为了显得自然我们给进入按钮加入了一点动画 :]

最终效果如下：