在使用某寶或某東購物的時候,我們會在其首頁看到一個可以滑動的版塊,這個版塊的實現就是一個UIScrollView.在我們使用UIScrollView的時候會發現,滑動到最后的時候,UIScrollView不能像上面說的版塊那樣又回到最初的地方.基于此,做了一個小Demo來實現UIScrollView的無限循環滑動.
小小思路:UIScrollView具有分頁屬性,要實現UIScrollView的無限循環滑動,我們不能生硬暴力的給一個數組按規律的,無限的添加圖片,這樣手機內存還不爆炸 0.0 , 如何用最少的頁面實現無限循環呢? 三個,其實只需要三個頁面就可以實現UIScrollView的無限循環滑動.左丶中丶右 三個頁面.剛進入程序時,左邊放最后一張圖片,中間第一張圖片,右邊放第二張.向左滑動一張圖片,左邊變成了第一張圖片,中間是第二張,右邊則變成了第三張圖片.依此便可實現UIScrollView的無限循環滑動了.
Demo 如下 :
.h文件
聲明一個數組來接收外部傳入的圖片
@interface MyScrollView: UIView <UIScrollViewDelegate>
@property(nonatomic, strong)NSArray *dataArr;
@end
.m文件
實現無線循環滑動
#define kPageCtrlHeight 37 //UIPageControl的高度
@interface MyScrollView ()
{
UIImageView *leftView;
UIImageView *centerView;
UIImageView *rightView;
UIScrollView *scrollView;
UIPageControl *pageCtrl; // 頁面控制器 ...
NSInteger currentPageNumber;
}
@end
@implementation MyScrollView
/*----------------始終只有左,中,右3個imgView,將數據源加入到這3個imgView中顯示--------------------------*/
- (instancetype)init
{
return [self initWithFrame:[UIScreen mainScreen].bounds];
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self createUI:frame];
}
return self;
}
-(void)createUI:(CGRect)frame
{
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height - kPageCtrlHeight)];
scrollView.delegate = self;
scrollView.pagingEnabled = YES;
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
pageCtrl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, frame.size.height - kPageCtrlHeight, frame.size.width, kPageCtrlHeight)];
pageCtrl.backgroundColor = [UIColor lightGrayColor];
[self addSubview:scrollView];
[self addSubview:pageCtrl];
leftView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
centerView = [[UIImageView alloc] initWithFrame:CGRectMake(scrollView.frame.size.width, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
rightView = [[UIImageView alloc] initWithFrame:CGRectMake(scrollView.frame.size.width*2, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
[scrollView addSubview:leftView];
[scrollView addSubview:centerView];
[scrollView addSubview:rightView];
}
-(void)setDataArr:(NSArray *)dataArr
{
if (![dataArr isKindOfClass:[NSArray class]] || dataArr.count == 0) {
return;
}
_dataArr = dataArr;
[self setInitProperty];
}
-(void)setInitProperty
{
pageCtrl.numberOfPages = _dataArr.count; //總頁碼
//內容
scrollView.contentSize = CGSizeMake(_dataArr.count * scrollView.frame.size.width, scrollView.frame.size.height);
[scrollView setContentOffset:CGPointMake(scrollView.frame.size.width, 0)];//偏移位置,第一頁
currentPageNumber = 0;
[self loadPageContent];
}
-(void)loadPageContent
{
centerView.image = [UIImage imageNamed:_dataArr[currentPageNumber]];
NSInteger leftImgIndex = (currentPageNumber - 1 + _dataArr.count) % _dataArr.count;
leftView.image = [UIImage imageNamed:_dataArr[leftImgIndex]];
NSInteger rightImgIndex = (currentPageNumber + 1) % _dataArr.count;
rightView.image = [UIImage imageNamed:_dataArr[rightImgIndex]];
pageCtrl.currentPage = currentPageNumber;
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView_
{
if (scrollView.contentOffset.x > scrollView.bounds.size.width) { //向左滑動
currentPageNumber = (currentPageNumber + 1) % _dataArr.count;
}else if (scrollView.contentOffset.x < scrollView.bounds.size.width){ //向右滑動
currentPageNumber = (currentPageNumber - 1 + _dataArr.count) % _dataArr.count;
}
[self loadPageContent];
scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0);
}
@end
ViewController.m 文件:
對myScrollView初始化并
調用myScrollView中dataArr setter方法即可。
123.gif
