jpg
其实这个问题是这样的:
在一个需求里,看到类似跑马灯上下轮播的一个需求,要是只有文字还好说,我直接github上down一个轮子立马就可以套用啊,当然具体实现方式或者基本原理得懂一遍,不然做的啥都不知道,要有这么一点点责任心。搞不好是给自己挖坑呢, 可需求是多变的,绝不仅仅是只有文字辣么简单,这次增加了一个icon图标也要跟着文字一起滚动,要是下次在增加一个按钮还是啥的呢.... 将永无止境了,我们改起来也忙的一笔,焦头烂额的感觉。基于此,我想这个玩意一定是可以定制的,比如把轮播这个组件化,分离出去,里面的子视图是根据数据源来创建,然后轮播的逻辑是轮播组件自身携带,只要遵守了协议就可以定制丰富多彩的子视图进行轮播,目的是想要打造这样一款组件。梦想还是要有的,万一实现了呢,从简单的一步步开始,慢工出细活。
操作步骤
- 一开始写最丑的代码和难看的UI,先实现基本功能先
- 改进代码,优化UI的细节
- 定制协议接口方法
- 细节调整
- 滚动方向,创建一个枚举
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那样注册或者复用的方案,但是目前一点头绪也没有...
