同學(xué)們在寫需求的時候肯定會時常用到UIScrollView歹茶。而說到UIScrollView你弦,大家最先想到的肯定就是它上面的無限輪播功能燎孟。蘋果在UIScrollView上并沒有提供相應(yīng)的方法讓大家實現(xiàn)輪播,所以就需要通過代碼進行處理來實現(xiàn)旷偿。先上圖
我先給大家講講其實現(xiàn)的原理:
我們假設(shè)用幾張圖片實現(xiàn)輪播效果爆侣。首先,我們需要打開UIScrollView的分頁滑動
/// 分頁滑動
_scrollView.scrollEnabled = YES;
它方便的幫助我們實現(xiàn)了輪播的效果茫负,然后就需要我們來實現(xiàn)“無限的”輪播乎赴。接下來,我們就需要擺放圖片了榕吼,在擺放圖片時需要注意,我們需要在第一張圖片的位置擺放最后一張圖片(可能有點懵哈原探,不過不要著急慢慢往下看)顽素,然后我們依次擺放圖片(從第一張到最后一張),最后在所有圖片的尾部我們再放上第一張圖片戈抄。這樣我們就多放了兩張圖片(分別在首尾多放了一張圖)。我把對應(yīng)的方法寫一下:
/// 將圖片放置在UIScrollView上
-(void)setupImage {
/// 在UIScrollView的最前面添加一張圖片
UIImageView *firstImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, self.scrollView.frame.size.height)];
/// 圖片名是最后一張圖片
firstImageView.image = [UIImage imageNamed:self.imageNameList.lastObject];
[self.scrollView addSubview:firstImageView];
/// 添加圖片
for (NSInteger index = 0; index < self.imageNameList.count; index ++) {
/// UIScrollView上的每一張圖片
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((index + 1) * kScreenWidth, 0, kScreenWidth, self.scrollView.frame.size.height)];
imageView.image = [UIImage imageNamed:self.imageNameList[index]];
[self.scrollView addSubview:imageView];
self.scrollView.contentSize = CGSizeMake((index + 2) * self.scrollView.bounds.size.width, 0);
}
/// 在UIScrollView的最后面添加一張圖片
UIImageView *lastImageView = [[UIImageView alloc] initWithFrame:CGRectMake((self.imageNameList.count + 1) * kScreenWidth, 0, kScreenWidth, self.scrollView.frame.size.height)];
/// 圖片名是第一張圖片
lastImageView.image = [UIImage imageNamed:self.imageNameList.firstObject];
[self.scrollView addSubview:lastImageView];
/// 設(shè)置UIScrollView的偏移量
self.scrollView.contentSize = CGSizeMake((self.imageNameList.count + 2) * self.scrollView.bounds.size.width, 0);
/// 設(shè)置UIScrollView的起始偏移距離(將第一張圖片跳過)
self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
/// 圖片總數(shù)
self.pageControl.numberOfPages = self.imageNameList.count;
self.pageControl.currentPage = 0;
}
其實,如果大家看到這里裸诽,應(yīng)該就會大致明白無線輪播的實現(xiàn)原理了。接下來就是最后一步嘱函,在UIScrollView的代理方法里面寫邏輯:判斷UIScrollView的偏移量埂蕊,當(dāng)其滑動到首位時(顯示的是最后一張圖片)疏唾,滑動停止函似,就把偏移量修改最后面圖片的位置上(倒數(shù)第二張)。同理撇寞,當(dāng)UIScrollView滑動到最后時(顯示的是第一張圖片),滑動停止牌废,就把偏移量修改到第一張圖片的位置上(正數(shù)第二張)啤握。
#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
/// 當(dāng)UIScrollView滑動到第一位停止時,將UIScrollView的偏移位置改變
if (scrollView.contentOffset.x == 0) {
scrollView.contentOffset = CGPointMake(self.imageNameList.count * kScreenWidth, 0);
self.pageControl.currentPage = self.imageNameList.count;
/// 當(dāng)UIScrollView滑動到最后一位停止時排抬,將UIScrollView的偏移位置改變
} else if (scrollView.contentOffset.x == (self.imageNameList.count + 1)* kScreenWidth) {
scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
self.pageControl.currentPage = 0;
} else {
self.pageControl.currentPage = scrollView.contentOffset.x / kScreenWidth - 1;
}
}
ok畜埋,原理其實就是這樣。在首尾多加兩張圖片當(dāng)做占位符悠鞍,然后當(dāng)UIScrollView滑動到占位符的位置時模燥,改變UIScrollView的偏移量,簡單且方便蔫骂。下面就是全部代碼:
#import "ViewController.h"
#define kScreenWidth [UIScreen mainScreen].bounds.size.width
@interface ViewController () <UIScrollViewDelegate>
/// 滑動控制器
@property (nonatomic, strong) UIScrollView *scrollView;
/// 圖片數(shù)組
@property (nonatomic, strong) NSArray<NSString *> *imageNameList;
/// 頁碼控制器
@property (nonatomic, strong) UIPageControl *pageControl;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 設(shè)置圖片名的數(shù)組
self.imageNameList = @[@"image0", @"image1", @"image2", @"image3"];
// 添加圖片
[self setupImage];
}
/// 將圖片放置在UIScrollView上
-(void)setupImage {
/// 在UIScrollView的最前面添加一張圖片
UIImageView *firstImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, self.scrollView.frame.size.height)];
/// 圖片名是最后一張圖片
firstImageView.image = [UIImage imageNamed:self.imageNameList.lastObject];
[self.scrollView addSubview:firstImageView];
/// 添加圖片
for (NSInteger index = 0; index < self.imageNameList.count; index ++) {
/// UIScrollView上的每一張圖片
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake((index + 1) * kScreenWidth, 0, kScreenWidth, self.scrollView.frame.size.height)];
imageView.image = [UIImage imageNamed:self.imageNameList[index]];
[self.scrollView addSubview:imageView];
self.scrollView.contentSize = CGSizeMake((index + 2) * self.scrollView.bounds.size.width, 0);
}
/// 在UIScrollView的最后面添加一張圖片
UIImageView *lastImageView = [[UIImageView alloc] initWithFrame:CGRectMake((self.imageNameList.count + 1) * kScreenWidth, 0, kScreenWidth, self.scrollView.frame.size.height)];
/// 圖片名是第一張圖片
lastImageView.image = [UIImage imageNamed:self.imageNameList.firstObject];
[self.scrollView addSubview:lastImageView];
/// 設(shè)置UIScrollView的偏移量
self.scrollView.contentSize = CGSizeMake((self.imageNameList.count + 2) * self.scrollView.bounds.size.width, 0);
/// 設(shè)置UIScrollView的起始偏移距離(將第一張圖片跳過)
self.scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
/// 圖片總數(shù)
self.pageControl.numberOfPages = self.imageNameList.count;
self.pageControl.currentPage = 0;
}
#pragma mark - UIScrollViewDelegate
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
/// 當(dāng)UIScrollView滑動到第一位停止時浩嫌,將UIScrollView的偏移位置改變
if (scrollView.contentOffset.x == 0) {
scrollView.contentOffset = CGPointMake(self.imageNameList.count * kScreenWidth, 0);
self.pageControl.currentPage = self.imageNameList.count;
/// 當(dāng)UIScrollView滑動到最后一位停止時补胚,將UIScrollView的偏移位置改變
} else if (scrollView.contentOffset.x == (self.imageNameList.count + 1)* kScreenWidth) {
scrollView.contentOffset = CGPointMake(kScreenWidth, 0);
self.pageControl.currentPage = 0;
} else {
self.pageControl.currentPage = scrollView.contentOffset.x / kScreenWidth - 1;
}
}
#pragma mark - Get方法
-(UIScrollView *)scrollView {
if (!_scrollView) {
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 200)];
_scrollView.pagingEnabled = YES;
_scrollView.clipsToBounds = NO;
_scrollView.scrollEnabled = YES;
_scrollView.delegate = self;
_scrollView.bounces = NO;
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.showsVerticalScrollIndicator = NO;
[self.view addSubview:_scrollView];
}
return _scrollView;
}
-(UIPageControl *)pageControl {
if (!_pageControl) {
_pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 150, kScreenWidth, 50)];
_pageControl.userInteractionEnabled = NO;
_pageControl.pageIndicatorTintColor = [UIColor blackColor];
_pageControl.currentPageIndicatorTintColor = [UIColor grayColor];
[self.view addSubview:_pageControl];
}
return _pageControl;
}
@end
好了溶其,如果大家使用的是swift語言,還可以參考這篇文章:http://www.reibang.com/p/0ba33e59a784