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)dataSource
                          Delegate:(id)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 

@optional

- (WyhPageControlDot *)pageControl:(WyhPageControl *)pageControl dotForIndex:(NSInteger)index;

@end

@protocol WyhPageControlDelegate 

@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

分析WyhPageControl，谈谈UI组件的封装思想

WyhPageControl

Github

CocoaPods Support

封装思想

WyhPageControl代码分析

总结

你可能感兴趣的:(分析WyhPageControl，谈谈UI组件的封装思想)