自定义视图的构建

 

在很多iOS产品或者一些应用版本的升级中，新手指导（引导页面）都是一个常用的功能，通过说明页的左右滑动，可以很清晰的展示系统的一些功能特性。制作思路如下：
这里介绍两种我个人认为实用性比较高的的方式，制作思路如下：
 

1.1滑动后直接跳转到主界面（没有UIPageControl）

(1)如何检测应用是第一次登陆启动
我们可以使用NSUserDefaults类来解决这个问题。其特点是不会因应用的关闭、系统的重启而丢失。所以可以用来标记是否启动过。 
(2)新手引导视图控制器我们使用UIScrollView
比如我们设置了一套新手引导图共4张，都添加到UIScrollView里，这时UIScrollView的内容宽度是4倍于照片或者屏幕的宽度。
 效果图：

1.2滑动到某页，按钮弹出点击后跳转到主界面(有UIPageControl)

(1)如何检测应用是第一次登陆启动
我们可以使用NSUserDefaults类来解决这个问题。其特点是不会因应用的关闭、系统的重启而丢失。所以可以用来标记是否启动过。
(2)新手引导视图控制器我们使用UIScrollView
比如我们设置了一套新手引导图共三张，都添加到UIScrollView里，这时UIScrollView的内容宽度是3倍于照片或者屏幕的宽度。
(3)向ScrollView添加控件，小圆点(UIPageContrl)
(4)动画按钮的实现，点击实现跳转界面
效果图：


2.1实现代码

入口类：AppDelegate.swift

import UIKit
import CoreData

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.
        //增加标识，用于判断是否是第一次启动应用,是的话添加标注"firstLaunch"并将导航控制器设置为根视图
        if (!NSUserDefaults.standardUserDefaults().boolForKey("firstLaunch")) {
            NSUserDefaults.standardUserDefaults().setBool(true, forKey: "firstLaunch")
            let scrollerViewController = ScrollerViewController()
            //把导航控制器设置为根视图
            self.window!.rootViewController = scrollerViewController
            print("ScrollerView launched!")
        }
        return true
    }

 

2.2向导页面：ScrollerViewController.swift

注意：两种实现方式都在代码中，此应用代码为第二种实现方式（带UIPageControl和点击Btn实现页面跳转主页面）

当需要实现第一种实现方式(直接滑动到页尾直接跳转到主页面)：

step1:将UIPageContrl和UIButton相关代码注释

step2:将最后一段"直接滑动不需要点击，注释UIPageControl和UIButton，并解除这段注释即可"代码解除注释即可

import UIKit

class ScrollerViewController: UIViewController,UIScrollViewDelegate {

    
    let pageControl = UIPageControl()
    var numOfPages = 4
    //scrollView的初始化
    let scrollView = UIScrollView()
    let Btn = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        //pageContrller位置设定
        pageControl.center = CGPoint(x: self.view.frame.width/2, y: self.view.frame.height-30)
        //当前颜色
        pageControl.currentPageIndicatorTintColor = UIColor.blueColor()
        //其余页码标点颜色
        pageControl.pageIndicatorTintColor = UIColor.whiteColor()
        //标点数
        pageControl.numberOfPages = 4
        //滑动相应动作
        pageControl.addTarget(self, action: "scrollViewDidScroll", forControlEvents: UIControlEvents.ValueChanged)
        
        
        
        
        let frame = self.view.bounds
        //scrollView的框架大小等于当前控制器视图的边界大小
        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)")
        //pagingEnabled 是否自动滚动到subView边界
        scrollView.pagingEnabled = true
        //bounces 默认是YES，就是滚动超过边界会反弹，即有反弹回来的效果。若是NO，则滚动到达边界会立刻停止
        scrollView.bounces = true
        //滚动时是否显示水平滚动条
        scrollView.showsHorizontalScrollIndicator = false
        //滚动时是否显示垂直滚动条
        scrollView.showsVerticalScrollIndicator = false
        //是否可控制控件滚动到顶部
        scrollView.scrollsToTop = false
        scrollView.contentOffset = CGPoint.zero
        self.view.addSubview(scrollView)
        
        for i in 0..<numOfPages{
            let image = UIImage(named: "Welcome\(i+1)")
            let imageView = UIImageView(image: image)
            
            //框架大小为控制器视图大小,滑动范围为x轴方向i个控制器视图大小
            imageView.frame = CGRect(x: frame.size.width*CGFloat(i), y: CGFloat(0), width: frame.size.width, height: frame.size.height)
            scrollView.addSubview(imageView)
            self.view.addSubview(pageControl)
        }
        
        // Do any additional setup after loading the view.
    }
    
    
    //scrollview滚动的时候就会调用
    func scrollViewDidScroll(scrollView: UIScrollView) {
        let index = Int(scrollView.contentOffset.x/self.view.frame.size.width)
        print("scrolled:\(scrollView.contentOffset)")
        pageControl.currentPage = index
        
        //添加Btn
        if index == 3{
            //理解UIView的空间坐标系,原点在左上角x轴向右，y轴向下
            self.Btn.frame = CGRect(x: 3*self.view.frame.width, y: self.view.frame.height, width: self.view.frame.width, height: 50)
            self.Btn.setTitle("开启Swift之旅", forState: UIControlState.Normal)
            self.Btn.titleLabel?.font = UIFont.systemFontOfSize(20.0)
            self.Btn.setTitleColor(UIColor.grayColor(), forState: UIControlState.Highlighted)
            self.Btn.backgroundColor = UIColor.orangeColor()
            self.Btn.alpha = 0
            self.Btn.addTarget(self, action: "BtnClick:", forControlEvents: .TouchUpInside)
            UIView.animateWithDuration(1.5, delay: 0.5, options: .CurveEaseIn, animations: {() -> Void in
                self.Btn.frame = CGRect(x: 3*self.view.frame.width, y: self.view.frame.height-100, width: self.view.frame.width, height: 50)
                self.Btn.alpha = 1
                self.scrollView.addSubview(self.Btn)
                }, completion: nil)
            
        }
        
 
        
       
        
//        直接滑动不需要点击，注释UIPageControl和UIButton，并解除这段注释即可
//        let twidth = CGFloat(numOfPages-1)*self.view.frame.size.width
//        //如果在最后一个页面继续滑动的话就会跳转主页面
//        if(scrollView.contentOffset.x > twidth){
//            let mainStoryboard = UIStoryboard(name:"Main", bundle:nil)
//            let homePage = mainStoryboard.instantiateViewControllerWithIdentifier("homePage1")
//            self.presentViewController(homePage, animated: false, completion: nil)
//        }
        }
    
    func BtnClick(button:UIButton){
        let mainStoryboard = UIStoryboard(name:"Main", bundle:nil)
        let homePage = mainStoryboard.instantiateViewControllerWithIdentifier("homePage1")
        self.presentViewController(homePage, animated: false, completion: nil)
    }

 

最后声明此篇文章结合航哥网站的资料：
原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_673.html