UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果
上一篇博客介绍了如何将XCode创立的项目提交到Git版本控制,这次就直接做一个图片轮播的展示demo,刚好可以把UIScrollView、UIPageControl、UIImageView这三个控件讲解分析一下。先上效果,这样比较直观。
从图中可以看到这个界面是由UIImageView 和 UITableView 组合而成。在这里UITableView的内容不作为本次讲解的重点,如果对UITableView的使用有疑问的,可以留言给我。下面就进入正题,在头文件创建几个变量。
- @interface ScrollImageViewController : UIViewController<UIScrollViewDelegate>
- {
- BOOL isFromStart;
- }
- @property(nonatomic, strong)UIScrollView *scrollView; //声明一个UIScrollView
- @property(nonatomic, strong)UIPageControl *pageControl; //声明一个UIPageControl
- @property(nonatomic, strong)NSArray *arrayImages; //存放图片的数组
- @property(nonatomic, strong)NSMutableArray *viewController; //存放UIViewController的可变数组
- @end
下面在.m文件中创建这些声明变量
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- // Do any additional setup after loading the view.
- self.arrayImages = [NSArray arrayWithObjects:[UIImage imageNamed:@"3201.jpg"],[UIImage imageNamed:@"3202.jpg"],[UIImage imageNamed:@"3203.jpg"],[UIImage imageNamed:@"3204.jpg"], nil];
- _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(, , self.view.frame.size.width,ImageHeight)];
- [_scrollView setPagingEnabled:YES];
- _scrollView.showsHorizontalScrollIndicator = NO;
- _scrollView.showsVerticalScrollIndicator = NO;
- [_scrollView setDelegate:self];
- [_scrollView setBackgroundColor:[UIColor lightGrayColor]];
- //ContentSize 这个属性对于UIScrollView挺关键的,取决于是否滚动。
- [_scrollView setContentSize:CGSizeMake(CGRectGetWidth(self.view.frame) * [self.arrayImages count], ImageHeight)];
- [self.view addSubview:_scrollView];
- _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(, self.scrollView.frame.size.height - , , )];
- [_pageControl setBackgroundColor:[UIColor blackColor]];
- _pageControl.currentPage = ;
- _pageControl.numberOfPages = [self.arrayImages count];
- [_pageControl addTarget:self action:@selector(chagePage:) forControlEvents:UIControlEventValueChanged];
- [self.view addSubview:_pageControl];
- _viewController = [[NSMutableArray alloc] init];
- ; i < [self.arrayImages count]; i++) {
- [_viewController addObject:[NSNull null]];
- }
- _timer = [NSTimer scheduledTimerWithTimeInterval: target:self selector:@selector(scrollPages) userInfo:nil repeats:YES];
- [self loadScrollViewPage:];
- [self loadScrollViewPage:];
- [self loadScrollViewPage:];
- [self loadScrollViewPage:];
- }
下面是实现loadScrollViewPage的方法,因为这里用到了定时器的自动滚动,所以在viewDidLoad里面把所有的图片都自动装载进去了。
- -(void)loadScrollViewPage:(NSInteger)page
- {
- if (page >= self.arrayImages.count) {
- return;
- }
- UIViewController *imageViewController = [self.viewController objectAtIndex:page];
- if ((NSNull *)imageViewController == [NSNull null])
- {
- imageViewController = [[UIViewController alloc] init];
- [self.viewController replaceObjectAtIndex:page withObject:imageViewController];
- }
- if (imageViewController.view.superview == nil) {
- CGRect frame = self.scrollView.frame;
- frame.origin.x = CGRectGetWidth(frame) * page;
- frame.origin.y = ;
- imageViewController.view.frame = frame;
- //[self addChildViewController:imageViewController];
- [self.scrollView addSubview:imageViewController.view];
- [imageViewController didMoveToParentViewController:self];
- [imageViewController.view setBackgroundColor:[UIColor colorWithPatternImage:(UIImage *)[self.arrayImages objectAtIndex:page]]];
- }
- }
接下来的工作就是要实现UIScrollView的委托方法,实现横向滚动来切换到下一图片,以及UIPageControl 切换图片的方法,先看看scrollViewDidEndDecelerating的方法声明吧。
- -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
- {
- CGFloat pageWidth = CGRectGetWidth(self.scrollView.frame);
- NSInteger page = floor((self.scrollView.contentOffset.x -pageWidth/)/pageWidth) +;
- self.pageControl.currentPage = page;
- [self loadScrollViewPage:page-];
- [self loadScrollViewPage:page];
- [self loadScrollViewPage:page+];
- }
然后就是UIPageControl的changePage 方法。
- - (IBAction)changePage:(id)sender
- {
- NSInteger page = self.pageControl.currentPage;
- [self loadScrollViewPage:page - ];
- [self loadScrollViewPage:page];
- [self loadScrollViewPage:page + ];
- CGRect bounds = self.scrollView.bounds;
- bounds.origin.x = CGRectGetWidth(bounds) * page;
- bounds.origin.y = ;
- [self.scrollView scrollRectToVisible:bounds animated:YES];
- }
最后的任务就是要完成在viewDidLoad里面对NSTimer声明的切换图片的方法。
- -(void)scrollPages{
- ++self.pageControl.currentPage;
- CGFloat pageWidth = CGRectGetWidth(self.scrollView.frame);
- if (isFromStart) {
- [self.scrollView setContentOffset:CGPointMake(, ) animated:YES];
- self.pageControl.currentPage = ;
- }
- else
- {
- [self.scrollView setContentOffset:CGPointMake(pageWidth*self.pageControl.currentPage, self.scrollView.bounds.origin.y)];
- }
- ) {
- isFromStart = YES;
- }
- else
- {
- isFromStart = NO;
- }
- }
以上就是实现效果图中所需要的代码了。制作这个demo的时候参照了SDK里面的PageControl的代码,然后自己动手加工完成的。
参考文献:
https://developer.apple.com/library/ios/#samplecode/PageControl/Introduction/Intro.html
UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果的更多相关文章
- iOS开发UI篇—UIScrollView控件实现图片轮播
iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: #import "YYV ...
- 【转】 iOS开发UI篇—UIScrollView控件实现图片轮播
原文:http://www.cnblogs.com/wendingding/p/3763527.html iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 图片轮播展示效果-2D实现
图片的轮播展示效果如果使用2D实现,需要将3D中存在的近大远小效果使用图片的缩放呈现,因此需要存储和计算图片的位置同时还要计算存储图片的缩放信息.将所有图片的位置连线看作是一个椭圆,就可以根据图片的个 ...
- UIScrollView控件实现图片轮播
http://www.cnblogs.com/dyf520/p/3805297.html 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 1 ...
- 【原创smarty仿淘宝商品图片轮播+放大镜效果】
1.去掉图片集字段,字符串的多余字符 $goods_pic_display=$row[DISPLAY];$goods_pic_display1=str_replace('"', '', $g ...
- H5+CSS3做图片轮播滚动效果
HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...
- UIScrollView实现图片轮播器及其无限循环效果
图片轮播器: 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...
随机推荐
- SQL编码乱码解决方法
摘自 http://www.cnblogs.com/keke/archive/2011/08/05/2128557.html 使用SQL SERVER2005的时候常常遇到中文字符为乱码的情况,经过研 ...
- css引入方式
1.<style> body{} </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...
- [原创]LoadRunner 12.02 录制脚本时提示无Internet访问,如何解决?
在使用LoadRunner 12.02 进行录制脚本时提示无Internet访问,如下图: 翻译中文如下: 可以尝试以下方式解决:点击弹出框中的“Yes”即可. 若还是有问题,尝试以下方式: (1)L ...
- ASP.NET corrupt assembly “Could not load file or assembly App_Web_*
以下是从overFlow 复制过来的问题 I've read through many of the other questions posted on the same issue, but I s ...
- CDN技术详解
CDN,全称为Content DeliveryNetwork,中文意为"内容分发网络"".通过将网络内容发布到最靠近用户的『边缘节点』,使不同地区的用户在访问相同页面.图 ...
- HDOJ 1004 Let the Balloon Rise
Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...
- (转)SVN服务器搭建和使用(一)
Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...
- poj 2376 Cleaning Shifts
http://poj.org/problem?id=2376 Cleaning Shifts Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- SpringMVC之控制器的单例和多例管理
版权声明:本文为博主原创文章,未经博主允许不得转载. 在使用Spring3对控制器Controller进行bean管理时,如果要对控制器是否单例进行管理. 有两种方式配置多例模式: 1.springX ...
- JSP中文乱码总结
大家在JSP的开发过程中,经常出现中文乱码的问题,可能一至困扰着大家,现把JSP开发中遇到的中文乱码的问题及解决办法写出来供大家参考.首先了解一下Java中文问题的由来: Java的内核和class文 ...