Swift-ScrollView輪播圖的簡易封裝和使用

不多說,輪播圖是開發中必要一項技能,直接上代碼:

先說我的思路:首次繼承于UIScrollView類自定義MyScrollView,在MyScrollView里自定制方法,func creatMyScrollView(imageName:[String],height:CGFloat)在里面完成動態布局,通過傳入的兩個參數imageName,height來制作輪播圖的圖片和高度,設置contentSize屬性和pagingEnabled屬性,上代碼:

首先繼承于UIScrollView自定義MyScrollView類

class ZYF_MyScrollView: UIScrollView {}

自定義方法

scrollView的輪播就是利用其偏移量來進行設置,如果實現n張圖片自動輪播,創建計時器是必須的,在scrollView中創建n+1張圖片,容量也是n+1張圖片的容量。讓第1張和最后一張是同一張圖片,在偏移量達到n*width的時候,讓偏移量置零,這樣,在即將顯示最后一張圖的時候,scrollView的展示圖片瞬間變成第一張,然后繼續往后播。這樣形成了我們常見的輪播效果

class ZYF_MyScrollView: UIScrollView {
    func creatMyScrollView(imageName:[String],height:CGFloat) {
        //動態布局
         for i in 0...(imageName.count - 1) {
            let imageView = UIImageView(frame: CGRectMake(CGFloat(i) * width,0,width,height))
            self.addSubview(imageView)
            
            //設置輪播圖圖片
            imageView.image = UIImage(named: imageName[i])
        }
    //設置輪播圖容量
    self.contentSize = CGSizeMake(CGFloat(imageName.count ) * width, height)
    //設置吸附屬性
    self.bounces = false
    //設置書頁效果
    self.pagingEnabled = true
    
    //單獨創建第n+1張輪播圖,和第一張圖片是同一張圖
    let imageView = UIImageView(frame:CGRectMake(CGFloat(imageName.count) * width, 0, width, height))
    imageView.image = UIImage(named:imageName[0])
    self.addSubview(imageView)
        
    }
}

這樣就算是簡單的封裝了一下,使用方法如下:

在你要放置的輪播圖的.swift文件中生成 ZYF_MyScrollView的對象

let scr = ZYF_MyScrollView()

創建圖片名稱數組

let iamgeNames = ["App公測","簡書出版","簡書官方專題","簡書月刊","簡書出版","簡書官方專題"]

調用creatUI方法,傳入圖片名稱數組,設置高度

func creatScrollView() {
     let view = UIView(frame: CGRectMake(0,0,UIScreen.mainScreen.bounds.size.width,280))
    scr.creatUI(imageNames,height:200)
    view.addSubView(scr)
}

到此,一個能夠拖動的輪播圖就制作結束了,實現自動輪播,下面我們需要借助計時器NSTimer

創建NSTimer

 //創建輪播圖定時器
    func creatTimer() {
    let  timer =  NSTimer.scheduledTimerWithTimeInterval(3, target: self, selector: #selector(self.timerManager), userInfo: nil, repeats: true)
    
    //這句話實現多線程,如果你的ScrollView是作為TableView的headerView的話,在拖動tableView的時候讓輪播圖仍然能輪播就需要用到這句話
    NSRunLoop.currentRunLoop().addTimer(timer, forMode: NSRunLoopCommonModes)

    }

    //創建定時器管理者
    func timerManager() {
        //設置偏移量scr.setContentOffset(CGPointMake(scr.contentOffset.x + width, 0), animated: true)
        //當偏移量達到最后一張的時候,讓偏移量置零
        if scr.contentOffset.x == CGFloat(width) * CGFloat(imageNames.count) {
            scr.contentOffset = CGPointMake(0, 0)
        }

    }

到此,自動輪播圖制作完畢,在使用中還缺少了一個組件,就是小白點UIPageControl,回到func creatScrollView(){}中

func creatScrollView() {
    let view =  let view = UIView(frame: CGRectMake(0,0,UIScreen.mainScreen.bounds.size.width,280))
    scr.creatUI(imageNames,height:200)`
    view.addSubView(scr)
    let page = UIPageControl()
    page.frame = CGRectMake(width / 2 - 50,160,100,30)
    page.numberOfPages = imageNames.count
    //將小白點放到scr之上
    view.insertSubview(page, aboveSubview: scr)
}

遵守UIScrollViewDelegate協議,設置小白點的跟隨輪動

  //當手動滾動視圖翻頁時調用該方法
    var cnt = 0
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        let cPage = scr.contentOffset.x / width
        page.currentPage = Int(cPage)
        cnt = Int(cPage)
    }

    //自動播放時,調用該方法
    func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView) {
        cnt += 1
        page.currentPage = cnt % imageNames.count
    }

到此,全部工程就完成了

效果如下

輪播圖效果.gif
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容