IOS开发之UIScrollView实现图片轮播器的无限滚动

2024-02-06 11:30:03 55

IOS开发之UIScrollView实现图片轮播器的无限滚动

简介

在现在的一些App中常常见到图片轮播器，一般用于展示广告、新闻等数据，在iOS内并没有现成的控件直接实现这种功能，但是通过UIScrollView的允许分页设置，可以实现滚动轮播的功能。

轮播原理

UIScrollView对象有pagingEnable成员，如果设置为YES，那么每一个scrollView尺寸这么大的区域就会被当作一页，在滚动时会根据滚动的比例自动计算应该切换到哪一页。

无限滚动原理

要实现无限滚动，需要额外的两张图片，假设我们的图片有五张，存在images数组中，那么我们在将图片插入到scrollView中时，在第一张图片前面插入一个最后一张图片作为辅助图片，在最后一张后面插入一个第一张图片作为辅助图片。这样，当滚动到第一张前面一张时，在页面切换结束后无动画的切换scrollView的偏移量为最后一张图片（不包含最后一张后面的第一张那个辅助图片），这样就实现了由辅助图片到真实图片的过渡，之所以设置辅助图片是为了在滚动中看到那个真实图片。同理，当滚动到最后一张的后面一张时，我们吧scrollView的偏移量设置为第一张图片即可。

具体的代码实现

这个代码是在开发一个项目中所写的，已经封装称一个View，只需要调用initWithFrame指定轮播器尺寸，然后通过设置images成员的值即可实现无限滚动的轮播。

//.h
//
//ESPicPageView.h
//享技
//
//Createdby11on11/30/15.
//Copyright©2015soulghost.Allrightsreserved.
//

#import

@interfaceESPicPageView:UIView

@property(nonatomic,strong)NSArray*images;

@end
//--------------------------------------------
//.m
//
//ESPicPageView.m
//享技
//
//Createdby11on11/30/15.
//Copyright©2015soulghost.Allrightsreserved.
//

#import"ESPicPageView.h"
#import"UIImageView+WebCache.h"

@interfaceESPicPageView()

@property(nonatomic,weak)UIScrollView*scrollView;
@property(nonatomic,weak)UIPageControl*pageControl;
@property(nonatomic,assign)CGFloatimgW;
@property(nonatomic,assign)CGFloatimgH;
@property(nonatomic,strong)NSTimer*timer;
@property(nonatomic,strong)NSArray*imageViews;
@property(nonatomic,assign)NSIntegerimageCount;

@end

@implementationESPicPageView

-(instancetype)initWithFrame:(CGRect)frame{

if(self=[superinitWithFrame:frame]){

self.backgroundColor=[UIColorblueColor];
UIScrollView*scrollView=[[UIScrollViewalloc]init];
self.scrollView=scrollView;
self.scrollView.delegate=self;
self.scrollView.pagingEnabled=YES;
self.scrollView.showsHorizontalScrollIndicator=NO;
self.scrollView.backgroundColor=[UIColorwhiteColor];
[selfaddSubview:scrollView];
self.imgW=frame.size.width;
self.imgH=frame.size.height;
[selfsetNeedsLayout];

UIPageControl*pageControl=[[UIPageControlalloc]initWithFrame:CGRectMake(frame.size.width-50,frame.size.height-10,0,0)];
self.pageControl=pageControl;
self.pageControl.numberOfPages=1;
[selfaddSubview:pageControl];

self.timer=[NSTimerscheduledTimerWithTimeInterval:2.0target:selfselector:@selector(nextImage)userInfo:nilrepeats:YES];
[[NSRunLoopcurrentRunLoop]addTimer:self.timerforMode:NSRunLoopCommonModes];

}

returnself;

}

-(void)nextImage{
NSIntegerpage=self.pageControl.currentPage;
page=self.pageControl.currentPage+1;
CGPointoffset=CGPointMake((1+page)*self.imgW,0);
[self.scrollViewsetContentOffset:offsetanimated:YES];
}

-(void)setupImageViews{

for(inti=0;i
以上就是使用UIScrollView实现图片的轮播的功能，如有疑问大家可以留言，也可以到本站社区留言讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

IOS开发之UIScrollView实现图片轮播器的无限滚动

热门推荐

随机推荐