一、前言
上篇，我们简单了解了 UICollectionView，本篇，我们将基于 UICollectionView 来封装我们的第二个组件：轮播图（BannerView）；BannerView 是我们最常见的一种 UI组件，通常，最吸睛的就是它，比如：广告运营、商品活动等，都会使用，是一个核心流量入口。
说起 BannerView 我这里再稍微废话一点 iOS 历史：
- 曾经，在 iOS 6.0 之前，如果要写一个 BannerView，我们只能用 UIScrollView 来完成（需要自己设计 View 复用）；
- iOS 6.0 之后，有了 UICollectionView （上篇大家如果注意到源码，就应该知道，它实际是继承于 UIScrollView），我们就可以简单的直接用它来开发，系统提供了复用 Cell 的方式，不会担心内存 OOM；
二、轮播图（BannerView）效果
老规矩，正式进入开发之前，我们先来直观看一下效果（程序中的图片来自一个朋友所在的跨境电商公司，直接给找的图，欧美口味）：
BannerView.gif
效果如上，一个简单的左右无限轮播图组件。
三、手动创建组件
我们在学习《圆形进度条》组件时，已经和大家聊过，如何使用手动方式创建库，这里我就不再累述，大家忘记了的直接去看之前的文章即可。
当我们创建好之后，并实现了如上功能，在本地集成测试时，当我们将该源码拖入工程中，如果我们有依赖第三方库，这时，Xcode 会自动帮我们去下载，如下图（我们这个 BannerView 依赖了第三方 SDWebImage 库）：
local-spm-banner-view.png
我们可以很清楚的看到，拖入组件后，Xcode 会自动分析 Package.swift，当发现我们有依赖第三方时，会去自行下载（比 CocoaPods 智能、方便多了），最主要的是，这几天，咱们大强国开会，Github 简直X了狗了，除非你 VPN。
四、双库支持
同样，我们开发的组件，既要能支持 CocoaPods 也要能支持 SPM，两库配置如下：
4.1、SPM 配置
// swift-tools-version:5.3
// The swift-tools-version declares the minimum version of Swift required to build this package.
import PackageDescription
let package = Package(
// 库名
name: "BannerView",
// 支持的平台列表
platforms: [.iOS(.v10)],
// 对外支持的功能
products: [
.library(name: "BannerView", targets: ["BannerView"]),
],
// 外部依赖
dependencies: [
// 依赖 SDWebImage
.package(name: "SDWebImage", url: "https://gitee.com/mirrors/SDWebImage", from: "5.1.0")
],
// 指定源码目录（如果不指定，默认目录名是：Sources/*.*）
targets: [
.target(name: "BannerView", dependencies: ["SDWebImage"], path: "Source")
],
// 支持的 swift 版本，从 5 开始
swiftLanguageVersions: [.v5]
)
4.2、CocoaPods 配置
Pod::Spec.new do |s|
s.name = 'BannerView'
s.version = '1.0.0'
s.summary = 'A View Component for CountDown'
s.description = <<-DESC
TODO: Add long description of the pod here.
DESC
s.homepage = 'https://github.com/qingye/ios-swift-demo/BannerView'
s.license = { :type => 'MIT', :file => 'LICENSE' }
s.author = { '青叶小小' => '24854015@qq.com' }
s.source = { :git => 'https://github.com/qingye/ios-swift-demo/BannerView.git', :tag => s.version.to_s }
s.ios.deployment_target = '10.0'
s.source_files = 'Source/**/*.swift'
s.dependency 'SDWebImage', '~> 5.0'
end
4.3、源码结构
src-structure.png
源码就两文件，大家一看就知道大致的逻辑与实现。
五、轮波图（BannerView）开发
5.1、Cell 布局
一般 Banner 都是只有图片，偶有文字（有文字的都是新闻类，或者 PC 网页版，APP版很少有），所以，Cell 的布局也就很简单，放一个 UIImageView 即可，代码如下：
class BannerViewCell: UICollectionViewCell {
var imageView: UIImageView?
override init(frame: CGRect) {
super.init(frame: frame)
imageView = UIImageView.init(frame: CGRect(x: 0, y: 0, width: frame.width, height: frame.height))
self.addSubview(imageView!)
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
}
构造器重载及必要构造器重载，我也在之前的构造器分析中给出过《关键字 designated、convenience、required》，忘记了的大家可以去温习一下。
5.2、View 初始化及 Layout 设置
先定义 BannerPageView 及继承关系，暂时不给出具体代码
public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
......
}
重写构造器，我们有两种方式，如上面 Cell 那种，直接重载，但还要多写个 required init ，或者，我们可以用扩展（extension），然后写个『便利构造器』，如下：
extension BannerPageView {
// 便利构造器，调用方只需给出 frame，layout 由该 BannerView 内部实现
public convenience init(frame: CGRect, loop: Bool) {
let layout = UICollectionViewFlowLayout()
......
// 必需调用 self.init，详见
//《iOS Swift5 构造函数分析（一）：关键字 designated、convenience、required》
// https://www.jianshu.com/p/508e27833812
self.init(frame: frame, collectionViewLayout: layout)
......
}
}
设置 layout
extension BannerPageView {
// 便利构造器，调用方只需给出 frame，layout 由该 BannerView 内部实现
public convenience init(frame: CGRect, loop: Bool) {
let layout = UICollectionViewFlowLayout()
// 这里是实现轮播，所以统一设置每一个 cell 的宽高
// 如果想设置每一个 cell 的不同宽高，需要实现 collectionView(_:layout:sizeForItemAt:)
layout.itemSize = CGSize(width: frame.width, height: frame.height)
// 水平方向滚动（默认是垂直方向）
layout.scrollDirection = .horizontal
// 行最小间距（同一行 item 之间的水平间距）
layout.minimumLineSpacing = 0
// 列最小间距（相邻两行同一列 item 之间的垂直间距）
layout.minimumInteritemSpacing = 0
// 必需调用 self.init，详见
//《iOS Swift5 构造函数分析（一）：关键字 designated、convenience、required》
// https://juejin.cn/post/6932885089546141709
self.init(frame: frame, collectionViewLayout: layout)
......
}
}
设置 UICollectionView 的其它属性：委托、数据源、注册 cell 类等
// 仅该文件内变量可见
// 重复使用 cell 的 identifier
fileprivate let kBannerViewCell = "BannerViewCell"
extension BannerPageView {
// 便利构造器，调用方只需给出 frame，layout 由该 BannerView 内部实现
public convenience init(frame: CGRect, loop: Bool) {
......
// 自己实现委托
delegate = self
// 自己实现数据源
dataSource = self
// 注册 cell，可以重复使用
register(BannerViewCell.self, forCellWithReuseIdentifier: kBannerViewCell)
// 默认背景：白色
backgroundColor = .white
// 每一个 item 为一页
isPagingEnabled = true
// 不显示水平滚动条
showsHorizontalScrollIndicator = false
// 不允许回弹
bounces = false
}
}
5.3、暴露对外数据传递方法
public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
fileprivate var urls: [String]?
public func setUrls(_ urls: [String]) {
// 原始数据：[a, b, c]
self.urls = urls
reloadData()
layoutIfNeeded()
}
}
只需要 url 数组即可。
5.4、实现 UICollectionViewDataSource 必要方法
public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
// MARK: UICollectionViewDataSource
public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
urls?.count ?? 0
}
public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kBannerViewCell, for: indexPath) as! BannerViewCell
let url = urls![indexPath.row]
// SDWebImage 负责下载并加载图片
cell.imageView?.sd_setImage(with: URL(string: url), placeholderImage: nil)
return cell
}
}
5.5、封装 BannerView
import UIKit
public class BannerView: UIView {
fileprivate var banner: BannerPageView?
public override init(frame: CGRect) {
super.init(frame: frame)
banner = BannerPageView(frame: frame, loop: true)
banner?.bannerDelegate = self
addSubview(banner!)
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
public func setData(_ urls: [String]) {
banner?.setUrls(urls)
}
}
5.6、HomeViewController 引用 BannerView 这里有问题！！！！！！！修改
import UIKit
import BannerView
class HomeViewController: BaseViewController {
var bannerView: BannerView?
override func viewDidLoad() {
super.viewDidLoad()
......
addBannerView()
......
}
......
func addBannerView() {
bannerView = BannerView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 200), loop: true)
bannerView?.setUrls([
"https://cdn-1.blushmark.com/blushmark/upimg/c1/ba/8c0793797057964bfa65a210f76a43aafbd1c1ba.gif",
"https://cdn-1.blushmark.com/blushmark/upimg/d8/bd/3269b7e78582be3d7d17c194cc32fe8b4d48d8bd.jpg",
"https://cdn-1.blushmark.com/blushmark/upimg/bd/f8/8c836e32bced64eef2a8d916d50081a38819bdf8.jpg"
])
view.addSubview(bannerView!)
}
}
OK！大家再运行，应该没有任何问题。
六、BannerView 整体源码 & Github
整体源码地址：《传递门》
import UIKit
import SDWebImage
// 仅该文件内变量可见
// 重复使用 cell 的 identifier
fileprivate let kBannerViewCell = "BannerViewCell"
public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
fileprivate var urls: [String]?
public func setUrls(_ urls: [String]) {
// 原始数据：[a, b, c]
self.urls = urls
reloadData()
layoutIfNeeded()
}
// MARK: UICollectionViewDataSource
public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
urls?.count ?? 0
}
public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kBannerViewCell, for: indexPath) as! BannerViewCell
let url = urls![indexPath.row]
// SDWebImage 负责下载并加载图片
cell.imageView?.sd_setImage(with: URL(string: url), placeholderImage: nil)
return cell
}
}
extension BannerPageView {
// 便利构造器，调用方只需给出 frame，layout 由该 BannerView 内部实现
public convenience init(frame: CGRect, loop: Bool) {
let layout = UICollectionViewFlowLayout()
// 这里是实现轮播，所以统一设置每一个 cell 的宽高
// 如果想设置每一个 cell 的不同宽高，需要实现 collectionView(_:layout:sizeForItemAt:)
layout.itemSize = CGSize(width: frame.width, height: frame.height)
// 水平方向滚动
layout.scrollDirection = .horizontal
// 行最小间距（同一行 item 之间的水平间距）
layout.minimumLineSpacing = 0
// 列最小间距（相邻两行同一列 item 之间的垂直间距）
layout.minimumInteritemSpacing = 0
// 必需调用 self.init，详见
//《iOS Swift5 构造函数分析（一）：关键字 designated、convenience、required》
// https://www.jianshu.com/p/508e27833812
self.init(frame: frame, collectionViewLayout: layout)
// 自己实现委托
delegate = self
// 自己实现数据源
dataSource = self
// 注册 cell，可以重复使用
register(BannerViewCell.self, forCellWithReuseIdentifier: kBannerViewCell)
// 默认背景：白色
backgroundColor = .white
// 每一个 item 为一页
isPagingEnabled = true
// 不显示水平滚动条
showsHorizontalScrollIndicator = false
// 不允许回弹
bounces = false
}
}
