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" ...
随机推荐
- java中类继承,到底继承了什么?
继承的最大好处就是为了实现代码的复用.那么,子类到底从父类得到的什么呢? 实例成员 父类的private成员不会被子类继承,子类不能访问.但是子类对象的确包含父类的私有成员. 父类的 包访问成员 继承 ...
- TortoiseGit安装详解
一:写该文章目的 最近换了一份新工作,新公司的源码管理都是使用GIT,习惯了之前的TFS和SVN进行项目源码管理和团队开发,第一次使用GIT进行团队开发和源码管理,颇有一些不习惯,花了一天时间终于把G ...
- 升级win8.1后mysql服务不能启动的问题
升级win8.1后发现服务列表中MySQL55不见了. 1. 先把服务恢复. mysql没有看到maitenance,找到安装文件 mysql-installer-community-5.6.12.0 ...
- JMeter学习-022-JMeter 分布式测试(性能测试大并发、远程启动解决方案)
在使用 JMeter 进行性能测试时,难免遇到要求并发请求数比较的场景,此时单台测试机的配置(CPU.内存.带宽等)可能无法支持此性能测试场景.因而,此时 JMeter 提供的分布式测试功能就有了用武 ...
- flex布局
一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...
- 运行maven项目
- Android 2D Graphics学习 Region和Canvas裁剪
1.首先介绍Region类 Region,中文意思即区域的意思,它表示的是canvas图层上的某一块封闭的区域. /**构造方法*/ public Region() //创建一个空的区域 publi ...
- Docker入门简介
Docker的概念 什么是Docker? Docker是一个开源平台,包含:容器引擎和Docker Hub注册服务器 Docker容器引擎:可以将开发者打包他们的应用和依赖包到一个可一直的容器中,然后 ...
- ADC 转换序列暂时难理解
通常情况下,core文件会包含了程序运行时的内存,寄存器状态,堆栈指针,内存管理信息还有各种函数调用堆栈信息等,我们可以理解为是程序工作当前状态存储生成第一个文件,程序出错的时候理论上都会产生一个co ...
- SQLServer针对排名函数ROWNUMBER()、RANK()、DENSE_RANK()、NTILE的研究!~
相信大家在软件工程中经常会遇到对某些数据进行排名的问题,尤其是对于电子商务的HR来说“大手笔”是非常具有潜在价值的!~至于都有哪些价值这个超出本文的范畴不予进行说明,但是不得不说的是每一个精明的HR以 ...