iOS开发-图片查看(ScrollView+UIPageControl)
2024-09-01 07:19:30
上周没事写了一个简单的图片查看,上次的查看只用到了一个UIImageView,不断的替换背景图片,实现图片之间的切换。通过ScrollView可以很简单的是实现图片之间的查看,设置setPagingEnabled通过坐标,宽度的设置,可以简单实现一个图片的简单分页查看显示,当然如果你有需求说需要进行所谓的无限循环,在开始和结束的时候的设置一下事件,常用的新闻客户端,图片新闻查看的时候很少有进行最后的时候跳到第一页,一般都是最后的时候都是推荐相关内容,多说了两句,开始吧:
ScrollView图片分页
控件跟上篇文章一样,就是ScrollView:
拖入三张图片到项目中,之前的文章有演示,下次写博客的考虑换图,初始化ScrollView:
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的宽度和高度,也就是上一张图片展示的宽度和高度,设置周围的边界:
[self.scrollView setBounces:NO];
设置水平方向的滚动条:
[self.scrollView setShowsHorizontalScrollIndicator:NO];
设置ScrollView的总体的宽度(关键):
[self.scrollView setContentSize:CGSizeMake([imageArr count]*width, height)];
设置分页:
[self.scrollView setPagingEnabled:YES];
演示效果:
UIPageControl和ScrollView图片分页
UIPageControl如果稍微弄过点前端可以理解为焦点图,大概通过指示,iOS中是小圆点,Android需要美工给自己切图或者说自力更生,iOS相对来说还是比较人性的,先定义一个UIPageControl:
@property (nonatomic,strong) UIPageControl *pageControl;
初始化UIPageControl设置大小和位置:
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)];
设置当前页和页大小:
self.pageControl.numberOfPages=[imageArr count];
self.pageControl.currentPage=0;
设置当前指示和其他指示:
[self.pageControl setCurrentPageIndicatorTintColor:[UIColor greenColor]]; [self.pageControl setPageIndicatorTintColor:[UIColor yellowColor]];
设置滑动的时候改变UIPageControl和通过UIPageControl改变ScrollView:
[_scrollView setDelegate:self];
[self.pageControl addTarget:self action:@selector(switchPage:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:_pageControl];
滑动的时候改变UIPageControl指示通过委托设置,具体可参考上篇文章:
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
NSInteger currentPage=scrollView.contentOffset.x/self.view.bounds.size.width;
[self.pageControl setCurrentPage:currentPage];
}
UIPageControl改变ScrollView:
- (void)switchPage:(id)sender{
UIPageControl *currentControl=(UIPageControl *)sender;
NSInteger currentPage=currentControl.currentPage;
[_scrollView setContentOffset:CGPointMake(currentPage*self.view.bounds.size.width, 0)] ;
}
看下具体的效果:
最新文章
- C#学习笔记-KeyDown、KeyPress、KeyUp事件以及KeyCode、KeyData、KeyValue、KeyChar属性
- 密码备忘录(Android) 开发笔记
- RabbitMQ的几种典型使用场景
- C语言拾遗
- Atitit&#160;发帖机实现(2)---usrQBN2243 文本解析到对象协议规范
- 系统配置 之:远程桌面连接(win7系统)
- C#(Winform) Http 发送数据
- ElasticSearch安装部署
- 封装的多功能多效果的RecyclerView
- 【索引】Android相关的
- 卷积神经网络在tenserflow的实现
- 【科普】什么是TLS1.3
- css3制作网页中常见的小箭头
- matlab——之class类(详细总结)
- (后端)Sql Server日期查询-SQL查询今天、昨天、7天内、30天(转)
- Jedis简介
- Jmeter入门--关联
- SQL语句——入门级
- Report: Disappearing Wetlands Put Planet Life at Risk
- SqlConnection 无法设置连接超时