iOS Swift5从0到1系列(十四):走入 UICollec
一、前言
上篇,我们学习了如何利用 UICollectionView 来制作一个普通的轮播图(BannerView);在一般的产品中,普通的 BannerView 除了能显示图片,还需要具备以下几个小功能:
- 支持左右无限循环轮播;
- 支持 PageIndicator ,即我们说的指示器(是一个非常小的 View组件,通常配合 BannerView 来使用);
- 支持定时切换(含动画);
- 支持用户手动触摸时,停时定时,并在手指松开后,重新开启定时;
废话不多说,直接开干。
二、左右无限循环轮播
细心的小伙伴在读上篇时,可能会发现,在初始化时(便利构造器)中的第二个参数是 loop: Bool ,从字面意思上就可以看出,是否需要循环;我在写上篇分享时,只是留了一个『口子』,并没有实现具体的逻辑,不过,上篇文章给出的源码已有,如果有小伙伴已经看过。
2.1、添加成员变量 loop
public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
// 是否支持左右无限循环,默认为 true
fileprivate var loop: Bool = true
}
2.2、便利构造器赋值
extension BannerPageView {
// 便利构造器,调用方只需给出 frame,layout 由该 BannerView 内部实现
public convenience init(frame: CGRect, loop: Bool = true) {
......
// 必需调用 self.init,详见
//《iOS Swift5 构造函数分析(一):关键字 designated、convenience、required》
// https://juejin.cn/post/6932885089546141709
self.init(frame: frame, collectionViewLayout: layout)
// 是否无限循环,默认 = true
self.loop = loop
......
}
}
2.3、入参时调整数据源
无限循环示意图.png上图稍微讲解一下,如何使数据能够无限循环:
- 传入源始数据 N ;
- 修改源始数据,在第 0 个位置,插入 源始数据[N-1] 的数据,在最后一个位置,插入 源始数据[0] 的数据;
- 将调整后的数据作为 UICollectionView 的 dataSource;
- 当数据滚动到第 0 个位置时,将其下标调整至倒数第 2 个位置(无动画切换);
- 当数据滚动到最后一个位置时,将其下标调整至正数第 2 个位置(无动画切换);
这样,我们就能来回在 [ 1 ~ N-2 ] 之间来回浏览,以达到无限循环的目的;代码如下:
public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
......
public func setUrls(_ urls: [String]) {
// 原始数据:[a, b, c]
self.urls = urls
reData()
}
public func setLoop(_ loop: Bool) {
self.loop = loop
}
func reData() {
// 如果支持无限循环,数据变为:[c, a, b, c, a]
if loop {
urls!.insert(urls!.last!, at: 0)
urls!.append(urls![1])
}
reloadData()
layoutIfNeeded()
if loop {
// 如果无限循环,因为数据前、后都额外添加了两项,所以,原来下标为 0 的现在变成了 1
scrollToItem(at: IndexPath(row: loop ? 1 : 0, section: 0),
at: UICollectionView.ScrollPosition(rawValue: 0),
// 重新定位下标时,不要动画,否则用户会觉得很奇怪
animated: false)
}
}
......
}
上面的代码,是在数据初始传入时,进行的调整;或者,之后数据发生更新时调整;同时,上面我也说了,数据每次滚动后,我们需要判断是否达到位置 0 或者位置 N-1,如果达到,就要调整;在 UICollectionView(一)中,我说过,UICollectionView 的操作是由委托(UICollectionViewDelegate)来负责,因此,我们还需要实现委托,代码如下:
public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
......
// MARK: UICollectionViewDelegate
public func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
// 计算 page 下标 = 水平滚动偏移值 / 宽度
var idx = Int(contentOffset.x / frame.size.width)
// 如果开启了无限循环,则需要在每次滚动结束后,判断是否需要重新定位
if loop {
// 以 [c, a, b, c, a] 为例
if idx == 0 {
// 如果 idx == 0,表明已经滑到最左侧的 c,我们需要将其滚动到【倒数第2位】
scrollToItem(at: IndexPath(row: urls!.count - 2, section: 0),
at: UICollectionView.ScrollPosition(rawValue: 0),
animated: false)
} else if idx == urls!.count - 1 {
// 如果 idx == 最后,表明已经滑到最右侧的 a,我们需要将其滚动到【第1位】
scrollToItem(at: IndexPath(row: 1, section: 0),
at: UICollectionView.ScrollPosition(rawValue: 0),
animated: false)
}
}
}
......
}
三、PageIndicator(指示器)
PageIndicator 很好理解,就是告诉用户当前轮播图滚动到第几个,如下图:
page-indicator.png红色框框中的小圆点:
- 个数代表轮播图中图片的数量;
- 纯白色实心小圆点代表当前下标;
- 半透明小圆点则代表非选中状态;
PageIndicator 同样也是一个自定义的小组件(我们之前在广告页学过如何绘制圆及着色),这里就直接给出代码:
import UIKit
fileprivate let kGap: CGFloat = 5.0
// 半透明白色背景
fileprivate let kBgColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.5).cgColor
// 纯实心白色背景
fileprivate let kFgColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1).cgColor
class BannerPageIndicator: UIView {
var indicators: [CAShapeLayer] = []
var curIdx: Int = 0
// 添加小圆点
public func addCircleLayer(_ nums: Int) {
if nums > 0 {
for _ in 0..<nums {
let circle = CAShapeLayer()
circle.fillColor = kBgColor
indicators.append(circle)
layer.addSublayer(circle)
}
}
}
// 计算并居中排列
public override func layoutSubviews() {
super.layoutSubviews()
let count = indicators.count
let d = bounds.height
let totalWidth = d * CGFloat(count) + kGap * CGFloat(count)
let startX = (bounds.width - totalWidth) / 2
for i in 0..<count {
let x = (d + kGap) * CGFloat(i) + startX
let circle = indicators[i]
circle.path = UIBezierPath(roundedRect: CGRect(x: x, y: 0, width: d, height: d), cornerRadius: d / 2).cgPath
}
setCurIdx(0)
}
// 设置当前展示的图的下标
public func setCurIdx(_ idx: Int) {
// 先修改当前小圆点背景(半透明)
indicators[curIdx].fillColor = kBgColor
// 修改下标
curIdx = idx
// 再修改实际对应图片的下标的小圆点背景(纯白色)
indicators[curIdx].fillColor = kFgColor
}
}
四、BannerPageView 与 BannerPageIndicator 关联
我们已经有了两个小组件,它们的关系如下图:
BannerViewArch.png当我们的 BannerPageView 切换时,需要回调通知 BannerView,BannerView 再去设置指示器的小圆点;在 iOS 中,无论是 OC 还是 Swift ,都是通过 Delegate(Protocol)来实现,这里,我们自定义了一个 BannerDelegate :
import Foundation
public protocol BannerDelegate: NSObjectProtocol {
func didPageChange(idx: Int)
}
4.1、BannerView 实现委托
import UIKit
public class BannerView: UIView, BannerDelegate {
fileprivate var banner: BannerPageView?
fileprivate var indicators: BannerPageIndicator?
public override init(frame: CGRect) {
super.init(frame: frame)
banner = BannerPageView(frame: frame, loop: true)
// 设置委托为自己
banner?.bannerDelegate = self
addSubview(banner!)
indicators = BannerPageIndicator(frame: CGRect.zero)
indicators?.translatesAutoresizingMaskIntoConstraints = false
addSubview(indicators!)
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
public func setData(_ urls: [String], _ loop: Bool) {
banner?.setLoop(loop)
banner?.setUrls(urls)
adjustIndicator(urls.count)
}
// MARK: BannerDelegate
public func didPageChange(idx: Int) {
indicators?.setCurIdx(idx)
}
func adjustIndicator(_ count: Int) {
indicators?.addCircleLayer(count)
NSLayoutConstraint.activate([
indicators!.widthAnchor.constraint(equalToConstant: frame.width),
indicators!.heightAnchor.constraint(equalToConstant: 8),
indicators!.centerXAnchor.constraint(equalTo: centerXAnchor),
indicators!.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10)
])
}
}
4.2、修改 BannerPageView(委托回调)
public class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
var bannerDelegate: BannerDelegate?
......
// 如果是循环滚动,要在滚动结束后计算是否需要重新定位
func redirectPosition() {
// 计算 page 下标 = 水平滚动偏移值 / 宽度
var idx = Int(contentOffset.x / frame.size.width)
// 如果开启了无限循环,则需要在每次滚动结束后,判断是否需要重新定位
if loop {
// 以 [c, a, b, c, a] 为例
if idx == 0 {
// 如果 idx == 0,表明已经滑到最左侧的 c,我们需要将其滚动到【倒数第2位】
scrollToItem(at: IndexPath(row: urls!.count - 2, section: 0), at: UICollectionView.ScrollPosition(rawValue: 0), animated: false)
idx = urls!.count - 3
} else if idx == urls!.count - 1 {
// 如果 idx == 最后,表明已经滑到最右侧的 a,我们需要将其滚动到【第1位】
scrollToItem(at: IndexPath(row: 1, section: 0), at: UICollectionView.ScrollPosition(rawValue: 0), animated: false)
idx = 0
} else {
idx -= 1
}
}
bannerDelegate?.didPageChange(idx: idx)
}
// MARK: UICollectionViewDelegate
// 用户手指触摸产生的滚动才会调用该方法
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
redirectPosition()
}
......
}
五、定时切换(含动画)
定时切换,顾名思义,就需要用到定时器,在广告页时,我们用了 GCD 定时器,今天,我们将使用另一种定时器:Timer(Swift)/ NSTimer(OC);给 Banner 添加定时器很简单(这里就要赞一下 Swift 的 extension,方便代码拆分):
class BannerPageView: UICollectionView, UICollectionViewDelegate, UICollectionViewDataSource {
fileprivate var timer: Timer?
......
public func setUrls(_ urls: [String]) {
......
startTimer()
}
// MARK: UICollectionViewDelegate
// 当执行 setContentOffset 或者 scrollRectVisible 完成时,且 animated = true 时,该方法会被执行
// 注:如果 animated = false 该方法是不会被调用的
func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
redirectPosition()
}
......
}
// 扩展:处理定时器
extension BannerPageView {
func startTimer() {
endTimer()
timer = Timer.scheduledTimer(withTimeInterval: 5, repeats: true, block: { [weak self] _ in
self?.next()
})
}
// 结束定时器
func endTimer() {
timer?.invalidate()
timer = nil
}
func next() {
let idx = Int(contentOffset.x / frame.size.width)
scrollToItem(at: IndexPath(row: idx + 1, section: 0),
at: UICollectionView.ScrollPosition(rawValue: 0),
animated: true)
}
}
定时器我们已经有了,然而,这里有点用户体验问题:当用户手指触摸时,由于定时器不断触发,仍旧会触发翻页,因此,我们需要处理:
- 用户触摸时,停止定时器;
- 用户松开时,重启定时器;
实现也很简单,我们只需要处理 UIScrollViewDelegate 中的两个方法即可,如下:
// 扩展:处理定时器
extension BannerPageView {
// 用户手指触摸停止定时器
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
endTimer()
}
// 松开后重启定时器
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
startTimer()
}
}
六、处理点击事件
Banner 点击处理这个就很简单了,我们只需要在 BannerView 中添加 Tap 就行:
public class BannerView: UIView, BannerDelegate {
......
public override init(frame: CGRect) {
super.init(frame: frame)
isUserInteractionEnabled = true
addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.handleTap)))
......
}
@objc func handleTap() {
print("handleTap ==== \(String(describing: indicators?.curIdx))")
}
}
七、总结
Banner 就这么多,总结一下:
- 本篇分享,我们是继承于 UICollectionView,实际开发中,也可以直接使用 UICollectionView 来作为 BannerView;
- 因为我们用的是双window,因此,广告页在倒计时(5s)结束的时候,我们的 BannerView 正好已经完成了一次翻页;如果是单window的话,是不会有这问题;(实际开发中,还涉及到网络请求,所以单/双 window 各有各的好处);
我们通过 Banner 来学习 UICollectionView,这只是最基本的用法,后面的『楼层』我们会使用更为复杂的场景。
目前为止所有源码:《传递门》
有任何问题,欢迎交流,谢谢!