Swift开发之头部图片轮播器

今天来记录一下用原生的UIScroller，代码写头部视图的图片轮播器，意义在于自己总结，欢迎大家点评。。

首先我说说我的思路：先创建一个UIView的对象，然后再创建UIScrollView和UIPageControl的对象分别加入到view的子控件中，实现图片轮播主要用到了3个对象，分别是：scrollview、pageControl和image。

scrollView：主要设置图片轮播器中内容区域

pageControl：跟随图片的移动而移动

image：用来装载图片对象

实现的步骤：

1、创建头部视图和滚动视图，并设置其相关属性

//        添加头部视图
        self.headView = UIView(frame:CGRectMake(UIScreen.mainScreen().bounds.origin.x,UIScreen.mainScreen().bounds.origin.y, UIScreen.mainScreen().bounds.size.width, 220))
        self.headView!.backgroundColor = UIColor.lightGrayColor()
        
        self.view.addSubview(headView!)
        
//        头部图片轮播器
        self.creatScrollView()

创建滚动视图并设置相关属性的代码具体如下：

//1、创建滚动视图
    func creatScrollView(){
//        初始化滚动视图并添加到头部视图
       self.scrollView  = UIScrollView(frame: CGRectMake(UIScreen.mainScreen().bounds.origin.x,UIScreen.mainScreen().bounds.origin.y, UIScreen.mainScreen().bounds.size.width, 220))
        self.scrollView!.backgroundColor = UIColor.lightGrayColor()
        self.headView!.addSubview(scrollView!)
        
//        设置图片的宽和高
        let height = self.scrollView!.frame.size.height
        let width = self.scrollView!.frame.size.width
        
//        设置滚动视图的内容区域，以及允许分页功能
        self.scrollView!.contentSize = CGSizeMake(5 * width, height)
        self.scrollView!.pagingEnabled = true
        self.scrollView?.showsVerticalScrollIndicator = false
        self.scrollView?.showsHorizontalScrollIndicator = false
        
//        设置滚动视图的代理
        self.scrollView!.delegate = self
        
//        创建分页控制器
        self.creatPageControl()
        

    }

2、创建分页控件，并设置其相关属性

分页控件的主要作用就是图片滚动时其原点也跟随图片显示不同的样式，目的在于告诉用户当前图片是第几张

//2、创建分页控制器
    func creatPageControl(){
//        创建分页控制器
        self.pageControl = UIPageControl(frame: CGRectMake(150, 200, 100, 20))
       
//        设置分页的页码数和当前页码
        self.pageControl!.numberOfPages = 5;
        self.pageControl?.currentPage = 0;
        
//        设置选中页码点的颜色和未选中页码点的颜色
        self.pageControl!.currentPageIndicatorTintColor = UIColor.blackColor()
        self.pageControl!.pageIndicatorTintColor = UIColor.grayColor()
        
//        将分页控制器添加到滚动视图中
        self.headView?.addSubview(self.pageControl!)

3、通过循环创建图片视图

//        创建5个图像视图
        for i in 0..<5 {
            self.image = UIImage.init(contentsOfFile: NSBundle.mainBundle().pathForResource("s\(i + 1)", ofType: "jpg")!)!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
            let start : CGFloat = CGFloat(i)
            let imageView : UIImageView = UIImageView(frame: CGRectMake(start * self.scrollView!.frame.size.width, 0, self.scrollView!.frame.size.width, self.scrollView!.frame.size.height))
            imageView.image = self.image!
            self.scrollView?.addSubview(imageView)

4、创建图片定时轮播的定时器

定时器创建如下：

//        创建定时器，每3秒滚动一次
        NSTimer.scheduledTimerWithTimeInterval(3.0, target: self, selector: #selector(HomeViewController.pageNumberChanged(_:)), userInfo: nil, repeats: true)

定时器调用的方法：图片依次往右循环，当当前图片为最后一张图片时，默认跳转到第一张，给用户的感觉就是图片一直在轮播

//    图片轮播器的定时器方法
    func pageNumberChanged(sender : AnyObject){
//        判断如果页数为最后一页，就从头开始
        if self.pageControl?.currentPage == self.pageControl!.numberOfPages - 1 {
            self.pageControl?.currentPage = 0
        }
//        依次往后滚动视图
        else{
            self.pageControl?.currentPage += 1
        }
        
//        设置图片显示
        let page : CGFloat = (CGFloat)((self.pageControl?.currentPage)!)
        let x = page * (self.scrollView?.frame.width)!
        self.scrollView?.contentOffset = CGPointMake(x, 0);
    }

5、遵守UIScrollViewDelegate

主要实现scrollViewDidScroll这个代理方法，

//    MARK:-----UIScrollViewDelegate-----
    func scrollViewDidScroll(scrollView: UIScrollView) {
        //每一个滚动视图的宽度
        let wid = scrollView.frame.size.width
        
        //当前页码
        let pageNumber : CGFloat = scrollView.contentOffset.x / wid
        self.pageControl?.currentPage = (Int)(pageNumber)
    }

6、具体实现效果

以上就是利用swift语言实现的简易的图片轮播器，代码比较基础，后面会继续封装，会更加完善。。未完待续。。。

Swift开发之头部图片轮播器

猜你喜欢