iOS中UIScrollView实现图片循环播放
相信大家都知道新闻类App的首页都会有一些图片在循环播放，今天我来为大家实现这个效果，带UIPageControl的效果。原理就是和相册差不多，再加上一个时间控制器来控制scrollview的偏移量改。
首先设置属相
// 循环播放的scrollView
@property (nonatomic, retain) UIScrollView *topScrollView;
// 小白点
@property (nonatomic, retain) UIPageControl *topPageControl;
// 图片
@property (nonatomic, retain) UIImageView *myImgView;
// 小白点背景
@property (nonatomic, retain) UIView *topView;
// 用来显示文字
@property (nonatomic, retain) UILabel *topLabel;
- (void)installTopScrollView
{
self.topView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height * 0.26)];
[self.myTableView.tableHeaderView addSubview:self.topView];
self.topView.backgroundColor = [UIColor clearColor];
self.topScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height * 0.26)];
self.topScrollView.backgroundColor = [UIColor clearColor];
[self.topView addSubview:self.topScrollView];
//8张图片设置topScroll滚动范围为数组+2张图片的大小
self.topScrollView.contentSize = CGSizeMake(self.view.bounds.size.width * (self.bannersArr.count + 2), 0);
//按页滑动
self.topScrollView.pagingEnabled = YES;
self.topScrollView.delegate = self;
self.topScrollView.showsHorizontalScrollIndicator = NO;
//设置初始偏移量
[self.topScrollView setContentOffset:CGPointMake(self.view.bounds.size.width, 0)];
//scrollView.directionalLockEnabled = YES;
self.bannerGift = [[BannerGift alloc] init];
for (int i = 0; i < self.bannersArr.count + 2; i++) {
//遍历把图片加到topScroll上边
if (i == 0) {
self.bannerGift = [self.bannersArr objectAtIndex:self.bannersArr.count - 1];
} else if (i == self.bannersArr.count + 1) {
self.bannerGift = [self.bannersArr objectAtIndex:0];
} else{
self.bannerGift = [self.bannersArr objectAtIndex:i - 1];
}
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width * i, 0, self.view.bounds.size.width, self.view.bounds.size.height * 0.26)];
imageView.backgroundColor = [UIColor blueColor];
// 让图片响应交互
imageView.userInteractionEnabled = YES;
// 轻拍
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapAction:)];
[imageView addGestureRecognizer:tap];
// 需要的点击次数
tap.numberOfTapsRequired = 1;
// 需要几个手指点击
tap.numberOfTouchesRequired = 1;
[self.topScrollView addSubview:imageView];
NSString *str = self.bannerGift.image_url;
str = [str stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
NSURL *url = [NSURL URLWithString:str];
[imageView setImageWithURL:url placeholderImage:[UIImage imageNamed:@"zhanwei.jpg"]];
// [imageView setImageWithURL:url];
[imageView release];
//[_bannerGift release];
}
self.topPageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height * 0.24 - 10, self.view.bounds.size.width, 10)];
self.topPageControl.backgroundColor = [UIColor clearColor];
[self.topView addSubview:self.topPageControl];
// [self.view bringSubviewToFront:self.topPageControl];
//滚动条
self.topPageControl.numberOfPages = self.bannersArr.count;
//设置滚动条不能滑动。
self.topPageControl.userInteractionEnabled = NO;
//滚动条颜色
self.topPageControl.currentPageIndicatorTintColor = [UIColor redColor];
[self.topPageControl addTarget:self action:@selector(pageAction:) forControlEvents:UIControlEventValueChanged];
[_topPageControl release];
[_topView release];
[_topScrollView release];
}
上面代码写的和详细了，其中是self.bannersArr数据源，而是self.bannerGift.image_url图片地址，通过SDWebImage来获取图片 pageControl是通过数据源来获取图片的数量。
这个方法是通过pageControl来修改翻页的偏移量，使小白点与图片张数对应起来
- (void)pageAction:(UIPageControl *)topPageControl
{
//翻页修改topScrollView偏移量
[self.topScrollView setContentOffset:CGPointMake(topPageControl.currentPage * self.topScrollView.bounds.size.width, 0)] ;
}
这段代码是通过也是通过scrollView的偏移量的改变来控制小白点，使小白点与图片张数对应起来
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
if (self.topScrollView.contentOffset.x > self.view.bounds.size.width * self.bannersArr.count) {
[self.topScrollView setContentOffset:CGPointMake(self.view.bounds.size.width, 0)];
}
//当偏移量小于第一张图片的偏移量偏移量变为最后一张图片的偏移量
if (self.topScrollView.contentOffset.x < self.view.bounds.size.width) {
[self.topScrollView setContentOffset:CGPointMake(self.view.bounds.size.width * self.bannersArr.count, 0)];
}
//由于初始偏移量为屏幕宽度所以得到的页数 - 1
self.topPageControl.currentPage = (self.topScrollView.contentOffset.x / self.topScrollView.bounds.size.width) - 1;
}
[NSTimer scheduledTimerWithTimeInterval:3.0f
target:self
selector:@selector(dismissAlert:)
userInfo:nil
repeats:NO];
下面是这个方法,实现轮播图片功能以及动画效果
- (void)dismissAlert:(NSTimer *)timer{
[UIView transitionWithView:self.topScrollView duration:0.5 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
CGFloat content = self.topScrollView.contentOffset.x + self.view.bounds.size.width;
[self.topScrollView setContentOffset: CGPointMake(content, 0)];
} completion:^(BOOL finished) {
}];
if (self.topScrollView.contentOffset.x > self.view.bounds.size.width * self.bannersArr.count) {
[self.topScrollView setContentOffset:CGPointMake(self.view.bounds.size.width, 0)];
}
//当偏移量小于第一张图片的偏移量偏移量变为最后一张图片的偏移量
if (self.topScrollView.contentOffset.x < self.view.bounds.size.width) {
[self.topScrollView setContentOffset:CGPointMake(self.view.bounds.size.width * self.bannersArr.count, 0)];
}
//由于初始偏移量为屏幕宽度所以得到的页数 - 1
self.topPageControl.currentPage = (self.topScrollView.contentOffset.x / self.topScrollView.bounds.size.width) - 1;
[NSTimer scheduledTimerWithTimeInterval:3.0f
target:self
selector:@selector(dismissAlert:)
userInfo:nil
repeats:NO];
}