转载

打造一款iOS高可用的轮播组件(广告,跑马灯)

其实这个问题是这样的:

在一个需求里,看到类似跑马灯上下轮播的一个需求,要是只有文字还好说,我直接github上down一个轮子立马就可以套用啊,当然具体实现方式或者基本原理得懂一遍,不然做的啥都不知道,要有这么一点点责任心。搞不好是给自己挖坑呢, 可需求是多变的,绝不仅仅是只有文字辣么简单,这次增加了一个icon图标也要跟着文字一起滚动,要是下次在增加一个按钮还是啥的呢.... 将永无止境了,我们改起来也忙的一笔,焦头烂额的感觉。基于此,我想这个玩意一定是可以定制的,比如把轮播这个组件化,分离出去,里面的子视图是根据数据源来创建,然后轮播的逻辑是轮播组件自身携带,只要遵守了协议就可以定制丰富多彩的子视图进行轮播,目的是想要打造这样一款组件。梦想还是要有的,万一实现了呢,从简单的一步步开始,慢工出细活。

操作步骤

一开始写最丑的代码和难看的UI,先实现基本功能先
改进代码,优化UI的细节
定制协议接口方法
细节调整

- 滚动方向,创建一个枚举

typedef NS_ENUM(NSInteger,WGBScrollDirectionType){
    WGBScrollDirectionTypeHorizontal = 0,
    WGBScrollDirectionTypeVertical
};

- 数据源以及协议方法

@class WGBScrollContainerView;
@protocol WGBScrollContainerViewDataSourceDelegate 
@required
  ///时间
- (NSTimeInterval)wgb_autoScrollDuration;
  ///滚动的方向
- (WGBScrollDirectionType)wgb_ScrollDirectionType;
  ///有多少个子控件
- (NSInteger)wgb_numberOfRowsInWithContainerView:(WGBScrollContainerView *) containerView ;
  ///子控件
- (UIView *)wgb_subContentViewWithContainerView:(WGBScrollContainerView *) containerView  subViewForRowAtIndex:(NSInteger)index;
@optional
  ///点击事件
- (void)wgb_containerView:(WGBScrollContainerView *)containerView didSelectRowAtIndex:(NSInteger)index;
@end

- InterFace

@interface WGBScrollContainerView : UIView
@property (nonatomic,weak) id wgbDataSourceDalegate;
@property (nonatomic,assign,readonly) NSTimeInterval duration;
@property (nonatomic,assign,readonly) WGBScrollDirectionType directionType;
- (void)start;
- (void)stop;
- (void)pause;
- (void)reloadData ;
- (void)clickItemViewWithIndex:(void(^)(NSInteger index))clickBlock;
@end

- imp

