UIScrollView和UIPageControl结合实现图片浏览

iOS中具有图片类的app通常都会有滑动浏览的功能，许多app第一次启动时，也会用UIScrollView+UIPageControl来展示新功能。今天探索一下如何实现该功能。

首先介绍下UIScrollView,UIScrollView中有个重要的属性是contentSize，用于界定滑动范围的大小。UIScrollView本身frame是我们在屏幕上可视部分，也就是说contentSize的宽要大于UIScrollView.frame.size.width才能实现滑动浏览的功能。

另外，图片浏览，为了避免一开始就load所有的UIImageView,可以选择仅仅load当前浏览页面及前后三个UIImageView。而这之外的page上的子视图我们都设置为[NSNullnull]。我们在检测到滑动后，再lazyload所需的UIImageView。

#import"ViewController.h"

@interfaceViewController()<UIScrollViewDelegate>

@property(nonatomic,strong)UIScrollView*scrollView;

@property(nonatomic,strong)UIPageControl*pageControl;

@property(nonatomic,strong)NSArray*pageImages;

@property(nonatomic,strong)NSMutableArray*pageViews;

-(void)loadVisiblePages;

-(void)loadPage:(NSInteger)page;

-(void)purgePage:(NSInteger)page;

@end

@implementationViewController

@synthesizescrollView;

@synthesizepageControl;

@synthesizepageImages;

@synthesizepageViews;

-(void)viewDidLoad{

[superviewDidLoad];

//1

pageImages=[NSArrayarrayWithObjects:[UIImageimageNamed:@"2.jpg"],

[UIImageimageNamed:@"5.jpg"],[UIImageimageNamed:@"2.jpg"],[UIImageimageNamed:@"5.jpg"],nil];

NSIntegerpageCount=pageImages.count;

pageViews=[[NSMutableArrayalloc]init];

for(NSIntegeri=0;i<pageCount;i++){

[self.pageViewsaddObject:[NSNullnull]];

}

//2

self.scrollView=[[UIScrollViewalloc]initWithFrame:CGRectMake(0,0,320,568)];

[self.viewaddSubview:scrollView];

scrollView.delegate=self;

self.pageControl=[[UIPageControlalloc]initWithFrame:CGRectMake(0,400,320,20)];

self.pageControl.currentPage=0;

[self.pageControlsetNumberOfPages:pageCount];

[pageControlsetBackgroundColor:[UIColorgrayColor]];

[self.viewaddSubview:pageControl];

}

-(void)viewDidAppear:(BOOL)animated{

[superviewDidAppear:animated];

CGSizepagesScrollViewSize=self.scrollView.frame.size;

self.scrollView.contentSize=CGSizeMake(pagesScrollViewSize.width*self.pageImages.count,pagesScrollViewSize.height);

[selfloadVisiblePages];

}

-(void)loadVisiblePages{

CGFloatpageWidth=scrollView.frame.size.width;

NSIntegerpage=(NSInteger)floor((self.scrollView.contentOffset.x*2.0f+pageWidth)/(pageWidth*2.0f));

pageControl.currentPage=page;

NSIntegerfirstPage=page-1;

NSIntegerlastPage=page+1;

//Pureanythingbeforethefirstpage

for(NSIntegeri=0;i<firstPage;i++){

[selfpurgePage:i];

}

//Loadpagesinourrange

for(NSIntegeri=firstPage;i<=lastPage;i++){

[selfloadPage:i];

}

//Purgeanythingafterlastpage

for(NSIntegeri=lastPage+1;i<self.pageImages.count;i++){

[selfpurgePage:i];

}

}

-(void)loadPage:(NSInteger)page{

if(page<0||page>=self.pageImages.count){

return;

}

UIView*pageView=[self.pageViewsobjectAtIndex:page];

if((NSNull*)pageView==[NSNullnull]){

CGRectframe=self.scrollView.bounds;

frame.origin.x=frame.size.width*page;

frame.origin.y=0.0f;

UIImageView*imageView=[[UIImageViewalloc]initWithImage:[self.pageImagesobjectAtIndex:page]];

imageView.contentMode=UIViewContentModeScaleAspectFit;

imageView.frame=frame;

[self.scrollViewaddSubview:imageView];

[self.pageViewsreplaceObjectAtIndex:pagewithObject:imageView];

}

}

-(void)purgePage:(NSInteger)page{

if(page<0||page>=self.pageImages.count){

//Ifit'soutsidetherangeofwhatyouhavetodisplay,thendonothing

return;

}

//Removeapagefromthescrollviewandresetthecontainerarray

UIView*pageView=[self.pageViewsobjectAtIndex:page];

if((NSNull*)pageView!=[NSNullnull]){

[pageViewremoveFromSuperview];

[self.pageViewsreplaceObjectAtIndex:pagewithObject:[NSNullnull]];

}

}

#pragmamark-ScrollViewdelegate

-(void)scrollViewDidScroll:(UIScrollView*)scrollView{

[selfloadVisiblePages];

}

几个注解：

-判断当前页面是第几个页面时，我们通过UIScrollView.contentOffset.x和pageWidth来判断，这里有一点数学上的运算。

-为了监测scrollView滑动的变化，设置scrollView的delegate，并且实现delegate中scrollViewDidScroll:方法。