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

欢迎转载

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 207,248评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,681评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,443评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,475评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,458评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,185评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,451评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,112评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,609评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,083评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,163评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,803评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,357评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,357评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,590评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,636评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,925评论 2 344

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,033评论 4 62
  • 一. JQueryMobile jQuery Mobile is a HTML5-based user inter...
    我不叫奇奇阅读 542评论 0 2
  • 今年来老板提到最多的一个词就是聚势了。如何让团队能量最大化。无非也就是产品-市场-销售的能量能聚到一起再发挥作用。...
    Maylissa阅读 1,243评论 2 0
  • miss ,错过还是想念 【女】 那年,我十六岁初踏入这个校园,懵懂、羞涩。初遇你...
    梅夕夕阅读 1,068评论 2 2
  • 把你的声音拢进一双绿瓷杯与碗都是冷的而你总是恒温直到某个夜里苏州河起火你掌中的冷烟烧尽渐渐苦而沉
    倒影海王星阅读 282评论 0 1