当前位置:首页 » 编程语言

Swift-轻松实现图片轮播

2015-08-22 20:25 本站整理 浏览(104)

我写android的时候实现图片轮播用的viewpager,其实还算可以,也不是特麻烦,用swift实现图片轮播我用的scrollview+pageControl ,今天我记录一下实现的过程,理清一下思路。

思路是这样的。

这个一个scrollview,横着放,里面放了四张图片,计算出图片的frame,实现轮播的时候,我们去计算scrollview的offset偏移量,然后用定时器timer去触发滚动,计算当前的偏移量和page,配合pageControll,指示器改变,当到达最后一张图片的时候我们把page设为0。重新滚动。

效果图:

接下来动手来写了。

1、初始化imageView,计算imageview的frame,并设置scrollView的属性

func initView(){
        let image_W:CGFloat = self.scrollview.frame.size.width
        let image_H:CGFloat = self.scrollview.frame.size.height
        var image_Y:CGFloat = 0
        var totalCount:NSInteger = 5
        for index in 0..<totalCount{
            var imageView:UIImageView = UIImageView()
            let image_X:CGFloat = CGFloat(index) * image_W
            imageView.frame = CGRectMake(image_X, image_Y, image_W, image_H)
            let name:NSString = NSString(format:"image_%d",index+1)
            imageView.image = UIImage(named:name as String)
            self.scrollview.showsHorizontalScrollIndicator = false
            self.scrollview.addSubview(imageView)
        }

        self.view.addSubview(pagecontrol)

        let content_W:CGFloat = image_W * CGFloat(totalCount)
        self.scrollview.contentSize = CGSizeMake(content_W, 0)
        self.scrollview.pagingEnabled = true;
        //self.scrollview.delegate = self
        self.pagecontrol.numberOfPages = totalCount
        self.addTimer()
    }

看上面代码我们已经把图片像上面的图片一样摆好了。并且设置的scrollview的contentSize(内容大小),pageEnabled(是否可以分页)

2、实现scrollview的delegate。

func scrollViewDidScroll(scrollView: UIScrollView) {
        let scrollviewW:CGFloat = scrollview.frame.size.width
        let x:CGFloat = scrollview.contentOffset.x
        let page:Int = (Int)((x + scrollviewW / 2) / scrollviewW)
        self.pagecontrol.currentPage = page
    }

    func scrollViewWillBeginDragging(scrollView: UIScrollView) {
        println("scrollViewWillBeginDragging")
        self.removeTimer()
    }

    func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        println("scrollViewDidEndDragging")
        self.addTimer()
    }

第一个方法监听scrollview是否滑动,这里我们计算出当前page。第二个方法监听是否开始拖动的动作(把定时器关掉),第三个方法监听拖动结束的操作(把定时器重新打开)。

3、实现定时器Timer

func addTimer(){
        self.timer = NSTimer.scheduledTimerWithTimeInterval(1, target: self, selector: "nextImage:", userInfo: nil, repeats: true)
        NSRunLoop.currentRunLoop().addTimer(self.timer, forMode: NSRunLoopCommonModes)
    }

    func removeTimer(){
        self.timer.invalidate()
    }
func nextImage(sender:AnyObject!){
        var page:Int = self.pagecontrol.currentPage
        if(page == 4){
            page = 0
        }else{
            ++page
        }
        let x:CGFloat = CGFloat(page) * self.scrollview.frame.size.width
        self.scrollview.contentOffset = CGPointMake(x, 0)
    }

定时器每个隔1s去出发nextImage这个方法,这里重新计算page。然后把timer加入NSRunLoop中,这个类的作用是监听timer是否触发,触发的时候就让他工作,没有触发就让它休眠。如果想要深入了解的话,大家可以去百度查官方文档。面试的时候经常会问到。

错误总结:

1、pageControl指示器拖到scrollview,然后被图片覆盖看不到。

解决办法:self.view.addSubView(pageControl),将pageControl加入父view中,这样的就不会再scrollview中了。