循环滑动图片是在APP程序中很实用的,如在腾讯视频中的精选首页就使用到了图片的循环滑动。
循环滑动图片用到的主要视图控件有:UIScrollView、UIPageControl、UIImageView,实现自动循环滑动时还用到NSTimer定时器
创建子视图核心代码:
CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height;
//1.创建滑动视图
_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];
//2.创建分页控件
_pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, self.frame.size.height - 30, width, 30)];
//设置分页控制器的页数和当前页数
_pageControl.numberOfPages = _imageNames.count;
_pageControl.currentPage = 0;
//设置分页控件的颜色和当前选择的颜色
_pageControl.pageIndicatorTintColor = [UIColor orangeColor];
_pageControl.currentPageIndicatorTintColor = [UIColor greenColor];
[self addSubview:_pageControl];
//3.创建左中右三个图片视图
_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];
//4.初始化定时器
_timer = [NSTimer scheduledTimerWithTimeInterval:1.5
target:self
selector:@selector(timerAction:)
userInfo:nil
repeats:YES];
[self loadImage];
加载图片视图核心代码:
_middleImageView.image = [UIImage imageNamed:_imageNames[_currentNumber]];
NSInteger leftIndex = (_currentNumber - 1 + _imageNames.count) % _imageNames.count;
_leftImageView.image = [UIImage imageNamed:_imageNames[leftIndex]];
NSInteger rightIndex = (_currentNumber + 1) % _imageNames.count;
_rightImageView.image = [UIImage imageNamed:_imageNames[rightIndex]];
_pageControl.currentPage = _currentNumber;
滑动视图代理方法,滑动时调用核心代码:
//1.判断滑动方向
if (scrollView.contentOffset.x > scrollView.bounds.size.width) {//向左滑动
_currentNumber = (_currentNumber + 1) % _imageNames.count;
}else if(scrollView.contentOffset.x < scrollView.bounds.size.width){ //向右滑动
_currentNumber = (_currentNumber - 1 + _imageNames.count) % _imageNames.count;
}
//2.重新加载数据
[self loadImage];
//3.设置偏移量
scrollView.contentOffset = CGPointMake(_scrollView.bounds.size.width, 0);
定时器实现核心代码:
_currentNumber = _currentNumber % _imageNames.count;
[self loadImage];
_currentNumber ++;