轮播图封装-美好生活从这里开始

2024-01-31 14:38:47

轮播图，顾名思义，就是循环播放的图片或文本，在应用程序中通常用于展示商品、新闻或其他重要信息。在Swift中，可以使用UICollectionView实现轮播图， UICollectionView是苹果公司提供的一个集合视图，它可以轻松实现各种各样的布局，轮播图就是其中一种。

本轮播图组件的优点如下：

组件简单易用，只需几行代码即可实现轮播图；
组件功能强大，支持自定义pageControl、自定义文字样式、以及轮播样式；
组件代码简洁，易于维护；

除了常规的滚动模式外，您还可以使用这个轮播图组件创建淡入淡出的动画效果，让你的轮播图更加美观。

好了，让我们开始学习如何使用这个Swift轮播图组件吧。

准备工作

首先，我们需要在项目中导入UICollectionView和第三方库SDWebImage。

import UIKit
import SDWebImage

接下来，我们需要创建自定义的UICollectionViewCell，该Cell用于展示单个图片或文本。

class CarouselCell: UICollectionViewCell {
    private let imageView: UIImageView = UIImageView()
    private let label: UILabel = UILabel()

    override init(frame: CGRect) {
        super.init(frame: frame)

        imageView.frame = CGRect(x: 0, y: 0, width: frame.width, height: frame.height)
        imageView.contentMode = .scaleAspectFit
        imageView.clipsToBounds = true
        contentView.addSubview(imageView)

        label.frame = CGRect(x: 0, y: frame.height - 20, width: frame.width, height: 20)
        label.textAlignment = .center
        label.textColor = .white
        contentView.addSubview(label)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func set(image: UIImage?) {
        imageView.image = image
    }

    func set(text: String) {
        label.text = text
    }
}

在自定义的UICollectionViewCell中，我们使用了一个UIImageView来展示图片，并使用了一个UILabel来展示文本。这两个控件的frame均为该Cell的frame，并且都置于Cell的contentView中。

实现轮播图

现在，我们可以实现轮播图组件了。

class CarouselView: UIView {
    private let collectionView: UICollectionView!
    private let pageControl: UIPageControl!

    private var images: [UIImage] = []
    private var texts: [String] = []
    private var timer: Timer?

    private var currentIndex: Int = 0 {
        didSet {
            pageControl.currentPage = currentIndex
        }
    }

    init(frame: CGRect) {
        super.init(frame: frame)

        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 0
        layout.minimumInteritemSpacing = 0
        collectionView = UICollectionView(frame: CGRect(x: 0, y: 0, width: frame.width, height: frame.height), collectionViewLayout: layout)
        collectionView.backgroundColor = .clear
        collectionView.isPagingEnabled = true
        collectionView.showsHorizontalScrollIndicator = false
        collectionView.register(CarouselCell.self, forCellWithReuseIdentifier: "CarouselCell")
        collectionView.dataSource = self
        collectionView.delegate = self
        addSubview(collectionView)

        pageControl = UIPageControl(frame: CGRect(x: 0, y: frame.height - 20, width: frame.width, height: 20))
        pageControl.pageIndicatorTintColor = .gray
        pageControl.currentPageIndicatorTintColor = .white
        pageControl.numberOfPages = 0
        addSubview(pageControl)

        startTimer()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func set(images: [UIImage]) {
        self.images = images
        pageControl.numberOfPages = images.count
        currentIndex = 0
        collectionView.reloadData()
        startTimer()
    }

    func set(texts: [String]) {
        self.texts = texts
        pageControl.numberOfPages = texts.count
        currentIndex = 0
        collectionView.reloadData()
        startTimer()
    }

    private func startTimer() {
        timer?.invalidate()
        timer = Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(nextImage), userInfo: nil, repeats: true)
    }

    @objc private func nextImage() {
        currentIndex = (currentIndex + 1) % pageControl.numberOfPages
        collectionView.scrollToItem(at: IndexPath(item: currentIndex, section: 0), at: .centeredHorizontally, animated: true)
    }
}

extension CarouselView: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return images.count > 0 ? images.count : texts.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CarouselCell", for: indexPath) as! CarouselCell
        if images.count > 0 {
            cell.set(image: images[indexPath.item])
        } else {
            cell.set(text: texts[indexPath.item])
        }
        return cell
    }
}

extension CarouselView: UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: frame.width, height: frame.height)
    }

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let index = Int(scrollView.contentOffset.x / frame.width)
        currentIndex = index
    }
}

在轮播图组件中，我们使用了一个UICollectionView来展示图片或文本，并使用了一个UIPageControl来指示当前展示的图片或文本。我们还使用了一个定时器来实现自动轮播。

使用轮播图组件

好了，现在我们可以使用轮播图组件了。

let carouselView = CarouselView(frame: CGRect(x: 0, y: 0, width: 375, height: 200))
carouselView.set(images: [UIImage(named: "image1.jpg")!, UIImage(named: "image2.jpg")!, UIImage(named: "image3.jpg")!])
view.addSubview(carouselView)

以上代码创建一个轮播图组件，并设置了轮播图展示的图片。

如果您想展示文本，可以使用以下代码：

let carouselView = CarouselView(frame: CGRect(x: 0, y: 0, width: 375, height: 200))
carouselView.set(texts: ["文本1", "文本2", "文本3"])
view.addSubview(carouselView)