上一篇博客介绍了如何将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 实现图片轮播的效果的更多相关文章

  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声明变量并赋值

    declare @studentid int //声明一个int型变量 );//设置变量值,tclass 为任意表,classid 为表中任一字段 if(@studentid is not null) ...

  2. 快速原型设计工具-Axure RP的介绍及简单使用(生产初期向客户展示设计产品的原型-也就是展示产品)

    啧啧~~ 给大家介绍一款超棒的原型设计工具--美国Axure Software Solution公司旗舰产品Axure RP 这款工具通俗的说呢,就是在项目整体需求考察后对整体设计一个简要性概括!设计 ...

  3. status bar、navigationBar、tableView吸顶view设置

    1. 隐藏navigationBar self.navigationController.navigationBar.hidden = YES; 2. status bar设置 -(void)view ...

  4. Method Swizzling

    学习博客: http://www.cocoachina.com/ios/20160121/15076.html (这个作者太牛了,写了我一直想知道的类簇的swizz方法) 一. 一般的swizz 先给 ...

  5. WindowsService 安装 cmd

    步骤: 1.运行--〉cmd:打开cmd命令框 2.在命令行里定位到InstallUtil.exe所在的位置 InstallUtil.exe 默认的安装位置是在C:/Windows/Microsoft ...

  6. Warning: simplexml_load_string(): Entity: line 432: parser error : EntityRef: expecting ';'

    Warning: simplexml_load_string(): Entity: line 432: parser error : EntityRef: expecting ';' characte ...

  7. Java web学习filter (1)

    一.概念:Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源: 例如Jsp, Servlet, 静态图片文件 ...

  8. nuget github host

    191.236.146.247 www.nuget.org191.236.146.247 nuget.org 192.30.253.112 github.com192.30.253.113 githu ...

  9. http://www.cnblogs.com/Lawson/archive/2012/09/03/2669122.html

    http://www.cnblogs.com/Lawson/archive/2012/09/03/2669122.html

  10. LeetCode Add Strings

    原题链接在这里:https://leetcode.com/problems/add-strings/ 题目: Given two non-negative numbers num1 and num2  ...