上一篇博客介绍了如何将XCode创立的项目提交到Git版本控制,这次就直接做一个图片轮播的展示demo,刚好可以把UIScrollView、UIPageControl、UIImageView这三个控件讲解分析一下。先上效果,这样比较直观。

从图中可以看到这个界面是由UIImageView 和 UITableView 组合而成。在这里UITableView的内容不作为本次讲解的重点,如果对UITableView的使用有疑问的,可以留言给我。下面就进入正题,在头文件创建几个变量。

  1. @interface ScrollImageViewController : UIViewController<UIScrollViewDelegate>
  2. {
  3. BOOL isFromStart;
  4. }
  5.  
  6. @property(nonatomic, strong)UIScrollView *scrollView; //声明一个UIScrollView
  7. @property(nonatomic, strong)UIPageControl *pageControl; //声明一个UIPageControl
  8. @property(nonatomic, strong)NSArray *arrayImages; //存放图片的数组
  9. @property(nonatomic, strong)NSMutableArray *viewController; //存放UIViewController的可变数组
  10. @end

下面在.m文件中创建这些声明变量

  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. // Do any additional setup after loading the view.
  5.  
  6. self.arrayImages = [NSArray arrayWithObjects:[UIImage imageNamed:@"3201.jpg"],[UIImage imageNamed:@"3202.jpg"],[UIImage imageNamed:@"3203.jpg"],[UIImage imageNamed:@"3204.jpg"], nil];
  7.  
  8. _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(, , self.view.frame.size.width,ImageHeight)];
  9. [_scrollView setPagingEnabled:YES];
  10. _scrollView.showsHorizontalScrollIndicator = NO;
  11. _scrollView.showsVerticalScrollIndicator = NO;
  12. [_scrollView setDelegate:self];
  13. [_scrollView setBackgroundColor:[UIColor lightGrayColor]];
  14.  
  15. //ContentSize 这个属性对于UIScrollView挺关键的,取决于是否滚动。
  16. [_scrollView setContentSize:CGSizeMake(CGRectGetWidth(self.view.frame) * [self.arrayImages count], ImageHeight)];
  17. [self.view addSubview:_scrollView];
  18.  
  19. _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(, self.scrollView.frame.size.height - , , )];
  20. [_pageControl setBackgroundColor:[UIColor blackColor]];
  21.  
  22. _pageControl.currentPage = ;
  23. _pageControl.numberOfPages = [self.arrayImages count];
  24. [_pageControl addTarget:self action:@selector(chagePage:) forControlEvents:UIControlEventValueChanged];
  25. [self.view addSubview:_pageControl];
  26.  
  27. _viewController = [[NSMutableArray alloc] init];
  28.  
  29. ; i < [self.arrayImages count]; i++) {
  30. [_viewController addObject:[NSNull null]];
  31. }
  32.  
  33. _timer = [NSTimer scheduledTimerWithTimeInterval: target:self selector:@selector(scrollPages) userInfo:nil repeats:YES];
  34.  
  35. [self loadScrollViewPage:];
  36. [self loadScrollViewPage:];
  37. [self loadScrollViewPage:];
  38. [self loadScrollViewPage:];
  39. }

下面是实现loadScrollViewPage的方法,因为这里用到了定时器的自动滚动,所以在viewDidLoad里面把所有的图片都自动装载进去了。

  1. -(void)loadScrollViewPage:(NSInteger)page
  2. {
  3. if (page >= self.arrayImages.count) {
  4. return;
  5. }
  6.  
  7. UIViewController *imageViewController = [self.viewController objectAtIndex:page];
  8. if ((NSNull *)imageViewController == [NSNull null])
  9. {
  10. imageViewController = [[UIViewController alloc] init];
  11. [self.viewController replaceObjectAtIndex:page withObject:imageViewController];
  12. }
  13.  
  14. if (imageViewController.view.superview == nil) {
  15. CGRect frame = self.scrollView.frame;
  16. frame.origin.x = CGRectGetWidth(frame) * page;
  17. frame.origin.y = ;
  18. imageViewController.view.frame = frame;
  19.  
  20. //[self addChildViewController:imageViewController];
  21. [self.scrollView addSubview:imageViewController.view];
  22. [imageViewController didMoveToParentViewController:self];
  23.  
  24. [imageViewController.view setBackgroundColor:[UIColor colorWithPatternImage:(UIImage *)[self.arrayImages objectAtIndex:page]]];
  25. }
  26. }

接下来的工作就是要实现UIScrollView的委托方法,实现横向滚动来切换到下一图片,以及UIPageControl 切换图片的方法,先看看scrollViewDidEndDecelerating的方法声明吧。

  1. -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
  2. {
  3. CGFloat pageWidth = CGRectGetWidth(self.scrollView.frame);
  4. NSInteger page = floor((self.scrollView.contentOffset.x -pageWidth/)/pageWidth) +;
  5. self.pageControl.currentPage = page;
  6.  
  7. [self loadScrollViewPage:page-];
  8. [self loadScrollViewPage:page];
  9. [self loadScrollViewPage:page+];
  10. }

