《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)

}