WyhPageControl
A customizable pageControl，support many styles including custom image、tintcolor ，etc
Github
https://github.com/XiaoWuTongZhi/WyhPageControl
CocoaPods Support
pod search WyhPageControl
pod 'WyhPageControl', '~> 1.0.0'
前端时间项目整体UI及交互大改，需要准备封装很多UI组件，借着这个机会封装了不少实用组件，这里给大家介绍一款支持自定义的pageControl吧（其实我就是来骗star的，github上很少有人去封装pageControl，有一个上千star的pageControl也已经好多年没维护了，因为太简单了，但是今天介绍的不仅仅是一个第三方组件，更多的教大家如何去封装一个自定义UI的方式方法）。
传统意义的UIPageControl想必根本满足不了广大开发同胞的使用了，项目越来越远离Native页面，也着实让我们很头疼！
PageControl封装起来很简单，因为它的功能也很简单，无非是多一些系统没有的自定义小点点的功能罢了，不过封装思想很重要。从工作至今，封装过很多组件，其实思想都大同小异，下面我们来分析一波代码！（敲黑板了奥）
封装思想
这里仅谈谈UI组件的封装，日后我还会出一些针对业务模块的封装思想。
UI组件封装都大同小异，像Native原生的tableView就是一个很好的例子，支持自定义最大化的组件往往并不是暴露很多的自定义属性，而是直接用代理回调的方式，让使用者去自定义这个组件的样式，而不是已定的样式。这一点是很重要的，你要清楚你所暴露的自定义属性永远没有办法满足所有人的需求，因此代理回调很重要。让我们通过分析WyhPageControl来理解如何通过代理回调来自定义UI组件：
WyhPageControl代码分析
WyhPageControl设计之初就是想自定义pageControl的小圆点样式、间距、圆点尺寸等，那么完全可以仿照tableView的代理模式，将小圆点作为cell，通过代理回调的方式，让用户去自定义，当然还是要暴露一些自定义属性的，最好维持UIPageControl的属性不变，起码使用起来更舒服。
WyhPageControl作为主体View，WyhPageControlDot作为cell，内部实现一点要分清楚哪些是支持reload的方法：
初始化方法，采用block回调自定义配置使代码块更聚合，block内无需考虑循环引用，dataSource和delegate一定要分清，参考UITableView。
- (instancetype)initWithDataSource:(id<WyhPageControlDataSource>)dataSource
Delegate:(id<WyhPageControlDelegate>)delegate
WithConfiguration:(void (^)(WyhPageControl *))configuration {
if (self = [self init]) {
if(configuration) configuration(self);
_dataSource = dataSource;
_delegate = delegate;
[self reloadUI];
}
return self;
}
创建协议代理，来高度自定义你的dot，dataSource和delegate一定要分清并分开，结构一定要严格规范，为了可拓展性和便于维护：
@class WyhPageControl;
@protocol WyhPageControlDataSource <NSObject>
@optional
- (WyhPageControlDot *)pageControl:(WyhPageControl *)pageControl dotForIndex:(NSInteger)index;
@end
@protocol WyhPageControlDelegate <NSObject>
@optional
- (void)pageControl:(WyhPageControl *)pageControl didClickForIndex:(NSInteger)index;
@end
初始化一些属性，确保所有属性都有默认值。
- (void)initializeConfig {
self.clipsToBounds = YES;
_numberOfPages = 0;
_currentPage = 0;
_hidesForSinglePage = NO;
_pageIndicatorTintColor = [UIColor lightGrayColor];
_currentPageIndicatorTintColor = [UIColor darkGrayColor];
_backgroundColor = [UIColor clearColor];
_borderWidth = 0.f;
_cornerRadius = 0.f;
_borderColor = [UIColor darkGrayColor];
_backgroundImage = nil;
_showReloadActivityIndicator = YES;
// const
_dotLeftMargin = 15.f;
_dotTopMargin = 8.f;
_dotSpace = 8.f;
// ui
_coverView = [[UIView alloc]init];
_coverImageView = [[UIImageView alloc]init];
_indicator = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:(UIActivityIndicatorViewStyleGray)];
[_indicator sizeToFit];
[self addSubview:_coverView];
[self addSubview:_coverImageView];
[self addSubview:_indicator];
}
并重写这些属性的setter方法，使其重新set的时候会发生样式的变化。
#pragma mark - Setter
- (void)setNumberOfPages:(NSUInteger)numberOfPages {
_numberOfPages = numberOfPages;
}
- (void)setHidesForSinglePage:(BOOL)hidesForSinglePage {
_hidesForSinglePage = hidesForSinglePage;
}
- (void)setBackgroundColor:(UIColor *)backgroundColor {
_backgroundColor = backgroundColor;
_coverView.backgroundColor = backgroundColor;
}
- (void)setPageIndicatorTintColor:(UIColor *)pageIndicatorTintColor {
_pageIndicatorTintColor = pageIndicatorTintColor;
}
- (void)setCurrentPageIndicatorTintColor:(UIColor *)currentPageIndicatorTintColor {
_currentPageIndicatorTintColor = currentPageIndicatorTintColor;
}
- (void)setDotLeftMargin:(CGFloat)dotLeftMargin {
_dotLeftMargin = dotLeftMargin;
}
- (void)setDotTopMargin:(CGFloat)dotTopMargin {
_dotTopMargin = dotTopMargin;
}
- (void)setDotSpace:(CGFloat)dotSpace {
_dotSpace = dotSpace;
}
- (void)setBorderWidth:(CGFloat)borderWidth {
_borderWidth = borderWidth;
self.layer.borderWidth = borderWidth;
}
- (void)setBorderColor:(UIColor *)borderColor {
_borderColor = borderColor;
self.layer.borderColor = borderColor.CGColor;
}
- (void)setBackgroundImage:(UIImage *)backgroundImage {
_backgroundImage = backgroundImage;
_coverImageView.image = backgroundImage;
}
- (void)setCornerRadius:(CGFloat)cornerRadius {
_cornerRadius = cornerRadius;
self.layer.cornerRadius = cornerRadius;
}
通过dataSource指定的样式来创建dot，visibleDots是用来存放所有dot的数组，这里一定要判断代理人是否给回调了dot，如果没有自定创建一个默认的dot，并通过用户设置的间距等属性，设置dot的位置，并添加点击手势。（这里要注意的是，这个initDots方法一定是一个支持reload的，使用者可能会根据不同情况返回不同的dot，这点必须清楚）
- (void)initDots {
[self.visibleDots makeObjectsPerformSelector:@selector(removeFromSuperview)];
self.visibleDots = [NSMutableArray new];
WyhPageControlDot *lastDot ;
for (int i = 0; i < _numberOfPages; i++) {
WyhPageControlDot *dot = nil;
if (![self.dataSource respondsToSelector:@selector(pageControl:dotForIndex:)]) {
dot = [[WyhPageControlDot alloc]init];
dot.unSelectTintColor = _pageIndicatorTintColor;
dot.selectTintColor = _currentPageIndicatorTintColor;
}else {
dot = [self.dataSource pageControl:self dotForIndex:i];
}
dot.hidden = _isReloading;
// frame
CGFloat dotX = (!lastDot)?_dotLeftMargin:CGRectGetMaxX(lastDot.frame)+_dotSpace;
dot.frame = CGRectMake(dotX, 0, dot.size.width, dot.size.height);
// gesture
UITapGestureRecognizer *tapges = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(pageControlDotTapAction:)];
[dot addGestureRecognizer:tapges];
[self addSubview:dot];
[self.visibleDots addObject:dot];
lastDot = dot;
}
[self bringSubviewToFront:self.indicator];
[self configDotsUI];
[self autoConfigBounds];
[self configAllDotsCenterY]; // must after autoConfigBounds.
}
增加与之对应的reload方法抛给用户，同tableView一样，这个reload方法执行后，会重新调用所有代理回调及自定义属性，保证更新机制，这也是整个UI自定义组件封装最重要的环节！（WyhPageControl增加了一个转圈圈的菊花，用户可以定义显示与隐藏当在reload时）
- (void)reloadData {
[self reloadUI];
}
- (void)reloadUI {
[self showActivity:YES];
[self checkHiddenIfNeeded];
[self configPageControlUI];
[self initDots];
[self showActivity:NO];
}
最后就是当点击dot时，回调代理方法：
- (void)pageControlDotTapAction:(UITapGestureRecognizer *)tapGes {
WyhPageControlDot *dot = (WyhPageControlDot *)tapGes.view;
NSInteger index = [self.visibleDots indexOfObject:dot];
if (index == NSNotFound) {
NSAssert(NO, @"Can't found this tap dot !");
return;
}
[self moveToIndex:index];
// call back
if ([self.delegate respondsToSelector:@selector(pageControl:didClickForIndex:)]) {
[self.delegate pageControl:self didClickForIndex:index];
}
}
每一个dot有两种状态对应两种UI样式，选中和未选中，目前仅支持自定义 选中/未选中 颜色、背景图片。
@interface WyhPageControlDot : UIView
@property(nonatomic, strong) UIColor *unSelectTintColor;
@property(nonatomic, strong) UIColor *selectTintColor;
@property (nonatomic, strong) UIImage *unselectImage;
@property (nonatomic, strong) UIImage *selectImage;
@property (nonatomic, assign) CGSize size; // default is (20,20)
@property (nonatomic, strong) UIColor *borderColor; //defult is nil;
@property (nonatomic, assign) CGFloat borderWidth; // default is 0.f;
@property (nonatomic, assign) CGFloat conerRadius; //default is 10.f
- (void)setSelected:(BOOL)selected;
@end
dot如果不满足你的需求，同cell一样，你也可以自定义继承这个dot的Base类，来自定义你的圆点，这里就不举例子了。
使用方法请大家去demo中自行查看，很简单，同tableView类似。
总结
通过分析这个简单的组件，希望朋友们对于UI组件封装思想能更加理解，最后希望喜欢的朋友们到GitHub帮点个star，欢迎各种好朋友，一起来探讨、研究，接下来我会出一些其他方面的，不只是UI层次的，简书这个平台挺好，（但就是有时太懒），大家共勉吧。
开启传送门：WyhPageControl
网友评论