iOS开发-图片查看(ScrollView+UIPageControl)

上周没事写了一个简单的图片查看，上次的查看只用到了一个UIImageView，不断的替换背景图片，实现图片之间的切换。通过ScrollView可以很简单的是实现图片之间的查看，设置setPagingEnabled通过坐标，宽度的设置，可以简单实现一个图片的简单分页查看显示，当然如果你有需求说需要进行所谓的无限循环，在开始和结束的时候的设置一下事件，常用的新闻客户端，图片新闻查看的时候很少有进行最后的时候跳到第一页，一般都是最后的时候都是推荐相关内容，多说了两句，开始吧:

ScrollView图片分页

控件跟上篇文章一样，就是ScrollView：

拖入三张图片到项目中，之前的文章有演示，下次写博客的考虑换图,初始化ScrollView：

?

1 2 3 4 5 6 7 8 9 10

NSArray *imageArr=@[@"girl0.jpg",@"girl1.jpg",@"girl2.jpg"]; CGFloat width=self.scrollView.bounds.size.width; CGFloat height=self.scrollView.bounds.size.height; for (NSInteger i=0; i<[imageArr count]; i++) {       UIImage *image=[UIImage imageNamed:imageArr[i]];     UIImageView *imageView=[[UIImageView alloc] initWithImage:image];           [imageView setFrame:CGRectMake(i*width, 0, width, height)];     [_scrollView addSubview:imageView]; }

　这里没有写注释，稍微多说一句就是bounds是边界，可以理解为就是控件中的ScrollView的宽度和高度，也就是上一张图片展示的宽度和高度,设置周围的边界:

?

1	[self.scrollView setBounces:NO];

　设置水平方向的滚动条:

?

1	[self.scrollView setShowsHorizontalScrollIndicator:NO];

设置ScrollView的总体的宽度(关键)：

?

1	[self.scrollView setContentSize:CGSizeMake([imageArr count]*width, height)];

设置分页:

?

1	[self.scrollView setPagingEnabled:YES];

演示效果:

UIPageControl和ScrollView图片分页

UIPageControl如果稍微弄过点前端可以理解为焦点图，大概通过指示，iOS中是小圆点，Android需要美工给自己切图或者说自力更生，iOS相对来说还是比较人性的，先定义一个UIPageControl：

?

1	@property (nonatomic,strong) UIPageControl *pageControl;

 初始化UIPageControl设置大小和位置：

?

1 2 3 4 5

self.pageControl=[[UIPageControl alloc] init];   self.pageControl.backgroundColor=[UIColor clearColor];       [self.pageControl setBounds:CGRectMake(0, 0,200, 100)];   [self.pageControl setCenter:CGPointMake(width/2,height/2+200.0)];

　设置当前页和页大小:

?

1 2	self.pageControl.numberOfPages=[imageArr count];    self.pageControl.currentPage=0;

设置当前指示和其他指示:

?

1 2 3

[self.pageControl setCurrentPageIndicatorTintColor:[UIColor greenColor]];     [self.pageControl setPageIndicatorTintColor:[UIColor yellowColor]];

设置滑动的时候改变UIPageControl和通过UIPageControl改变ScrollView:

?

1 2 3

[_scrollView setDelegate:self]; [self.pageControl addTarget:self action:@selector(switchPage:) forControlEvents:UIControlEventValueChanged]; [self.view addSubview:_pageControl];

滑动的时候改变UIPageControl指示通过委托设置，具体可参考上篇文章:

?

1 2 3 4

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{     NSInteger currentPage=scrollView.contentOffset.x/self.view.bounds.size.width;     [self.pageControl setCurrentPage:currentPage]; }

UIPageControl改变ScrollView:

?

1 2 3 4 5

- (void)switchPage:(id)sender{     UIPageControl *currentControl=(UIPageControl *)sender;     NSInteger currentPage=currentControl.currentPage;     [_scrollView setContentOffset:CGPointMake(currentPage*self.view.bounds.size.width, 0)] ; }

　看下具体的效果: