最近在學(xué)習(xí)swift油额，就用swift實(shí)現(xiàn)輪播圖來練習(xí)一下

輪播圖的創(chuàng)建有兩種方式：

    1>可以用scrollview創(chuàng)建3個view叠纷，自己實(shí)現(xiàn)循環(huán)利用
    2>利用collectionView由系統(tǒng)來處理item的循環(huán)利用問題

顯然使用collectionView實(shí)現(xiàn)的方式比較簡單。

輪播圖由兩部分組成潦嘶，collectionView和一個pageControl涩嚣。自定義一個CarouselView，懶加載創(chuàng)建collectionView和pageControl：

fileprivate lazy var carouselCollectionView : UICollectionView = { [unowned self] in
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = UICollectionViewScrollDirection.horizontal//橫向滾動
        layout.itemSize = CGSize(width: kViewWidth, height: kViewHeight)
        layout.minimumLineSpacing = 0//行間距為0
        let carouselCollectionView:UICollectionView = UICollectionView(frame: self.bounds, collectionViewLayout: layout)
        carouselCollectionView.showsHorizontalScrollIndicator = false
        carouselCollectionView.isPagingEnabled = true//按頁滾動
        carouselCollectionView.backgroundColor = UIColor.white
        carouselCollectionView.register(CarouselCollectionViewCell.self, forCellWithReuseIdentifier: CellIdentifier)//注冊自定義cell
        //添加代理
        carouselCollectionView.dataSource = self
        carouselCollectionView.delegate = self
        return carouselCollectionView
    }()
    
    fileprivate lazy var pageControl : UIPageControl = {
        let pageControl:UIPageControl = UIPageControl()
        pageControl.translatesAutoresizingMaskIntoConstraints = false//用代碼為pageControl添加NSLayoutConstraint的時候,需要設(shè)置
        pageControl.numberOfPages = 1
        return pageControl
    }()

重寫自定義視圖的初始化方法

init(Y: CGFloat,H:CGFloat) {
        kViewHeight = H
        super.init(frame: CGRect(x: 0, y: Y, width: kViewWidth, height: kViewHeight))
        setupUI()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

使用extension為CarouselView添加一個布局方法

//MARK:- setup UI
extension CarouselView {
    func setupUI() {
        self.addSubview(carouselCollectionView)
        self.addSubview(pageControl)
        //將pageControl添加到自定義視圖后掂僵，給pageControl添加約束
        let rightConstraint:NSLayoutConstraint = NSLayoutConstraint(item: pageControl, attribute: .right, relatedBy: .equal, toItem: self, attribute: .right, multiplier: 1.0, constant: -10)
        let bottomConstraint:NSLayoutConstraint = NSLayoutConstraint(item: pageControl, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: -5)
        let heightConstraint:NSLayoutConstraint = NSLayoutConstraint(item: pageControl, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 20)
        pageControl.superview?.addConstraint(rightConstraint)
        pageControl.superview?.addConstraint(bottomConstraint)
        pageControl.superview?.addConstraint(heightConstraint)
    }
}

創(chuàng)建一個數(shù)組用來存儲自定義CarouselModel

var carouselModelArr : [CarouselModel]? {
        didSet {
            //數(shù)組發(fā)生變化時刷新collectionView
            self.carouselCollectionView.reloadData()
            pageControl.numberOfPages = carouselModelArr?.count ?? 0
            //初識時航厚，讓collectionView滾動到中間某個位置，使用戶可以向前翻頁
            let index = (carouselModelArr?.count ?? 0)*10
            self.carouselCollectionView.scrollToItem(at: IndexPath(item: index, section: 0), at: .left, animated: false)
            //添加計時器
            removeTimer()
            addTimer()
        }
    }

自定義一個CarouselModel用來接收數(shù)據(jù)

class CarouselModel: NSObject {

    var title:String = ""
    var pic_url:String = ""
    
    init(dic:[String:NSObject]) {
        super.init()
        //kvc方法锰蓬，字典轉(zhuǎn)模型
        setValuesForKeys(dic)
    }
    //獲取的數(shù)據(jù)中沒定義的鍵值在這里處理
    override func setValue(_ value: Any?, forUndefinedKey key: String) {
//        print("undefined key : \(key), value : \(value)")
    }
}

創(chuàng)建自定義cell
自定義 cell包括兩部分：
1>展示圖片用的imageView
2>展示文字title的Label

import UIKit
import SDWebImage

class CarouselCollectionViewCell: UICollectionViewCell {
    
    var imageView = UIImageView()
    
    var titleLabel = UILabel()
    
    var carouselModel : CarouselModel? {
        didSet {
            //設(shè)置屬性時給label和imageView賦值
            titleLabel.text = carouselModel?.title
            //使用SDWebImage設(shè)置imageView圖片
            imageView.sd_setImage(with: URL(string: (carouselModel?.pic_url ?? "")!), placeholderImage: UIImage(named: "placehold"))
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension CarouselCollectionViewCell {
    func setupUI() {
        imageView.frame = self.bounds
        titleLabel.frame = CGRect(x: 0, y: self.bounds.size.height - 30, width: self.bounds.size.width, height: 30)
        titleLabel.backgroundColor = UIColor(white: 0.4, alpha: 0.3)
        titleLabel.textColor = .white
        self.addSubview(imageView)
        self.addSubview(titleLabel)
    }
}

自定義CarouselView遵循 DataSource 協(xié)議

//MARK:- collectionViewDataSource
extension CarouselView : UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        //返回10000倍item實(shí)現(xiàn)無限輪播幔睬，因?yàn)閏ollectionView的重用機(jī)制，并不會創(chuàng)建這么多item芹扭，不用擔(dān)心內(nèi)存問題
        return 10000*(carouselModelArr?.count ?? 0);
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //使用自定義item：CarouselCollectionViewCell
        let collectionItem = collectionView.dequeueReusableCell(withReuseIdentifier: CellIdentifier, for: indexPath) as! CarouselCollectionViewCell
        let index = indexPath.item % carouselModelArr!.count
        collectionItem.carouselModel = carouselModelArr![index]
        return collectionItem
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        let item = collectionView.cellForItem(at: indexPath) as! CarouselCollectionViewCell
        print("title : \(item.titleLabel.text)")
    }
}

自定義CarouselView遵循Delegate協(xié)議

//MARK:- collectionViewDelegate
extension CarouselView : UICollectionViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        //當(dāng)偏移超過page的一半時pageControl調(diào)到下一個
        let offset = scrollView.contentOffset.x + kViewWidth / 2
        pageControl.currentPage = Int(offset / kViewWidth) % (carouselModelArr?.count ?? 1)
    }
    
    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        //用戶開始拖拽時麻顶，移除定時器
        removeTimer()
    }
    
    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        //用戶停止拖拽時，打開定時器
        addTimer()
    }
}

