自定义页面指示器
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 MyPageIndicator: 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
}
}
与轮播图联动
func redirectPosition() {
let currentIndex = Int((myCollectionView?.contentOffset.x)! / (myCollectionView?.frame.size.width)!)
print("当前index:\(currentIndex)")
//指示器显示index跟调整后的数组存在1个位置的偏移
var pageIndex = currentIndex - 1
//滚动到第一张时,无感切换到倒数第二张,指示器显示为源数据最后一张
if currentIndex == 0 {
myCollectionView?.scrollToItem(at: IndexPath.init(item: dataList.count - 2, section: 0), at: .left, animated: false)
pageIndex = dataList.count - 2 - 1
}
//滚动到最后一张时,无感切换到正数第二张,指示器显示为源数据第一张
if currentIndex == dataList.count - 1 {
myCollectionView?.scrollToItem(at: IndexPath.init(item: 1, section: 0), at: .left, animated: false)
pageIndex = 0
}
indicators?.setCurIdx(pageIndex)
}