美文网首页征服iOS小知识点好东西
打造一款iOS高可用的轮播组件(广告,跑马灯)

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

作者: ChangeWorld | 来源:发表于2017-08-26 02:18 被阅读658次
    jpg
    其实这个问题是这样的:

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

    操作步骤

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

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

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

    - 数据源以及协议方法

    @class WGBScrollContainerView;
    
    @protocol WGBScrollContainerViewDataSourceDelegate <NSObject>
    
    @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<WGBScrollContainerViewDataSourceDelegate> 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 ()<UIScrollViewDelegate>
    
    @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了点我下载

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/catmdxtx.html