有时候我们需要定制一些自己的控件才能实现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
当然以上只是我个人实现的方法，如果大家有更好的实现方案，我也希望能够学习。
