自定义自己的UIPageControl

有时候我们需要定制一些自己的控件才能实现UI的设计和效果，虽然是很不起眼的小控件，但写个记录和想法也许能给别人不一样的的思考。
例如我们需要实现如下形式的的PageControl

tmp6b6adaa6.png

让我们先看看系统定义的API:

    open var numberOfPages: Int // default is 0

    open var currentPage: Int // default is 0. value pinned to 0..numberOfPages-1

    
    open var hidesForSinglePage: Bool // hide the the indicator if there is only one page. default is NO

    
    open var defersCurrentPageDisplay: Bool // if set, clicking to a new page won't update the currently displayed page until -updateCurrentPageDisplay is called. default is NO

    open func updateCurrentPageDisplay() // update page display to match the currentPage. ignored if defersCurrentPageDisplay is NO. setting the page value directly will update immediately

    
    open func size(forNumberOfPages pageCount: Int) -> CGSize // returns minimum size required to display dots for given page count. can be used to size control if page count could change

    
    @available(iOS 6.0, *)
    open var pageIndicatorTintColor: UIColor?

    @available(iOS 6.0, *)
    open var currentPageIndicatorTintColor: UIColor?

根据我们的需要（不需要响应）分析一下我们需要定制那些内容：

• 总的页数
• 当前页所在页数
• 是否隐藏只有一页的control
• 选中的颜色和未被选中的颜色
  这样的话我们可以考如下几个方面：
• 对外提供两个接口即可（numberOfPages，currentPage），可以通过set的方式进行调用
• 当总page的数量>= 1时，我们建造PageControl的视图（如果存在先删除）
• 当前page被赋值时，建立或者更改视图约束（建立在总数量已经赋值的基础上）
• 初始化事默认设置选中和未被选中的颜色，也提供设置接口
• 需要一个装载显示pageView的容器数组
  ok，这样实现就比较容易了，而且可以很方便自定义视图样式,还是上代码吧:

    var numberOfPages: NSInteger?{
        didSet {
            if let totalPages = numberOfPages,numberOfPages! > 0 {
                //print("totalPages=\(totalPages)")
                if views.count > 0 {
                    views = views.map({ (view) -> UIView in
                        view.removeFromSuperview()
                        return view
                    })
                }
                views.removeAll();
                for index in 0..<totalPages {
                    let view = getView()
                    view.tag = 200 + index
                    views.append(view)
                }
                views =  views.map { (view) -> UIView in
                    self.addSubview(view)
                    return view;
                }
                
            }
            
        }
    }

    var currentPage: NSInteger? {
        didSet {
            if let _ = currentPage {
                self.updateViewsFrame()
                UIView.animate(withDuration: 0.5, animations: {
                     self.updateViewsFrame()
                })
            }
        }
    }

    var hidesForSinglePage: Bool?{
        didSet {
            if let hidesPage = hidesForSinglePage,let totalNumber = numberOfPages {
                if hidesPage && totalNumber <= 1{
                    self.isHidden = true
                }else {
                    self.isHidden = false
                }
            }
        }
    }

    fileprivate func updateViewsFrame() {
        var width: CGFloat?
        if views.count > 1 {
             width = littleWidth * CGFloat((views.count * 2))
        }else {
             width = littleWidth
        }
        //print("width =\(width)")
        for index in 0..<views.count {
            let view = views[index]
            self.addSubview(view)
            let viewTag = view.tag - 200
            if viewTag > 0 {
                let referenceView = self.viewWithTag(view.tag - 1)
                view.snp.remakeConstraints({ (make) in
                    make.left.equalTo((referenceView?.snp.right)!).offset(littleWidth)
                    make.centerY.equalTo((referenceView?.snp.centerY)!)
                    make.width.height.equalTo(littleWidth)
                })
            }else {
                view.snp.remakeConstraints({ (make) in
                    make.left.equalTo(self.snp.centerX).offset(-(width!/2))
                    make.centerY.equalTo(self.snp.centerY)
                    make.width.height.equalTo(littleWidth)
                })
            }
            if index == currentPage {
                view.backgroundColor = pageCurrentColor
                if viewTag > 0 {
                    let referenceView = self.viewWithTag(view.tag - 1)
                    view.snp.remakeConstraints({ (make) in
                        make.left.equalTo((referenceView?.snp.right)!).offset(littleWidth)
                        make.centerY.equalTo((referenceView?.snp.centerY)!)
                        make.height.equalTo(littleWidth)
                        make.width.equalTo(bigWidth)
                    })
                }else {
                    view.snp.remakeConstraints({ (make) in
                        make.left.equalTo(self.snp.centerX).offset(-(width!/2))
                        make.centerY.equalTo(self.snp.centerY)
                        make.height.equalTo(littleWidth)
                        make.width.equalTo(bigWidth)
                    })
                }
            }else {
                view.backgroundColor = pageColor
            }   
        }
    }

主要的代码就是上面的了，外部调用的时候，只需实现总页数的赋值，和实时更新currentPage就可以实现相应的UI效果

            self.pageControl.numberOfPages = count
            self.pageControl.currentPage = currentItemIndex

当然以上只是我个人实现的方法，如果大家有更好的实现方案，我也希望能够学习。