添加計時器舱卡，使collection View滾動起來

//MARK:- 添加計時器
extension CarouselView {
    func addTimer() {
        timer = Timer(timeInterval: 3.0, target: self, selector: #selector(scrollToNextPage), userInfo: nil, repeats: true)
        RunLoop.main.add(timer!, forMode: .commonModes)
    }
    
    func removeTimer() {
        timer?.invalidate()
        timer = nil
    }
    
    func scrollToNextPage() {
        let offsetX = carouselCollectionView.contentOffset.x + kViewWidth//當(dāng)前偏移量加上一頁的寬度
        carouselCollectionView.setContentOffset(CGPoint(x: offsetX, y: 0), animated: true)
        
    }
}

此時澈蚌，一個簡單的輪播圖就完成了！

下面是輪播圖的使用：

import UIKit
import AFNetworking

class ViewController: UIViewController {
    //創(chuàng)建自定義carousView
//    let carouselView = CarouselView(Y: 64, H: 200)//需要毛玻璃效果時Y為64
    let carouselView = CarouselView(Y: 0, H: 200)//不需要毛玻璃效果時Y灼狰，為0。

    var modelArr = [CarouselModel]()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        getArrayFromWeb()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

extension ViewController {
    func setupUI() {
//        self.automaticallyAdjustsScrollViewInsets = false//需要毛玻璃效果時設(shè)置（是否根據(jù)所在界面的navigationbar與tabbar的高度浮禾，自動調(diào)整scrollview的inset.默認(rèn)是true）
        self.navigationController?.navigationBar.isTranslucent = false//不需要毛玻璃效果時設(shè)置
        self.view.addSubview(carouselView)
    }
    //使用AFN解析數(shù)據(jù)
    func getArrayFromWeb() {
        let manager = AFHTTPSessionManager()
        manager.get("http://www.douyutv.com/api/v1/slide/6", parameters: ["version" : "2.300"], progress: nil, success: { (task:URLSessionDataTask, json:Any) in
//            print("jsonData: \(json)")
            guard let dataDic = json as? [String : NSObject] else { return }
            guard let dataArr = dataDic["data"] as? [[String : NSObject]] else { return }
            for dic in dataArr {
                self.modelArr.append(CarouselModel(dic: dic))
            }
            //獲取完數(shù)據(jù)交胚，將數(shù)組賦給carouselView的carouselModelArr
            self.carouselView.carouselModelArr = self.modelArr
        }) { (task:URLSessionDataTask?, error:Error) in
            print("error : \(error)")
        }
    }
}

GitHub地址