#import "WGBScrollContainerView.h"
@interface WGBScrollContainerView ()
@property (nonatomic,strong) UIScrollView *bgScrollView;
@property (nonatomic,strong) NSTimer *timer;
@property (nonatomic,assign) NSInteger flagIndex;
@property (nonatomic,copy) void(^clickIndex) (NSInteger index);
@property (nonatomic,assign,readwrite) NSTimeInterval duration;
@property (nonatomic,assign,readwrite) WGBScrollDirectionType directionType;
@end
@implementation WGBScrollContainerView
- (UIScrollView *)bgScrollView{
    if (!_bgScrollView) {
        _bgScrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
        _bgScrollView.delegate = self;
        _bgScrollView.backgroundColor = [UIColor whiteColor];
//      _bgScrollView.userInteractionEnabled = NO;
        _bgScrollView.showsVerticalScrollIndicator = NO;
        _bgScrollView.showsHorizontalScrollIndicator = NO;
        _bgScrollView.bounces = NO;
        _bgScrollView.pagingEnabled = YES;
        [self addSubview: _bgScrollView];
    }
    return _bgScrollView;
}
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
    }
    return self;
}
#pragma mark - 即将进入窗口
- (void)willMoveToWindow:(UIWindow *)newWindow
{
    [super willMoveToWindow:newWindow];
    [self reloadData];
}
- (void)reloadData{
    [self stop];
        ///没有设置数据源 return
    if (self.wgbDataSourceDalegate == nil) {
        return;
    }
    if (![self.wgbDataSourceDalegate respondsToSelector:@selector(wgb_autoScrollDuration)]) {
        @throw [NSException exceptionWithName:@"WGBError" reason:@"未实现（wgb_autoScrollDuration:）" userInfo:nil];
    }
    if (![self.wgbDataSourceDalegate respondsToSelector:@selector(wgb_ScrollDirectionType)]) {
        @throw [NSException exceptionWithName:@"WGBError" reason:@"未实现（wgb_ScrollDirectionType:）" userInfo:nil];
    }
    if (![self.wgbDataSourceDalegate respondsToSelector:@selector(wgb_numberOfRowsInWithContainerView:)]) {
        @throw [NSException exceptionWithName:@"WGBError" reason:@"未实现（wgb_numberOfRowsInWithContainerView:）" userInfo:nil];
    }
    if (![self.wgbDataSourceDalegate respondsToSelector:@selector(wgb_subContentViewWithContainerView:subViewForRowAtIndex:)]) {
        @throw [NSException exceptionWithName:@"WGBError" reason:@"未实现（wgb_subContentViewWithContainerView:subViewForRowAtIndex:）" userInfo:nil];
    }
    self.duration = [self.wgbDataSourceDalegate wgb_autoScrollDuration];
    self.directionType = [self.wgbDataSourceDalegate wgb_ScrollDirectionType];
    [self setup];
    [self start];
}
- (void)setDirectionType:(WGBScrollDirectionType)directionType{
    _directionType = directionType;
}
- (void)setDuration:(NSTimeInterval)duration{
    _duration = duration;
    self.timer = [NSTimer scheduledTimerWithTimeInterval: duration target:self selector:@selector(changeContent) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer: self.timer forMode:NSRunLoopCommonModes];
    self.flagIndex = 0;
}
- (void)setup{
    CGRect frame = self.bounds;
    CGFloat width = frame.size.width;
    CGFloat height = frame.size.height;
    CGFloat count = [self.wgbDataSourceDalegate wgb_numberOfRowsInWithContainerView: self];
    for (NSInteger i = 0; i < count ; i += 1) {
        UIView *subView = [self.wgbDataSourceDalegate wgb_subContentViewWithContainerView:self subViewForRowAtIndex: i];
        if (self.directionType == WGBScrollDirectionTypeVertical) {
            subView.frame = CGRectMake(0, height*i , width , height);
            self.bgScrollView.contentSize = CGSizeMake(width, height*count);
        }else{
            subView.frame = CGRectMake(width*i, 0, width , height);
            self.bgScrollView.contentSize = CGSizeMake(width*count, height);
        }
        subView.tag = i;
        subView.userInteractionEnabled = YES;
        UITapGestureRecognizer *tapGes = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(clickItemViewIndex:)];
        [subView addGestureRecognizer: tapGes];
        [self.bgScrollView addSubview: subView];
    }
    [self.bgScrollView setContentOffset:CGPointMake(0, 0)];
}
- (void)clickItemViewIndex:(UITapGestureRecognizer *)tap{
    if (self.clickIndex) { ///之前是用block实现的
        self.clickIndex(tap.view.tag);
    }
    if ([self.wgbDataSourceDalegate respondsToSelector:@selector(wgb_containerView:didSelectRowAtIndex:)]) {
        [self.wgbDataSourceDalegate wgb_containerView:self didSelectRowAtIndex:tap.view.tag];
    }
}
- (void)clickItemViewWithIndex:(void (^)(NSInteger index))clickBlock{
    self.clickIndex = clickBlock;
}
    //// 这里的做法是将数据源的第一条放置到了最后一条 ,等轮完一轮的时候,重新回到第一条时,这里需要一个等待时间,这个时间间隔没处理,一轮结束休息一波,也是人之常情,科学都源自于生活,我觉得这一点也是没有毛病的
- (void)changeContent{
    CGRect frame = self.bounds;
    CGFloat width = frame.size.width;
    CGFloat height = frame.size.height;
    CGFloat count =  [self.wgbDataSourceDalegate wgb_numberOfRowsInWithContainerView: self];
    if (self.flagIndex == count) {
        self.flagIndex = 0;
        [self.bgScrollView setContentOffset:CGPointMake(0, 0)];
    }
    if (self.directionType == WGBScrollDirectionTypeVertical) {
        [self.bgScrollView setContentOffset:CGPointMake(0, height*self.flagIndex) animated:YES];
    }else{
        [self.bgScrollView setContentOffset:CGPointMake(width *self.flagIndex, 0) animated:YES];
    }
    self.flagIndex++;
}
- (void)start{
    [self.timer fire];
}
- (void)stop{
    [self.timer invalidate];
    self.timer = nil;
}
- (void)pause{
    [self.timer setFireDate:[NSDate distantPast]];
}
- (void)dealloc{
    [self stop];
}
  ///这一步是关键点,取消scrollView的手动滑动手势,只保留定时器自动滚动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    self.bgScrollView.panGestureRecognizer.enabled = NO;
}
@end

遇到的困难

1. 禁用UIScrollView的Pan滑动手势 [已解决]

一开始也是没有头绪,关掉人机交互,,但是又要点击事件,还想到过用穿透视图来拦截,仍然没有DidScroll: 这个方法方便

2. 视图轮播完一轮回到初始位置的时间间隔的处理 [待定]

暂时没处理,轮播完一波就休息一会儿

3. 子视图复用的问题 [待定]

子视图需要设计一种像创建cell那样注册或者复用的方案,但是目前一点头绪也没有...

Demo已经躺在github了点我下载

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

正文到此结束