然后就是UIPageControl的changePage 方法。

  1. - (IBAction)changePage:(id)sender
  2. {
  3. NSInteger page = self.pageControl.currentPage;
  4.  
  5. [self loadScrollViewPage:page - ];
  6. [self loadScrollViewPage:page];
  7. [self loadScrollViewPage:page + ];
  8.  
  9. CGRect bounds = self.scrollView.bounds;
  10. bounds.origin.x = CGRectGetWidth(bounds) * page;
  11. bounds.origin.y = ;
  12. [self.scrollView scrollRectToVisible:bounds animated:YES];
  13. }

最后的任务就是要完成在viewDidLoad里面对NSTimer声明的切换图片的方法。

  1. -(void)scrollPages{
  2. ++self.pageControl.currentPage;
  3. CGFloat pageWidth = CGRectGetWidth(self.scrollView.frame);
  4. if (isFromStart) {
  5. [self.scrollView setContentOffset:CGPointMake(, ) animated:YES];
  6. self.pageControl.currentPage = ;
  7. }
  8. else
  9. {
  10. [self.scrollView setContentOffset:CGPointMake(pageWidth*self.pageControl.currentPage, self.scrollView.bounds.origin.y)];
  11.  
  12. }
  13. ) {
  14. isFromStart = YES;
  15. }
  16. else
  17. {
  18. isFromStart = NO;
  19. }
  20. }

以上就是实现效果图中所需要的代码了。制作这个demo的时候参照了SDK里面的PageControl的代码,然后自己动手加工完成的。

参考文献:

https://developer.apple.com/library/ios/#samplecode/PageControl/Introduction/Intro.html

UIScrollView,UIPageControl,UIImageView 实现图片轮播的效果的更多相关文章

  1. iOS开发UI篇—UIScrollView控件实现图片轮播

    iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: #import "YYV ...

  2. 【转】 iOS开发UI篇—UIScrollView控件实现图片轮播

    原文:http://www.cnblogs.com/wendingding/p/3763527.html iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 ...

  3. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  4. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 图片轮播展示效果-2D实现

    图片的轮播展示效果如果使用2D实现,需要将3D中存在的近大远小效果使用图片的缩放呈现,因此需要存储和计算图片的位置同时还要计算存储图片的缩放信息.将所有图片的位置连线看作是一个椭圆,就可以根据图片的个 ...

  6. UIScrollView控件实现图片轮播

    http://www.cnblogs.com/dyf520/p/3805297.html 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 ...

  7. 【原创smarty仿淘宝商品图片轮播+放大镜效果】

    1.去掉图片集字段,字符串的多余字符 $goods_pic_display=$row[DISPLAY];$goods_pic_display1=str_replace('"', '', $g ...

  8. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

  9. UIScrollView实现图片轮播器及其无限循环效果

    图片轮播器: 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" ...

随机推荐

  1. SQL编码乱码解决方法

    摘自 http://www.cnblogs.com/keke/archive/2011/08/05/2128557.html 使用SQL SERVER2005的时候常常遇到中文字符为乱码的情况,经过研 ...

  2. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  3. [原创]LoadRunner 12.02 录制脚本时提示无Internet访问,如何解决?

    在使用LoadRunner 12.02 进行录制脚本时提示无Internet访问,如下图: 翻译中文如下: 可以尝试以下方式解决:点击弹出框中的“Yes”即可. 若还是有问题,尝试以下方式: (1)L ...

  4. 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 ...

  5. CDN技术详解

    CDN,全称为Content DeliveryNetwork,中文意为"内容分发网络"".通过将网络内容发布到最靠近用户的『边缘节点』,使不同地区的用户在访问相同页面.图 ...

  6. HDOJ 1004 Let the Balloon Rise

    Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...

  7. (转)SVN服务器搭建和使用(一)

    Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上了,下载地址: http:// ...

  8. poj 2376 Cleaning Shifts

    http://poj.org/problem?id=2376 Cleaning Shifts Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  9. SpringMVC之控制器的单例和多例管理

    版权声明:本文为博主原创文章,未经博主允许不得转载. 在使用Spring3对控制器Controller进行bean管理时,如果要对控制器是否单例进行管理. 有两种方式配置多例模式: 1.springX ...

  10. JSP中文乱码总结

    大家在JSP的开发过程中,经常出现中文乱码的问题,可能一至困扰着大家,现把JSP开发中遇到的中文乱码的问题及解决办法写出来供大家参考.首先了解一下Java中文问题的由来: Java的内核和class文 ...