Swift-无限轮播图

轮播图和无限自动轮播图实现起来都非常简单,实现效果如下:


Swift-无限轮播图_第1张图片
FlyElephant.gif

主要实现功能分页,定时切换,滑动到最后一页之后自动滑动到第一页, UIScorllView来实现.

UI初始化

设置图片位置:

let carouselView:CarouselView = CarouselView(frame: CGRect(x: 0, y: 100, width: self.view.frame.width, height: 200)) let imgNames:[String] = ["Beauty1.jpg", "Beauty2.jpg" , "Beauty3.jpg"] carouselView.setUp(imageNames: imgNames) self.view.addSubview(carouselView)

UIScrollView的ContenSize,ContentOffset,分页修改:

` override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.gray
scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: frame.width, height: frame.height))
scrollView.contentSize = CGSize(width: frame.width, height: frame.height)
scrollView.showsHorizontalScrollIndicator = false
scrollView.isPagingEnabled = true
scrollView.delegate = self
scrollView.contentOffset = CGPoint(x: 0, y: 0)

    self.pageControl = UIPageControl(frame: CGRect(x: (self.frame.width - 200) / 2, y: self.frame.height - 40, width: 200, height: 20))
    self.pageControl.numberOfPages = 5
    self.pageControl.currentPage = 1
    self.pageControl.currentPageIndicatorTintColor = UIColor.red
    self.pageControl.pageIndicatorTintColor = UIColor.white
    
    self.addSubview(scrollView)
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}`

轮播的图片为n张,ContentSize设置为(n+2)*width,默认偏移量为width:

` func setUp(imageNames:[String]) {
self.imgArr = imageNames
let count:Int = self.imgArr.count
let width:CGFloat = self.scrollView.frame.width

    for i in 0..

轮播切换

轮播图的中需要实现UIScollViewDelegate,手势滑动的时候需要停止定时器,手势结束之后开始定时器:

` // MARK: - Private

func playBanner() {
    if currentIndex == (self.imgArr.count + 1) { // 滚动到最后一页
        currentIndex = 1
    } else {
        currentIndex += 1
    }
    
    self.scrollView.contentOffset = CGPoint(x: self.scrollView.frame.width * CGFloat(currentIndex), y: 0)
}

private func stopTimer() {
    self.timer.invalidate()
    self.timer = nil
}

private func startTimer() {
    self.timer = Timer.scheduledTimer(timeInterval: 3, target: self, selector:#selector(playBanner), userInfo: nil, repeats: true)
    RunLoop.current.add(self.timer, forMode: .commonModes)
}

// MAARK: - UIScrollViewDelegate

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let offsetX:CGFloat = scrollView.contentOffset.x
    let width:CGFloat = self.scrollView.frame.width
    if offsetX == 0 {
        self.scrollView.setContentOffset(CGPoint(x: width * CGFloat(self.imgArr.count), y: 0), animated: true)
    }
    
    if offsetX == (width * CGFloat(self.imgArr.count + 1)) {
        self.scrollView.setContentOffset(CGPoint(x: width, y: 0), animated: true)
    }
    
    
    let currentPage = offsetX / width - 0.5
    self.pageControl.currentPage = Int(currentPage)
}

func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
    stopTimer()
}

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    startTimer()
}`

注意点需要设置滑动切换的页面设置:

let currentPage = offsetX / width - 0.5 self.pageControl.currentPage = Int(currentPage)

你可能感兴趣的:(Swift-无限轮播图)