上周没事写了一个简单的图片查看，上次的查看只用到了一个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)] ;
}
|
看下具体的效果:
![]()
本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4242919.html，如需转载请自行联系原作者
