Swift-ScrollView輪播圖的簡(jiǎn)易封裝和使用

不多說(shuō),輪播圖是開(kāi)發(fā)中必要一項(xiàng)技能,直接上代碼:

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

首先繼承于UIScrollView自定義MyScrollView類

class ZYF_MyScrollView: UIScrollView {}

自定義方法

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

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

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

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

let scr = ZYF_MyScrollView()

創(chuàng)建圖片名稱數(shù)組

let iamgeNames = ["App公測(cè)","簡(jiǎn)書(shū)出版","簡(jiǎn)書(shū)官方專題","簡(jiǎn)書(shū)月刊","簡(jiǎn)書(shū)出版","簡(jiǎn)書(shū)官方專題"]

調(diào)用creatUI方法,傳入圖片名稱數(shù)組,設(shè)置高度

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

到此,一個(gè)能夠拖動(dòng)的輪播圖就制作結(jié)束了,實(shí)現(xiàn)自動(dòng)輪播,下面我們需要借助計(jì)時(shí)器NSTimer

創(chuàng)建NSTimer

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

    }

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

    }

到此,自動(dòng)輪播圖制作完畢,在使用中還缺少了一個(gè)組件,就是小白點(diǎn)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
    //將小白點(diǎn)放到scr之上
    view.insertSubview(page, aboveSubview: scr)
}

遵守UIScrollViewDelegate協(xié)議,設(shè)置小白點(diǎn)的跟隨輪動(dòng)

  //當(dāng)手動(dòng)滾動(dòng)視圖翻頁(yè)時(shí)調(diào)用該方法
    var cnt = 0
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        let cPage = scr.contentOffset.x / width
        page.currentPage = Int(cPage)
        cnt = Int(cPage)
    }

    //自動(dòng)播放時(shí),調(diào)用該方法
    func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView) {
        cnt += 1
        page.currentPage = cnt % imageNames.count
    }

到此,全部工程就完成了

效果如下

輪播圖效果.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容