iOS-自定义 UIPageControl

现实需求中，当系统自导的 pageControl 无法满足我们的时，需要自己定义一个。通过查看系统自到的UIPageControl 文档，模仿了一个对于个人来说比较灵活的一个 PageControl。

---

图片示例：

---

解析：系统自带的 UIPageControl，继承自 UIControl

• 缺点1：无法改变点的大小和样式
• 缺点2：无法改变点之间的间距

---

系统UIPageControl代码:

@available(iOS 2.0, *)
open class UIPageControl : UIControl {

    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?
}

---

自定义 PageControl

主要代码：

class XMPageControl: UIControl {

    // 总页数
    open var numberOfPages: Int = 0
    // 当前所在页数
    open var currentPage: Int = 0 { // default is 0. value pinned to 0..numberOfPages-1
        didSet {
            subviews.filter({ $0.tag == 1000+currentPage }).first?.backgroundColor = currentPageIndicatorTintColor
            subviews.filter({ $0.tag != 1000+currentPage}).forEach({ $0.backgroundColor = pageIndicatorTintColor })
        }
    }
    // 点的间距 默认为 8
    open var distance: CGFloat = 8 // 间距 default is 8
    // 当前页点的颜色
    open var currentPageIndicatorTintColor: UIColor = UIColor.white // default is white
    // 其他点的颜色
    open var pageIndicatorTintColor: UIColor = UIColor.white.withAlphaComponent(0.6) // default is white alpha = 0.6
    // 点的大小
    open var dotSize: CGSize = CGSize(width: 7, height: 7) // default is 7
    // 当有一个点的时候 是否隐藏 默认 false
    open var hidesForSinglePage: Bool = false // hide the the indicator if there is only one page. default is false
    // 是否圆角
    open var isCornerRadius: Bool = true // 是否圆角 default true

    // 布局视图
    override func layoutSubviews() {
        super.layoutSubviews()

        let firstDotOriginX: CGFloat = (frame.size.width - CGFloat(numberOfPages)*dotSize.width - distance * CGFloat(numberOfPages-1))*0.5
        let firstDotOriginY: CGFloat = (frame.size.height - dotSize.height)*0.5

        for i in 0..<numberOfPages {
            // 判断当只有一个点时 是否隐藏
            if numberOfPages <= 1 && hidesForSinglePage {
                return
            }
            let dot = UIView(frame: CGRect(x: firstDotOriginX + CGFloat(i)*(distance+dotSize.width), y: firstDotOriginY, width: dotSize.width, height: dotSize.height))

            if i == currentPage {
                dot.backgroundColor = currentPageIndicatorTintColor
            } else {
                dot.backgroundColor = pageIndicatorTintColor
            }

            dot.tag = 1000 + i
            // 是否切圆角
            dot.layer.cornerRadius = isCornerRadius ? dotSize.height*0.5 : 0
            self.addSubview(dot)

        }
    }
}

---

Demo 传送门：

XMPageControl