advertScroll.gif
調用示例代碼如下：
_labelView = [[LFAdvertScrollView alloc] initWithFrame:CGRectMake(0, 100, ScreenWidth, 40)];
_labelView.totalCount = 4;
_labelView.dataSource = self;
_labelView.delegate = self;
[self.view addSubview:_labelView];
_attbriuteView = [[LFAdvertScrollView alloc] initWithFrame:CGRectMake(0, 160, ScreenWidth, 60)];
_attbriuteView.totalCount = 4;
_attbriuteView.dataSource = self;
_attbriuteView.delegate = self;
[self.view addSubview:_attbriuteView];
_imageView = [[LFAdvertScrollView alloc] initWithFrame:CGRectMake(0, 240, ScreenWidth, 200)];
_imageView.totalCount = 4;
_imageView.dataSource = self;
_imageView.delegate = self;
[self.view addSubview:_imageView];
遵循代理要實現的方法：
- (Class)customViewClassForAdvertScrollView:(LFAdvertScrollView *)view {
if (view == _labelView) {
return [UILabel class];
} else if (view == _imageView) {
return [UIImageView class];
} else {
return [CustomAdvertView class];
}
}
- (void)configCustomView:(UIView *)view forIndex:(NSInteger)index advertView:(nonnull LFAdvertScrollView *)advertView {
if (advertView == _labelView) {
UILabel *testLabel = (UILabel *)view;
testLabel.text = @[@"I'm Li Bai",@"I'm Du Fu",@"I'm Bai Ju Yi",@"I'm Wang An Shi"][index];
testLabel.textAlignment = NSTextAlignmentCenter;
testLabel.textColor = [UIColor purpleColor];
testLabel.font = [UIFont boldSystemFontOfSize:16];
testLabel.backgroundColor = [UIColor cyanColor];
} else if (advertView == _imageView) {
UIImageView *imageView = (UIImageView *)view;
imageView.image = [UIImage imageNamed:@[@"h1.jpg",
@"h2.jpg",
@"h3.jpg",
@"h4.jpg"][index]];
} else {
CustomAdvertView *customView = (CustomAdvertView *)view;
customView.leftImage.image = [UIImage imageNamed:@[@"h1.jpg",
@"h2.jpg",
@"h3.jpg",
@"h4.jpg"][index]];
customView.rightLabel.text = @[@"I'm Li Bai,I'm Li Bai,I'm Li Bai,I'm Li Bai,I'm Li Bai",@"I'm Du Fu",@"I'm Bai Ju Yi",@"I'm Wang An Shi"][index];
}
}
重點來了，看了很多都是基于UICollectionView實現的，自動滾動模式下，會返回很多個Item，我這里嘗試用UIScrollview復用三個view來實現自動滾動，核心思路是用戶看到的永遠是中間的那個view，通過控制偏移量來實現自動滾動效果。
LFAdvertScrollView.h文件內容：
@class LFAdvertScrollView;
@protocol LFAdvertScrollViewDataSource <NSObject>
/**
返回要滾動的視圖類型
@param view LFAdvertScrollView
@return 返回要滾動的視圖類型,!!!:必須是繼承于UIView實現的類
*/
- (Class)customViewClassForAdvertScrollView:(LFAdvertScrollView *)view;
@end
@protocol LFAdvertScrollViewDelegate <NSObject>
/**
給自定義視圖賦值
@param view 賦值的視圖
@param index 第幾個視圖
@param advertView LFAdvertScrollView
*/
- (void)configCustomView:(UIView *)view forIndex:(NSInteger)index advertView:(LFAdvertScrollView *)advertView;
/**
點擊回調
@param advertView LFAdvertScrollView
@param index 第幾個視圖
*/
- (void)advertView:(LFAdvertScrollView *)advertView didSelectViewIndex:(NSInteger )index;
@end
@interface LFAdvertScrollView : UIView
/**
數據源個數，必傳項
*/
@property (nonatomic, assign) NSInteger totalCount;
/**
滾動時間間隔
*/
@property (nonatomic, assign) NSTimeInterval autoScrollInterval;
@property (nonatomic, weak) id<LFAdvertScrollViewDelegate>delegate;
@property (nonatomic, weak) id<LFAdvertScrollViewDataSource>dataSource;
@end
實現方式很簡單，就是復用三個view實現無限輪播，點擊事件只添加到中間的view上面，然后點擊回調出當前頁碼
這是主要實現部分：
///設置事件代理
- (void)setDelegate:(id<LFAdvertScrollViewDelegate>)delegate {
_delegate = delegate;
if ([_delegate respondsToSelector:@selector(configCustomView:forIndex:advertView:)]) {
[self.delegate configCustomView:self.topView forIndex:self.totalCount - 1 advertView:self];
[self.delegate configCustomView:self.middleView forIndex:0 advertView:self];
[self.delegate configCustomView:self.bottomView forIndex:1 advertView:self];
}
}
///設置視圖類型代理
- (void)setDataSource:(id<LFAdvertScrollViewDataSource>)dataSource {
_dataSource = dataSource;
if (self.dataSource && [self.dataSource respondsToSelector:@selector(customViewClassForAdvertScrollView:)]) {
///拿到用戶自定義的視圖類名
Class CustomClass = [self.dataSource customViewClassForAdvertScrollView:self];
self.topView = [[CustomClass alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
self.middleView = [[CustomClass alloc] initWithFrame:CGRectMake(0, self.frame.size.height * 1, self.frame.size.width, self.frame.size.height)];
///用戶看到的只有中間視圖，所以為了簡單起見，只需要添加中間視圖的點擊響應
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(customViewTap)];
[self.middleView addGestureRecognizer:tap];
self.bottomView = [[CustomClass alloc] initWithFrame:CGRectMake(0, self.frame.size.height * 2, self.frame.size.width, self.frame.size.height)];
[self.contentView addSubview:self.topView];
[self.contentView addSubview:self.middleView];
[self.contentView addSubview:self.bottomView];
}
}
#pragma mark - timer執行的方法
- (void)automaticScroll
{
self.currentPage++;
if (self.currentPage == self.totalCount) {
self.currentPage = 0;
}
[UIView animateWithDuration:1 animations:^{
///動畫發生的滑動
self.middleView.userInteractionEnabled =NO;
self.contentView.contentOffset =CGPointMake(0, CGRectGetHeight(self.contentView.frame) * 2);
} completion:^(BOOL finished) {
///滑動完成后，把當前現實的imageview重現移動回中間位置，此處不能使用動畫，用戶感覺不到
///移動前,先把中間imageview的image設置成當前現實的iamge
self.middleView.userInteractionEnabled = YES;
if (self.delegate && [self.delegate respondsToSelector:@selector(configCustomView:forIndex:advertView:)]) {
[self.delegate configCustomView:self.topView forIndex:self.currentPage == 0 ?self.totalCount - 1 : self.currentPage - 1 advertView:self];
[self.delegate configCustomView:self.middleView forIndex:self.currentPage advertView:self];
[self.delegate configCustomView:self.bottomView forIndex:self.currentPage == self.totalCount - 1 ? 0 : self.currentPage + 1 advertView:self];
}
self.contentView.contentOffset =CGPointMake(0, CGRectGetHeight(self.contentView.frame) * 1);
}];
}
#pragma mark - 用戶點擊
-(void)customViewTap{
if (self.delegate && [self.delegate respondsToSelector:@selector(advertView:didSelectViewIndex:)]) {
[self.delegate advertView:self didSelectViewIndex:self.currentPage];
}
}
代碼基本就這些了， 寫這篇純屬算是個人筆記，不喜勿噴，有更好的想法或者意見的歡迎大家指出。
