新版swift 4.0 自定义pageControl 空心点、方点、椭圆、图片等

本项目github地址:GitHub - wei287030375/WEIPageControl: 最新SWIFT 4.0 版自定义PageControl,椭圆,空心圆,方形点,图片点
刚开始做swift项目,可用资源少而且每个swift版本变化太大,以前的都不能拿来直接用,现在我参考一个object-C的PageControl自己做了一个swift版的, 参考OC资源链接:https://github.com/hackxhj/EllipsePageControl,非常感谢原作者。 本项目在原OC的功能基础上进行的改进,增加了自定义点的宽度,方形点,点的layer,点的图片等功能,能随意组合使用, 基本满足大部分的需求,写的很简单,大家一看就懂,欢迎大家使用 由于水平有限,项目中有改进之处忘各位大神给与指点,以求不断完善

pageControl.gif

贴上部分代码:
以下是部分代码:

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吧,也是对以后继续创作的一种鼓励,谢谢

欢迎转载

你可能感兴趣的:(新版swift 4.0 自定义pageControl 空心点、方点、椭圆、图片等)