博客> iOS_UIScrollView实现的自动循环滚动效果
iOS_UIScrollView实现的自动循环滚动效果
2018-10-19 16:01 评论:0 阅读:692 syfuxi
ios UIScrollView 自动无限滚动
   用UIScrollView写了一个简单的自动滚动效果,思路是通过重新设置scrollView的contentOffest,让图片在视觉上像是在无限循环,在无限循环的基础上加了一个定时器让它能够自动滚动。

实现过程: .h文件

import

@interface AutomaticLoopView : UIView

@property (nonatomic, strong) NSArray *imageArray;

@end

.m文件

 #import "AutomaticLoopView.h"
 @interface AutomaticLoopView ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIPageControl *pageControl;
@property (nonatomic , strong) UIImageView *leftImageView;
@property (nonatomic , strong) UIImageView *middleImageView;
@property (nonatomic , strong) UIImageView *rightImageView;
@property (nonatomic, assign) NSInteger currentNum;
@property (nonatomic, strong) NSTimer *timer;

@end

@implementation AutomaticLoopView

//初始化
- (instancetype) initWithFrame:(CGRect)frame {

if (self = [super initWithFrame:frame]) {

}
return self;
}

- (void) setImageArray:(NSArray *)imageArray {

  _imageArray = imageArray;

[self createSubView];
}

#pragma mark -创建子视图
- (void) createSubView {

//获取当前视图的宽度和高度
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;

//创建scrollView
_scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
_scrollView.delegate = self;
_scrollView.pagingEnabled = YES;
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.showsVerticalScrollIndicator = NO;
_scrollView.contentSize = CGSizeMake(width * 3, height);

[self addSubview:_scrollView];

//创建分页控件
_pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, height - 30, width, 30)];

_pageControl.numberOfPages = _imageArray.count;
_pageControl.currentPage = 0;

_pageControl.pageIndicatorTintColor = [UIColor orangeColor];
_pageControl.currentPageIndicatorTintColor = [UIColor redColor];

[self addSubview:_pageControl];

//创建左中右三个图片视图
_leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, width, height)];
_middleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(width, 0, width, height)];
_rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(width * 2, 0, width, height)];

[_scrollView addSubview:_leftImageView];
[_scrollView addSubview:_middleImageView];
[_scrollView addSubview:_rightImageView];

//    [self loadImage];

//初始化timer,用这个方法初始化计时器不需要手动启动计时器,如果用init需要手动启动
_timer = [NSTimer scheduledTimerWithTimeInterval:1
                                          target:self
                                        selector:@selector(timeAction:)
                                        userInfo:nil
                                         repeats:YES];
}

//定时器的实现方法
- (void) timeAction:(NSTimer *) timer {

NSInteger pageNum = _currentNum % _imageArray.count;
_currentNum = pageNum;
[self loadImage];
_currentNum ++;
}

- (void) loadImage {

//设置默认显示图片
_middleImageView.image = [UIImage imageNamed:_imageArray[_currentNum]];

//设置左边
NSInteger leftIndex = (_currentNum - 1 + _imageArray.count) % _imageArray.count;
_leftImageView.image = [UIImage imageNamed:_imageArray[leftIndex]];

//右边
NSInteger rightIndex = (_currentNum + 1 ) % _imageArray.count;
_rightImageView.image = [UIImage imageNamed:_imageArray[rightIndex]];
}

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

NSLog(@"%f", scrollView.contentOffset.x);

//判断方向
if (scrollView.contentOffset.x > scrollView.bounds.size.width) {
    //向左划动
    _currentNum = (_currentNum + 1) % _imageArray.count;

} else if (scrollView.contentOffset.x &lt; scrollView.bounds.size.width){
    _currentNum = (_currentNum - 1 + _imageArray.count) % _imageArray.count;
}

[self loadImage];
scrollView.contentOffset = CGPointMake(_scrollView.bounds.size.width, 0);
}

// 滚动视图将要开始拖动滚动的时候的委托回调方法
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
[self.timer invalidate];//取消计时器
self.timer = nil;//避免野指针
}

// 滚动视图拖动滚动结束时候的委托回调方法(手拖动离开屏幕的时候)
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
_timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(timeAction:) userInfo:nil repeats:YES];
    }

@end
收藏
0
sina weixin mail 回到顶部