美文网首页
轮播图的实现

轮播图的实现

作者: 龙之天下 | 来源:发表于2021-04-23 20:46 被阅读0次

1、轮播图的协议

protocol SMCarouselViewDelegate: NSObjectProtocol {
   func mCarouselView(_ carouselView: SMCarouselView, didSelectItemAt index: Int);
}

2、轮播视图:SMCarouselView

class SMCarouselView: UIView {
    
    private lazy var layout: UICollectionViewFlowLayout = {
        let layout = UICollectionViewFlowLayout()
        layout.minimumInteritemSpacing = 0
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 0
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0 , bottom: 0, right: 0)
        return layout
    }()
    
    private lazy var collectionView: UICollectionView = {
        let collection = UICollectionView(frame: .zero, collectionViewLayout: self.layout)
        collection.backgroundColor = UIColor.white
        collection.delegate = self
        collection.dataSource = self
        collection.isPagingEnabled = true
        collection.bounces = false
        collection.showsHorizontalScrollIndicator = false
        collection.register(SMCarouselCell.self, forCellWithReuseIdentifier: "SMCarouselCell")
        return collection
    }()
    
    private lazy var pageControl: SMPageControl = {
        let pageControl = SMPageControl()
        pageControl.contentHorizontalAlignment = .right
        pageControl.isUserInteractionEnabled = false
        let currentPageImg = UIImage.imageWithColor(UIColor(hex: "1F59EE")!,size: CGSize(width: 14, height: 4))
        let pageImg = UIImage.imageWithColor(UIColor.white.withAlphaComponent(0.5),size: CGSize(width: 4, height: 4))
        pageControl.currentPageIndicatorTintColor = UIColor(r: 33, g: 89, b: 237)
        pageControl.pageIndicatorTintColor = UIColor(r: 216, g: 216, b: 216)
        pageControl.currentPage = 0
        return pageControl
    }()
    
    private var timer: Timer? = nil
    private var isAutoScroll: Bool = false
    private var dataArray = [Any]()
    private var maxCount = 0
    
    weak var mCarouselViewDelegate: SMCarouselViewDelegate?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.addSubview(self.collectionView)
        self.addSubview(self.pageControl)
        setTimer()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    deinit {
        Log.info(text: "销毁了???")
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        self.collectionView.frame = CGRect(x: 0, y: 0, width: self.bounds.size.width, height: self.bounds.size.height)
        self.pageControl.frame = CGRect(x: 0, y:  self.bounds.size.height - 15, width:  self.bounds.size.width - 8, height: 10)
    }
    
    func setDataArray(dataArray: [Any]) {
        guard dataArray.count > 0 else {
            return
        }
        self.dataArray = dataArray
        maxCount = self.dataArray.count
        isAutoScroll = self.dataArray.count == 1 ? false : true
        if isAutoScroll {
            self.pageControl.numberOfPages = maxCount
        }else {
            removeTimer()
            self.pageControl.numberOfPages = 0
        }
        self.collectionView.reloadData()
    }
    
    private func setTimer() {
        if self.timer == nil {
            let timer = Timer(timeInterval: 2, repeats: true, block: { [weak self] (_) in
                self?.nextPage()
            })
            RunLoop.current.add(timer, forMode: RunLoop.Mode.common)
            self.timer = timer
        }
    }
    
    private func nextPage() {
        let currentIndexPath = collectionView.indexPathsForVisibleItems.last!
        scrollToItem(at: IndexPath(item: currentIndexPath.item, section: 0), at: .left, animated: false)
        var nextItem = currentIndexPath.item + 1
        var section = 0
        if (nextItem == maxCount) {
            nextItem = 0
            section = 1
        }
        let nextIndexPath = IndexPath(item: nextItem, section: section)
        scrollToItem(at: nextIndexPath, at: .left, animated: true)
    }
    
    private func scrollToItem(at indexPath: IndexPath, at scrollPosition: UICollectionView.ScrollPosition, animated: Bool) {
        self.collectionView.scrollToItem(at: indexPath, at: scrollPosition, animated: animated)
    }
    
    private func lastVisibleItemHandle() {
        let currentIndexPath = collectionView.indexPathsForVisibleItems.last!
        scrollToItem(at: IndexPath(item: currentIndexPath.item, section: 0), at: .left, animated: false)
    }
    
    private func removeTimer() {
        self.timer?.invalidate()
        self.timer = nil
    }
    
    private func resumeTimer() {
        setTimer()
    }
     
    private func getCurrentIndex(scrollView: UIScrollView) -> Int {
        let currentIndex = Int((scrollView.contentOffset.x/scrollView.frame.size.width + 0.5)) % maxCount
        return currentIndex
    }
    
}

extension SMCarouselView: UICollectionViewDelegateFlowLayout,UICollectionViewDataSource {
    
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return isAutoScroll ? 2 : 1
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return maxCount
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "SMCarouselCell", for: indexPath)
        
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: self.bounds.size.width, height: self.bounds.size.height)
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        self.mCarouselViewDelegate?.mCarouselView(self, didSelectItemAt: indexPath.item)
    }
    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        if isAutoScroll {
            removeTimer()
            if (maxCount - 1 == getCurrentIndex(scrollView: scrollView)) {
                lastVisibleItemHandle()
            }
        }
    }
    
    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if isAutoScroll {
            resumeTimer()
        }
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if isAutoScroll {
            let currentIndex = getCurrentIndex(scrollView: scrollView)
            self.pageControl.currentPage = currentIndex
        }
    }

}

3、轮播视图的cell

class SMCarouselCell: UICollectionViewCell {
    private let imageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        imageView.image = UIImage(named: "roleplacehoder")
        self.contentView.addSubview(imageView)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        imageView.frame = self.bounds
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
//    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
//        let view = super.hitTest(point, with: event)
//        if let _ = view as? UICollectionView {
//            return self
//        }
//        return super.hitTest(point, with: event)
//    }

    
}

相关文章

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • 轮播图实现

    轮播图在实际应用开发使用较多,本文说明一下具体的实现过程。 一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...

  • swift UICollectionView 实现无限轮播图

    无线轮播图的实现方式有很多,这里介绍如何通过 UICollectionView 实现无线轮播图.效果图如下: 具体...

  • swift轮播图的实现-UIScrollView

    目标 :UIScrollView+三UIImageView的轮播图实现 原理:利用UIScrollView实现轮播...

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • UIScrollView实现循环轮播Banner(自定义Cell

    实现循环轮播图的各种方案 轮播图的实现方案有很多种,大体上分为CollectionView和ScrollView实...

  • 传统&呼吸 轮播

    传统的轮播图 一个 carousel 轮播图,图片实现自动轮播,可以左右按钮播放,点小圆点也能实现换图。同时设置节...

  • 仿造天猫、京东、凡客等,轮播图的开发(jQuery)

    轮播图思路:1、轮播图布局2、定时器实现轮播效果3、指示器的鼠标移入(mouseenter)、移出(mousele...

  • Swift实现轮播图以及自定义UIPageControl

    无限轮播的实现思路 轮播图最核心的部分是如何实现无限轮播。我的实现方式是: 在UIScrollView上添加三个U...

  • 2019-03-05

    实现轮播图 HTML: css样式 body {...

网友评论

      本文标题:轮播图的实现

      本文链接:https://www.haomeiwen.com/subject/tgsfrltx.html