您的位置:首页 > 产品设计 > UI/UE

用3个label实现scrollView的循环滚动效果

2017-03-17 11:30 274 查看
今日公司给定一个实现广告位循环滚动效果的任务,翻查多篇博客文章,总结经验,写出下面的demo,感觉效果还可以,所以记录下来,以便日后翻查。

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic,strong)UIScrollView * scrollView;
@property (nonatomic,strong)UIPageControl * pageControl;

@property (nonatomic,strong)UILabel * firstLabel;
@property (nonatomic,strong)UILabel * secondLabel;
@property (nonatomic,strong)UILabel * thirdLabel;

@property (nonatomic,strong)NSMutableArray * allArr;

@property (nonatomic,strong)NSTimer * timer;

@property (nonatomic,assign)NSInteger currentPage;

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

self.view.backgroundColor = [UIColor whiteColor];
self.automaticallyAdjustsScrollViewInsets = NO;

_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, appWidth, appHeight - 164)];
_scrollView.pagingEnabled = YES;
_scrollView.showsHorizontalScrollIndicator = YES;
_scrollView.delegate = self;
[self.view addSubview:_scrollView];

_pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, appHeight - 124, appWidth, 20)];
_pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
_pageControl.currentPageIndicatorTintColor = [UIColor greenColor];
[self.view addSubview:_pageControl];

_firstLabel = [self createLabelWith:CGRectMake(0, 0, appWidth, appHeight - 164) andTitle:@"0"];
_secondLabel = [self createLabelWith:CGRectMake(appWidth, 0, appWidth, appHeight - 164) andTitle:@"1"];
_thirdLabel = [self createLabelWith:CGRectMake(appWidth * 2, 0, appWidth, appHeight - 164) andTitle:@"2"];

[_scrollView addSubview:_firstLabel];
[_scrollView addSubview:_secondLabel];
[_scrollView addSubview:_thirdLabel];

_allArr = [NSMutableArray array];
[_allArr addObject:@"0"];
[_allArr addObject:@"1"];
[_allArr addObject:@"2"];

_currentPage = 0;
_pageControl.currentPage = _currentPage;
_pageControl.numberOfPages = _allArr.count;
_scrollView.contentSize = CGSizeMake(_allArr.count * appWidth, 0);
[self reloadData];

_timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(autoShow) userInfo:nil repeats:YES];

}

- (void)reloadData{

// 确定了每一次要显示的页数之后,根据页数确定要显示的具体页面内容,然后将此具体页面内容展示到中间page上,根据逻辑顺序,确定左右页面要显示的内容
// 确保每次滚动,都只是内容发生变化,位置不变
if (_currentPage == 0) {// 2 0 1
_firstLabel.text = [_allArr lastObject];
_secondLabel.text = [_allArr objectAtIndex:_currentPage];
_thirdLabel.text = [_allArr objectAtIndex:_currentPage + 1];
}else if (_currentPage == [_allArr count] - 1){ // 1 2 0

_firstLabel.text = [_allArr objectAtIndex:_currentPage - 1];
_secondLabel.text = [_allArr objectAtIndex:_currentPage];
_thirdLabel.text = [_allArr firstObject];
}else{ // 0 1 2

_firstLabel.text = [_allArr objectAtIndex:_currentPage - 1];
_secondLabel.text = [_allArr objectAtIndex:_currentPage];
_thirdLabel.text = [_allArr objectAtIndex:_currentPage + 1];

}

_firstLabel.frame = CGRectMake(0, 0, appWidth, appHeight - 164);
_secondLabel.frame = CGRectMake(appWidth, 0, appWidth, appHeight - 164);
_thirdLabel.frame = CGRectMake(appWidth * 2, 0, appWidth, appHeight - 164);

_pageControl.currentPage = _currentPage;
_scrollView.contentOffset = CGPointMake(appWidth, 0);

}

- (UILabel *)createLabelWith:(CGRect)frame andTitle:(NSString *)title{

UILabel * label = [[UILabel alloc] initWithFrame:frame];
label.text = title;
label.textAlignment = NSTextAlignmentCenter;
label.font = [UIFont systemFontOfSize:25];
label.textColor = [UIColor blackColor];
[self.view addSubview:label];
return label;

}

#pragma mark ---- UIScrollViewDelegate
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{

if (_timer.isValid) {
[_timer invalidate];
_timer = nil;
}

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

// 拖拽结束,启动定时器
if (!_timer) {
_timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(autoShow) userInfo:nil repeats:YES];
}

float x = scrollView.contentOffset.x;
// 因为每次scrollView的起始的contentOffset.x 都是保持在appWidth位置上,所以,如果x <= 0就可以确定是向前翻的;x >= 2 * appWidth是向后翻的
if (x <= 0) { // 向前翻(向左方向滚动)

if (_currentPage <= 0) {
_currentPage = [_allArr count] - 1;
}else{

_currentPage --;
}
}

// 因为,起始的contentOffset.x 就是appWidth,所以一旦向右移动,就会达到>= 2 * appWidth的目的,使得_currentPage ++; 当第三次滑动达到_currentPage == [_allArr count] - 1的时候,_currentPage = 0;
if (x >= 2 * appWidth) { // 向后翻(向右方向滚动)

if (_currentPage == [_allArr count] - 1) {
_currentPage = 0;
}else{

_currentPage ++;
}

}
NSLog(@"---%f ---%ld",x,_currentPage);
// 1.调换label的位置 2.设置pageControl的currentPage
[self reloadData];

}

- (void)autoShow{
// 自动滚动,都是向右滚动
if (_currentPage == _allArr.count - 1) {
_currentPage = 0;
}else{

_currentPage ++;
}

[self reloadData];

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  uiscrollview 循环