《UIPageControl 的创建和 自定义和引导页的使用》

                     本篇文章主要讲解 Uipagecontrol 的创建和其属性的介绍。还有 UIpageControl 的自定义样式。还有现代开发不可缺少的引导页的创建和详细使用。

现在的App开发，都离不开一个重要的环节。那就是引导页。引导页的作用是指导新的用户一步一步了解你的App。还可以与用户交互，进行一些数据的交流和信息的统计。

    准备：我们首先了解 UIPageControl 的创建和使用。现在让我们一起进入风沙岁月的蓝天。

1、第一步，是准备，创建 Uiscrollview 的对象。

 scrollview = UIScrollView(frame:CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height))

        //设置分页

        scrollview.pagingEnabled = true

        //防反弹

        scrollview.bounces = false

        // 隐藏水平，滚动条

        scrollview.showsHorizontalScrollIndicator = false

        //设置 代理

        scrollview.delegate = self

 //设置 scrollview 的内容偏移量，否者不可滑动

        scrollview.contentSize = CGSizeMake(4 * self.view.frame.size.width, 0)

       self.view.addSubview(scrollview)

 // 以上是上一节的恢复

2、添加滚动的图片，创建存储图片对象的数组 和对象的创建

//存放图片对像的数组

        let ImageArray:Array=[UIImage(named: "ed6fcd9425b99f855e661dd86a25f24f.jpg"),UIImage(named: "38eccbce92c672c11c0dbd0f393f0ce4.jpg"),UIImage(named: "af6e20752a1f0640b80b10309881645c.jpg"),UIImage(named: "18e1cf0d40f5256763040f2573727dd2.png")]

        

  //顺环  包含是闭区间  所以要减去 1

        for i in 0...(VC_ImageCount-1)

        {

            //创建IMV对象

            let ImageV = UIImageView(image: ImageArray[i])

            //设定大小

            ImageV.frame = CGRectMake(CGFloat(i) * self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height)

            //打开图片的交互属性

            ImageV.userInteractionEnabled = true

            // 添加交互

            if i == (VC_ImageCount - 1) {

                let btn = UIButton(type: UIButtonType.Custom)

                btn.frame = CGRectMake(self.view.frame.size.width/2-50, self.view.frame.size.height-90, 100, 40)

                btn.setTitle("开始体验", forState: UIControlState.Normal)

                btn.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)

                btn.layer.borderColor = UIColor.blueColor().CGColor

                btn.layer.borderWidth = 1

                btn.addTarget(self, action: "Join", forControlEvents: UIControlEvents.TouchUpInside)

                ImageV.addSubview(btn)

                

            }

            //将图片对象添加到 scrollview 上，使其具有滑动效果

            scrollview.addSubview(ImageV)

            

        }

3、以上，是对上一节的总结，也是本节的准备。下面进入 UIpagecontrol 的解说

//我们开始介绍 UIPageControl

        //创建其对象

        PageControl = UIPageControl(frame:CGRectMake(0,self.view.frame.size.height-40,self.view.frame.size.width,30))

        //设置数量

        PageControl.numberOfPages = VC_ImageCount

        // 设置  改变小圆点的颜色

        PageControl.pageIndicatorTintColor = UIColor.redColor()

        //效果是：当前选中的是白色，未选中的是红色

        //设置第二个图片被选中

        PageControl.currentPage = 0

        //设置当前，选中的小圆点的颜色

        PageControl.currentPageIndicatorTintColor = UIColor.magentaColor()

        //设置 uipagecontrol 的边框

        PageControl.layer.borderWidth = 2

        //设置 uipagecontroll 的边框颜色

        let makecoloer :CGColorRef = UIColor.purpleColor().CGColor

        PageControl.layer.borderColor =  makecoloer

        //获取小圆点的大小

        PageControl.sizeForNumberOfPages(2)

        print(PageControl.sizeForNumberOfPages(2))

        /*

          打印结果： (23.0, 37.0)

        */

 //设置其代理，是小圆点，跟随图片的滑动而动

        PageControl .addTarget(self, action: "pagecontroller:", forControlEvents: UIControlEvents.ValueChanged)

        // 将其添加到 self.view

        self.view.addSubview(PageControl)

        //效果是  白色的小圆点，滑动图片 ，小圆点不跟随动

4、设置其跟随图片相对而动

/*****************************************************************/

    //圆点的点击处理 图片给随圆点而动

    func pagecontroller(ZSJ_pageControl:UIPageControl){

        scrollview.contentOffset = CGPointMake(CGFloat(ZSJ_pageControl.currentPage) * self.view.frame.size.width, 0)

    }

/****************************************************************/

    // 圆点跟随图片动

    func scrollViewDidScroll(scrollView: UIScrollView) {

        let  offset :CGFloat =  scrollview.contentOffset.x / self.view.frame.size.width

        //数据的强转

        PageControl.currentPage = Int(offset)

}

5、在APPDelegate 里面判断，是否用户第一次使用

 let  OK = NSUserDefaults.standardUserDefaults().valueForKey("OVER")

        if OK == nil {

            self.window?.rootViewController = ViewController()

        }else {

            STARAPP()

        }

        // Override point for customization after application launch.

        return true

    }

    func STARAPP(){

        //进行跳转

        var GH = NSUserDefaults.standardUserDefaults().valueForKey("OVER")

        //移除，存储变量

        GH = nil

    }

6、是本博客的重点，就是  UipageControl 的自定义。同时，可改变其小圆点为各种形态和颜色。先上效果图：

1、我们要创建几个全局变量。全局的现在不可使用宏，因为是Swift 取消了宏。

let  VC_ImageCount:Int = 4

class ViewController: UIViewController,UIScrollViewDelegate{

    var  scrollview = UIScrollView()

    var  PageControl = UIPageControl()

    var  TempBtn = UIButton()

    var  btn = UIButton()

    var   temp_BTn = UIButton()

注意声明的方式和地方。

2、

//改变小圆点的形状

        PageControl.numberOfPages = 0

        

        let  GH :CGFloat = self.view.frame.size.width - 150 - CGFloat(VC_ImageCount - 1 ) * 10

        let  HG :CGFloat = CGFloat(VC_ImageCount)

        

        for i in 0...(VC_ImageCount - 1)

        {

            btn = UIButton(type: UIButtonType.Custom)

            btn.frame = CGRectMake(60 + CGFloat(i) * (GH / HG) + 30 , 20,20 , 4)

            btn.setBackgroundImage(UIImage(named: "E44E2A3C-6383-4B55-AE79-EDAB85DD6A7A.png"), forState: UIControlState.Normal)

            btn.setBackgroundImage(UIImage(named: "D9D3E0AA-67AD-4778-A8BC-A849B40CC25D.png"), forState: UIControlState.Selected)

            btn.tag = i + 200;

            //特殊处理

            if i == 0 {

                btn.selected = true

                Join1(btn)

            }

2、实现其方法

/***************************************************/

    //自定义 pagecoler

    func Join1 (Btn: UIButton){

        TempBtn.selected = false

        TempBtn = Btn;

        TempBtn.selected = true

        scrollview.contentOffset = CGPointMake(CGFloat(TempBtn.tag - 200) * self.view.frame.size.width, 0)

    }