簡單的圖片輪播

一個簡單的圖片輪播,用了<strong>UIScrollView</strong>和<strong>UIPageControl</strong>的巧妙搭配. 能夠?qū)崿F(xiàn)圖片的輪播,用定時器<strong>(Timer)</strong>控制.當(dāng)按住圖片的不動的時候,計時器停止,當(dāng)松開圖片的時候計時器又開始.
主要實現(xiàn)思路是:根據(jù)圖片總數(shù)及寬高設(shè)置好ScrollView的大小,每切換一張圖片相當(dāng)于在ScrollView上進(jìn)行一個圖片寬度的移動行為,并加入定時器,實現(xiàn)自動輪播。

1.實現(xiàn)UIScrollView
設(shè)置好UIScrollView,ScrollView的contentSize根據(jù)圖片數(shù)量確定,注意pagingEnabled這個屬性,確保整頁移動.加載圖片并將準(zhǔn)備好的圖片在ScrollView里設(shè)置好位置,即將這些圖片一張緊挨著一張排列在ScrollView中。通過ScrollView的代理方法,在ScrollView滾動結(jié)束的時候根據(jù)contentOffset更新頁碼。

 
import UIKit
class ViewController: UIViewController,UIScrollViewDelegate {
    var   scrollerview:UIScrollView! = nil
    var   pagecontrol:UIPageControl! = nil
    var   timer:Timer! = nil
    override func viewDidLoad() {
        super.viewDidLoad()
        //輪播圖
        let scr = UIScrollView(frame: CGRect(x: 0, y: 100, width: self.view.frame.size.width, height: 300))
        self.view.addSubview(scr)
        scr.contentSize = CGSize(width: self.view.frame.size.width*5, height: 300)
        //是否整頁翻動
        scr.isPagingEnabled = true
        //觸壁反彈
        scr.bounces = false
        //遍歷圖片
        for index in 1...5{
            let name = "\(index).jpg"
            let image = UIImage(named: name)
            let x = CGFloat(index - 1) * self.view.frame.size.width
            let imageView = UIImageView(frame: CGRect(x: x, y: 0, width: self.view.frame.size.width, height: 300))
            scrollerview = scr
            //設(shè)置代理
            scr.delegate = self
            imageView.image = image
            scr.addSubview(imageView)
            
        }
        //開始拖拽
    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        self.timer.invalidate()
        self.timer = nil
    }
    //結(jié)束拖拽
    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        self.timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
        //一秒之后執(zhí)行
        let time =  DispatchTime.now() + Double(Int64(1*NSEC_PER_SEC))/Double(NSEC_PER_SEC)
        DispatchQueue.main.asyncAfter(deadline: time){
            if let  _ = self.timer{
                self.timer.fire()

            }
            
    }
        //self.timer.fire()
    }
    //滑動會執(zhí)行的方法
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        //獲取到偏移量  根據(jù)偏移量定位到第幾個點(diǎn)
        let x = scrollerview.contentOffset.x
        let width1 = self.view.frame.size.width
        if (x >= width1 * 4) {
            self.pagecontrol.currentPage = 0
        }else{
            self.pagecontrol.currentPage = Int(x / width1)
        }
        self.pagecontrol.currentPage = Int(x / width1)
//        switch x {
//        case 0:
//            self.pagecontrol.currentPage = 0
//        case 1 * width1:
//            self.pagecontrol.currentPage = 1
//        case 2 * width1:
//            self.pagecontrol.currentPage = 2
//        case 3 * width1:
//            self.pagecontrol.currentPage = 3
//        default:
//            print("other")
//        }
    }

2.實現(xiàn)UIPageControl
設(shè)置好UIPageControl,同樣pageControl也是根據(jù)圖片數(shù)量來確定,每一頁代表一張圖片。

        let page = UIPageControl(frame: CGRect(x: 100, y: 350, width: self.view.frame.size.width - 200, height: 30))
        self.pagecontrol = page
        page.numberOfPages = 4
        page.currentPage = 0
        page.addTarget(self, action: #selector(pageAction), for: .valueChanged)
        self.view.addSubview(page)
        
        func pageAction(page:UIPageControl){
        let index = page.currentPage
        let point = CGPoint(x:CGFloat(index)*self.view.frame.size.width, y: 0)
        //修改偏移量
        self.scrollerview.setContentOffset(point, animated: true)
    }

3.實現(xiàn)Timer
定時器設(shè)置,這里設(shè)置為每隔1秒滾動更新一次,實際上就是每隔1秒更新一次頁碼,根據(jù)頁碼的變化,讓ScrollView跟著移動,每次移動一張圖片的距離.這里還需要注意的是,由于加入定時器有自動輪播的效果了,會與手動拖拽ScrollView沖突,即手動拖拽ScrollView過程時ScrollView可能自動移動更新圖片了,顯然這種效果是不符合用戶習(xí)慣的,這時需要在ScrollView的代理事件中進(jìn)行處理,即開始拖拽ScrollView時停止定時器,拖拽結(jié)束后再開啟定時器。

//timer
        self.timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
        self.timer.fire()
        
        func timerAction(){
        //獲取當(dāng)前的offset
        //offset.x + width
        let offset = self.scrollerview.contentOffset
        let width = self.view.frame.size.width
        //讓scrollview進(jìn)行滑動
        scrollerview.setContentOffset(CGPoint(x : offset.x + width,y : offset.y), animated: true)
        //if 到 第四個 ,跳動到第一個
        if scrollerview.contentOffset.x >= width * 4 {
            let point = CGPoint(x: 0, y: 0)
            scrollerview.contentOffset = point
        }
    }

效果圖展示:
<iframe height=498 width=510 src="https://v.qq.com/x/page/k0349zrc421.html">

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

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

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