本项目github地址:GitHub - wei287030375/WEIPageControl: 最新SWIFT 4.0 版自定义PageControl,椭圆,空心圆,方形点,图片点
刚开始做swift项目,可用资源少而且每个swift版本变化太大,以前的都不能拿来直接用,现在我参考一个object-C的PageControl自己做了一个swift版的, 参考OC资源链接:https://github.com/hackxhj/EllipsePageControl,非常感谢原作者。 本项目在原OC的功能基础上进行的改进,增加了自定义点的宽度,方形点,点的layer,点的图片等功能,能随意组合使用, 基本满足大部分的需求,写的很简单,大家一看就懂,欢迎大家使用 由于水平有限,项目中有改进之处忘各位大神给与指点,以求不断完善
贴上部分代码:
以下是部分代码:
class WEIPageControl: UIControl {
var localNumberOfPages = NSInteger()//分页数量
var localCurrentPage = NSInteger()//当前点所在下标
var localPointSize = CGSize()//点的大小
var localPointSpace = CGFloat()//点之间的间距
var localOtherColor = UIColor()//未选中点的颜色
var localCurrentColor = UIColor()//当前点的颜色
var localOtherImage: UIImage?//未选中点的图片
var localCurrentImage: UIImage?//当前点的图片
var localIsSquare = Bool()//是否是方形点
var localCurrentWidthMultiple = CGFloat()//当前选中点宽度与未选中点的宽度的倍数
var localOtherBorderColor: UIColor?//未选中点的layerColor
var localOtherBorderWidth: CGFloat?//未选中点的layer宽度
var localCurrentBorderColor: UIColor?//未选中点的layerColor
var localCurrentBorderWidth: CGFloat?//未选中点的layer宽度
var clickIndex: ((_ result: NSInteger?) -> ())?
下面是创建PageControl,用UIView做的
func creatPointView() {
for view in self.subviews {
view.removeFromSuperview()
}
if localNumberOfPages <= 0 {//必须传入总页数
return
}
var startX: CGFloat = 0
var startY:CGFloat = 0
let mainWidth = CGFloat(localNumberOfPages) * (localPointSize.width + localPointSpace)
if self.frame.size.width > mainWidth {
startX = (self.frame.size.width - mainWidth) / 2
}
if self.frame.size.height > localPointSize.height {
startY = (self.frame.size.height - localPointSize.height) / 2
}
//创建点
for index in 0 ..< numberOfPages {
if index == localCurrentPage {//是当前点
let currentPointView = UIView.init()
let currentPointViewWidth = localPointSize.width * localCurrentWidthMultiple
currentPointView.frame = CGRect.init(x: startX, y: startY, width: currentPointViewWidth, height: localPointSize.height)
currentPointView.backgroundColor = localCurrentColor
currentPointView.tag = index + 1000
currentPointView.layer.cornerRadius = localIsSquare ? 0 : localPointSize.height / 2
currentPointView.layer.masksToBounds = true
currentPointView.layer.borderColor = localCurrentBorderColor != nil ? localCurrentBorderColor?.cgColor : localCurrentColor.cgColor
currentPointView.layer.borderWidth = localCurrentBorderWidth != nil ? localCurrentBorderWidth! : 0
currentPointView.isUserInteractionEnabled = true
self.addSubview(currentPointView)
let tapGesture = UITapGestureRecognizer.init(target: self, action: #selector(clickAction(tapGesture:)))//添加小圆点点击手势
currentPointView.addGestureRecognizer(tapGesture)
startX = currentPointView.frame.maxX + localPointSpace
if localCurrentImage != nil {
currentPointView.backgroundColor = UIColor.clear
let localCurrentImageView = UIImageView.init()
localCurrentImageView.tag = index + 2000
localCurrentImageView.frame = currentPointView.bounds
localCurrentImageView.image = localCurrentImage
currentPointView.addSubview(localCurrentImageView)
}
} else {//其他点
let otherPointView = UIView.init()
otherPointView.frame = CGRect.init(x: startX, y: startY, width: localPointSize.width, height: localPointSize.height)
otherPointView.backgroundColor = localOtherColor
otherPointView.tag = index + 1000
otherPointView.layer.cornerRadius = localIsSquare ? 0 : localPointSize.height / 2;
otherPointView.layer.borderColor = localOtherBorderColor != nil ? localOtherBorderColor?.cgColor : localOtherColor.cgColor
otherPointView.layer.borderWidth = localOtherBorderWidth != nil ? localOtherBorderWidth! : 0
otherPointView.layer.masksToBounds = true
otherPointView.isUserInteractionEnabled = true
self.addSubview(otherPointView)
let tapGesture = UITapGestureRecognizer.init(target: self, action: #selector(clickAction(tapGesture:)))
otherPointView.addGestureRecognizer(tapGesture)
startX = otherPointView.frame.maxX + localPointSpace
if localOtherImage != nil {
otherPointView.backgroundColor = UIColor.clear
let localOtherImageView = UIImageView.init()
localOtherImageView.tag = index + 2000
localOtherImageView.frame = otherPointView.bounds
localOtherImageView.image = localOtherImage
otherPointView.addSubview(localOtherImageView)
}
}
}
}
滑动或者点击圆点后切换当前点和其他点
func exchangeCurrentView(oldSelectedIndex: NSInteger, newSelectedIndex: NSInteger) {//切换当前点和其他点
let oldPointView = self.viewWithTag(1000 + oldSelectedIndex)
let newPointView = self.viewWithTag(1000 + newSelectedIndex)
oldPointView?.layer.borderColor = localOtherBorderColor != nil ? localOtherBorderColor?.cgColor : localOtherColor.cgColor
oldPointView?.layer.borderWidth = localOtherBorderWidth != nil ? localOtherBorderWidth! : 0
newPointView?.layer.borderColor = localCurrentBorderColor != nil ? localCurrentBorderColor?.cgColor : localCurrentColor.cgColor
newPointView?.layer.borderWidth = localCurrentBorderWidth != nil ? localCurrentBorderWidth! : 0
oldPointView?.backgroundColor = localOtherColor
newPointView?.backgroundColor = localCurrentColor
if localCurrentWidthMultiple != 1 {//如果当前选中点的宽度与未选中的点宽度不一样,则要改变选中前后两点的frame
var oldPointFrame = oldPointView?.frame
if newSelectedIndex < oldSelectedIndex {
oldPointFrame?.origin.x += localPointSize.width * (localCurrentWidthMultiple - 1)
}
oldPointFrame?.size.width = localPointSize.width
oldPointView?.frame = oldPointFrame!
var newPointFrame = newPointView?.frame
if newSelectedIndex > oldSelectedIndex {
newPointFrame?.origin.x -= localPointSize.width * (localCurrentWidthMultiple - 1)
}
newPointFrame?.size.width = localPointSize.width * localCurrentWidthMultiple
newPointView?.frame = newPointFrame!
}
if localCurrentImage != nil {//切换选中图片和未选中图片
let view = oldPointView?.viewWithTag(oldSelectedIndex + 2000)
if view != nil {
let oldlocalCurrentImageView = view as! UIImageView
oldlocalCurrentImageView.frame = CGRect.init(x: 0, y: 0, width: localPointSize.width, height: localPointSize.height)
oldlocalCurrentImageView.image = localOtherImage
}
}
if localOtherImage != nil {//切换选中图片和未选中图片
let view = newPointView?.viewWithTag(newSelectedIndex + 2000)
if view != nil {
let oldlocalOtherImageView = view as! UIImageView
let width = localPointSize.width * localCurrentWidthMultiple
oldlocalOtherImageView.frame = CGRect.init(x: 0, y: 0, width: width, height: localPointSize.height)
oldlocalOtherImageView.image = localCurrentImage
}
}
if newSelectedIndex - oldSelectedIndex > 1 {//点击圆点,中间有跳过的点
for index in oldSelectedIndex + 1 ..< newSelectedIndex {
let view = self.viewWithTag(1000 + index)
var frame = view?.frame
frame?.origin.x -= localPointSize.width * (localCurrentWidthMultiple - 1)
frame?.size.width = localPointSize.width
view?.frame = frame!
}
}
if newSelectedIndex - oldSelectedIndex < -1 {//点击圆点,中间有跳过的点
for index in newSelectedIndex + 1 ..< oldSelectedIndex {
let view = self.viewWithTag(1000 + index)
var frame = view?.frame
frame?.origin.x += localPointSize.width * (localCurrentWidthMultiple - 1)
frame?.size.width = localPointSize.width
view?.frame = frame!
}
}
}
在ViewController中使用
//方形点举例
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor.black
let width: CGFloat = UIScreen.main.bounds.size.width * 0.7
let height: CGFloat = 100
let left: CGFloat = 50
let pageCount = 5
//宽一点的方点
scrollView3.frame = CGRect.init(x: left, y: pageControl2.frame.maxY + 30, width: width, height: height)
scrollView3.delegate = self
scrollView3.tag = 3
scrollView3.isPagingEnabled = true
scrollView3.contentSize = CGSize.init(width: width * CGFloat(pageCount), height: 0)
for index in 0 ..< pageCount {
let imageView = UIImageView.init()
imageView.frame = CGRect.init(x: CGFloat(index) * width, y: 0, width: width, height: height)
imageView.backgroundColor = UIColor.init(red: CGFloat(arc4random()%255) / CGFloat(255), green: CGFloat(arc4random()%255) / CGFloat(255), blue: CGFloat(arc4random()%255) / CGFloat(255), alpha: 1)
scrollView3.addSubview(imageView)
}
pageControl3 = WEIPageControl()//初始化PageControl
pageControl3.frame = CGRect.init(x: left, y: scrollView3.frame.maxY, width: width, height: 20)
pageControl3.numberOfPages = pageCount//总页数
pageControl3.isSquare = true//设置为方型点
pageControl3.currentWidthMultiple = 2.5//当前点的宽度为其他点的2.5倍
pageControl3.currentColor = UIColor.red
pageControl3.otherColor = UIColor.blue
pageControl3.pointSize = CGSize.init(width: 14, height: 6)//方点的size
pageControl3.clickPoint { (index) in//方点的点击事件
self.scrollView3.setContentOffset(CGPoint.init(x: width * CGFloat(index!), y: 0), animated: true)
}
self.view.addSubview(scrollView3)
self.view.addSubview(pageControl3)
}
代码很简单,一看就懂,欢迎各位大神给与指导意见以不断完善。
本项目github地址:GitHub - wei287030375/WEIPageControl: 最新SWIFT 4.0 版自定义PageControl,椭圆,空心圆,方形点,图片点
如果觉得对你有帮助请给个star吧,也是对以后继续创作的一种鼓励,谢谢
欢迎转载