返回 导航

Swift

hangge.com

Swift - 启动时的向导页（新手引导）的制作

作者：hangge | 2015-03-25 10:24
（本文代码已升级至Swift4）

在很多 iOS 产品或者一些应用版本的升级中，新手指导（引导页面）都是一个常用的功能，通过说明页的左右滑动，可以很清晰的展示系统的一些功能特性。

一、实现原理

1，如何检测应用是第一次登陆启动

我们可以使用 UserDefaults 类来解决这个问题。其特点是不会因应用的关闭、系统的重启而丢失。所以可以用来标记是否启动过。

2，新手引导视图控制器我们使用 UIScrollView

比如我们设置了一套新手引导图共三张，都添加到 UIScrollView 里，这时 UIScrollView 的内容宽度是 3 倍于照片或者屏幕的宽度。

3，为适应不同分辨率，需要设计几套不同尺寸的图

iOS 图片资源的命名规则是：basename + screen size modifier + urischeme + orientation + scale + device + .ext
  • basename：文件名
  • screen size modifier：屏幕尺寸修饰符（iPhone5出现后才有，如 -568h）
  • urischeme：标识URI方案的字符串（一般情况不需要关心）
  • orientation：屏幕方向（横屏为-Landscape，竖屏为-Portrait）
  • scale：缩放尺寸（普通屏不需要，Retina屏为@2x，iPhone6后多了个@3x）
  • device：设备类型（~ipad表示供iPad使用）
  • .ext：文件扩展名（可以是png或其他格式）
尽管文件很复杂，但调用却很简单，只要写上 basename.ext 即可。

二、演示样例

1，效果图

（1）程序启动后先判断是不是第一次允许，是的话先显示新手引导页面。
（2）向左滑动即可翻页。
（3）当在最后一页继续滑动时，会显示真正的主页面（程序定义的初始化视图控制器）
   

2，文件结构

 

3，样例代码

（1）入口类：AppDelegate.swift 
import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions
        launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        //增加标识，用于判断是否是第一次启动应用...
        if (!(UserDefaults.standard.bool(forKey: "everLaunched"))) {
            UserDefaults.standard.set(true, forKey:"everLaunched")
            let guideViewController = GuideViewController()
            self.window!.rootViewController=guideViewController
            print("guideview launched!")
        }
        return true
    }

    func applicationWillResignActive(_ application: UIApplication) {
    }

    func applicationDidEnterBackground(_ application: UIApplication) {
    }

    func applicationWillEnterForeground(_ application: UIApplication) {
    }

    func applicationDidBecomeActive(_ application: UIApplication) {
    }

    func applicationWillTerminate(_ application: UIApplication) {
    }
}

（2）向导页面：GuideViewController.swift 
import UIKit

class GuideViewController:UIViewController,UIScrollViewDelegate
{
    //页面数量
    var numOfPages = 3
    
    override func viewDidLoad()
    {
        let frame = self.view.bounds
        //scrollView的初始化
        let scrollView = UIScrollView()
        scrollView.frame = self.view.bounds
        scrollView.delegate = self
        //为了能让内容横向滚动，设置横向内容宽度为3个页面的宽度总和
        scrollView.contentSize = CGSize(width:frame.size.width * CGFloat(numOfPages),
                                        height:frame.size.height)
        print("\(frame.size.width*CGFloat(numOfPages)),\(frame.size.height)")
        scrollView.isPagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.showsVerticalScrollIndicator = false
        scrollView.scrollsToTop = false
        for i in 0..<numOfPages{
            let imgfile = "jianjie\(Int(i+1)).png"
            print(imgfile)
            let image = UIImage(named:"\(imgfile)")
            let imgView = UIImageView(image: image)
            imgView.frame = CGRect(x:frame.size.width*CGFloat(i), y:CGFloat(0),
                                   width:frame.size.width, height:frame.size.height)
            scrollView.addSubview(imgView)
        }
        scrollView.contentOffset = CGPoint.zero
        self.view.addSubview(scrollView)
    }
    
    //scrollview滚动的时候就会调用
    func scrollViewDidScroll(_ scrollView: UIScrollView)
    {
        print("scrolled:\(scrollView.contentOffset)")
        let twidth = CGFloat(numOfPages-1) * self.view.bounds.size.width
        //如果在最后一个页面继续滑动的话就会跳转到主页面
        if(scrollView.contentOffset.x > twidth)
        {
            let mainStoryboard = UIStoryboard(name:"Main", bundle:nil)
            let viewController = mainStoryboard.instantiateInitialViewController()
            self.present(viewController!, animated: true, completion:nil)
        }
    }
}
评论

全部评论（5）

回到顶部