</pre>交代一下我做程序的工具:mac os x虚拟机10.9.3 Xcode6 百度^-^ 参考书iPhone30天精通:本程序是第13天+第14天的集合<p></p><p></p><p>这是参考书上的第13天的程序:书上的程序是为程序中的每一个视图控件页面指定一个小圆点,并使用白色的原点来显示当前页面,点击Page Control控件上面的小圆点来引导程序翻页。。。。但是,这种翻页手段是在是不方便,所以页面控制最好是滑动翻页,接下来就做一个滑动和点击小圆点都可以实现翻页(UIScrollView和UIPageControl)的demo。</p><p></p><p>参考:http://www.gowhich.com/blog/522</p><p><span style="font-size:18px;"><span style="font-size:12px;">参考:http://blog.csdn.net/a351945755/article/details/8290552</span></span></p><p><span style="font-size:18px;"><span style="font-size:12px;"><span style="font-size:12px;"><span style="font-size:18px;"><span style="font-size:12px;"><span style="font-size:18px;"><span style="font-size:12px;">参考:</span></span></span></span>http://www.cnblogs.com/wendingding/p/3754210.html</span></span></span></p><p><span style="background-color:rgb(255,255,255)"><span style="font-size:18px;"><span style="font-size:12px;"><span style="font-size:12px;"></span></span></span></span></p><pre class="brush:cpp;toolbar:false"><span style="color:#009900;"><span style="font-size:18px;"><span style="font-size:12px;">参考:</span></span>http://blog.sina.com.cn/s/blog_87a824440101a0p5.html</span>
创建一个简单的storyboard,在里面添加一个UIViewContoller,在view里面添加一个PageControl和一个ScrollView,并做链接。
//.h文件
@property (strong, nonatomic) IBOutlet UIScrollView *pageScroll;//创建一个滚屏控件的对象 @property (strong, nonatomic) IBOutlet UIPageControl *pageControl;//创建小圆点控件的对象
同时添加一个存储要展示图片的数组变量
@property (strong, nonatomic) NSArray *photoList; - (IBAction)changePage:(id)sender;//创建人机交互的方法,监听Page Control的value change事件
同时要加入
UIScrollViewDelegate
代理
基础工作做完之后,开始我们的过程实现
初始化的工作如下:
- (void)viewDidLoad//视图加载完成时调用的方法 { [super viewDidLoad];//默认语句 // Do any additional setup after loading the view. NSString *img1 = [[NSBundle mainBundle] pathForResource:@"bg_welcome1" ofType:@"png"]; NSString *img2 = [[NSBundle mainBundle] pathForResource:@"bg_welcome2" ofType:@"png"]; NSString *img3 = [[NSBundle mainBundle] pathForResource:@"bg_welcome3" ofType:@"png"]; //NSBundle其实是一个目录类,其中包含程序中会使用到的资源,比如图像、声音、编译好的代码、nib文件等。 //对于mainbandel:在Finder中,一个应用程序看上去和其他文件没什么区别,但是实际上它是一个包含了nib文件,编译代码,以及其他资源的一个目录,而我们把这个 目录叫做程序的mainbandel。所以[NSBundle mainBundle]就是获取本次project的目录,而“pathForResource:文件名 ofType:格式”方法就是获取相应的文件地址。 //综上:获取三个图片的地址,并赋值给三个字符串对象。 _photoList = [[NSArray alloc] initWithObjects: [UIImage imageWithContentsOfFile:img1], [UIImage imageWithContentsOfFile:img2], [UIImage imageWithContentsOfFile:img3], ,nil]; //“imageWithContentsOfFile:地址”方法是将地址所在图片加载到UIImage对象上,然后由这些对象组成一个数组。(前三个数组元素) //对于第四个数组元素,它调用程序本身的方法去得带一个数组元素,后面再去讲它。 //到现在为止,在视图加载完成的时候,会产生一个装有UIImage对象的数组。 NSInteger pageCount = [_photoList count];//创建了一个整形的对象,用来存储数组里面元素(图片)的数量。 _pageControl.currentPage = 0; //把第一个页面设置为当前页面 _pageControl.numberOfPages = pageCount; //设置一共有pageCount个页面 //下面的代码涉及到了OC里面的一种类型CGRect _pageScroll.frame = CGRectMake(0.0, //frame是该view在父view中的为止和大小。 0.0, //CGRectMake定义(x,y,width,height) 320.0, 400.0); _pageScroll.delegate = self; //设置UIScrollView的代理为其对象本身。 for(NSInteger i=0;i<pageCount;i++) //给每一个页面设置图片 { CGRect frame; //创建一个CGRect对象 frame.origin.x = _pageScroll.frame.size.width * i; frame.origin.y = 0; frame.size = _pageScroll.frame.size; //这段代码表示以前面的pageScroll的尺寸为模板,纵坐标不变,横坐标一次向右移动pageScroll的size,相当于以相同 //的大小,将这几个图片拼接起来,第一个图片的横纵坐标都是0,因为0*width = 0;//这里又出现了新的知识点:UIImageView的contentMode属性 //这个属性是用来设置图片的显示方式,如局中局右是否显示缩放等 参考:http://blog.csdn.net/sqc3375177/article/details/17415635 //UIViewContentModeScaleAspectFill作用是图片的比例保持不变,但是填充整个ImageView的内容可能会只显示部分,有部分显示不出来。 //因为前面对这些图片的操作只是从project里面以ImageView形式保存到数组里面,并没有对图片的大小做出规范,所以现在对UIImageView的frame做出规范,并且控 //制属性,满足图片比例的同时填充满UIImageView
UIImageView *pageView;
pageView.frame = frame;pageView.contentMode = UIViewContentModeScaleAspectFill;pageView = [[UIImageView alloc] initWithImage:[_photoList objectAtIndex:i]];//得到数组里面的图片对象(UIImageView对象的图片) [_pageScroll addSubview:pageView];//addSubview方法将UIImageView加到UIScrollView上面 }}-(void) viewWillAppear:(BOOL)animated //系统默认的方法,视图将要出现时调用的{ //下面的代码就是把UIScrollView的尺寸设置成几个UIImageView拼接成之后的尺寸 CGSize pageScrollViewSize = _pageScroll.frame.size; _pageScroll.contentSize = CGSizeMake(pageScrollViewSize.width * _photoList.count, pageScrollViewSize.height); //contentSize是UIScrollView可以滚动的区域。 //UIScrollView的大小实际就是frame的大小,上层固定不动,显示的变化,由下层的滚动来控制。而下层滚动的区域的大小,就是由contentSize来控制的了。 [super viewWillAppear]; }
监控PageControl的方法
- (IBAction)changePage:(id)sender { // 更新Scroll View到正确的页面 CGRect frame; frame.origin.x = _pageScroll.frame.size.width * _pageControl.currentPage;//_pageControl.currentPage = 0(前面定义的) frame.origin.y = 0; frame.size = _pageScroll.frame.size; [_pageScroll scrollRectToVisible:frame animated:YES];//这个方法是切换图片的话,就将图片切换到指定的frame,YES表示开启动画效果,就是切换的时候不那么生硬 }
视图滚动的方法
-(void) scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat pageWidth = _pageScroll.frame.size.width;//CGFloat就是CGRect的浮点型值 宽度 // 在滚动超过页面宽度的50%的时候,切换到新的页面 int page = floor((_pageScroll.contentOffset.x + pageWidth/2)/pageWidth) ;//floor是向下取整 _pageControl.currentPage = page; }
<span style="color:#6600CC;">// ViewController.h // 13 // // Created by 李迪 on 15-7-29. // Copyright (c) 2015年 李迪. All rights reserved. // #import <UIKit/UIKit.h> @interface ViewController : UIViewController<UIScrollViewDelegate> { IBOutlet UIPageControl *pageControl; IBOutlet UIScrollView *scrollView; } @property UIPageControl *pageControl; @property(strong,nonatomic) UIScrollView *scrollView; @property NSArray *photoArray; -(IBAction)pageChange;//这里的pageChange和上面的pageControl都是和UIPageControl相连的,这里可以连接两次,因为一个是属性,一个是方法 @end // ViewController.m // 13 // // Created by 李迪 on 15-7-29. // Copyright (c) 2015年 李迪. All rights reserved. /* 思路:通过storyboard和代码的结合,实现UIPageControl和UIScrollView两种翻页方式 就要创建IBOutlet形式的UIPageControl和UIScrollView对象,并且在storyboard添加这两个对象的控件(虽然程序里面设置了UISrollView的大小,但是在storyboard里面还是要将UISrollView空间调整到相应的大小的,否则跟代码编写的还是不符)</span>
将图片添加到工程中,随便添加到哪个文件夹下面都可以,将图片保存到数组中,通过数组对图片进行操作
<span style="color:#006600;"> 通过循环将数组里面的图片加到UIScrollView里面 逐个实现两种翻页的方法,一个是IBAction,一个是实现代理 具体的再看下面的代码 */ #import "ViewController.h" @interface ViewController () @end @implementation ViewController @synthesize photoArray,scrollView,pageControl; - (void)viewDidLoad { [super viewDidLoad]; scrollView.delegate =self; //设置scrollView的代理为self scrollView.pagingEnabled =YES; //pagingEnabled-scrollView的属性-判断是否启用整页翻动(默认为NO,这样滑动翻页的时候页面翻动的很慢,所以倾向与开启) scrollView.showsHorizontalScrollIndicator = NO; scrollView.showsVerticalScrollIndicator = NO; //这两个属性 显示水平滚动指示器 显示垂直滚动指示器 不关闭就会显示进度条 NSString *img1 = [[NSBundle mainBundle] pathForResource:@"11" ofType:@"png"]; NSString *img2 = [[NSBundle mainBundle] pathForResource:@"21" ofType:@"png"]; NSString *img3 = [[NSBundle mainBundle] pathForResource:@"31" ofType:@"png"]; NSString *img4 = [[NSBundle mainBundle] pathForResource:@"41" ofType:@"png"]; //将滑动用到的图片添加到文件夹内部后,用[[NSBundel mainBundel] pathForResource: ofType:]方法获取到图片的地址,然后赋值给字符串对象 photoArray = [NSArray arrayWithObjects: [UIImage imageWithContentsOfFile:img1], [UIImage imageWithContentsOfFile:img2], [UIImage imageWithContentsOfFile:img3], [UIImage imageWithContentsOfFile:img4],nil]; //用[UIImage imageWithContentsOfFile:string]方法,通过地址得到图像对象,将图像对象添加到photoArray数组里面,所以图像也是可以添加到数组里面的 //这里说一下,之前总是把UIImageView和UIImage搞混,UIImageView是视图控件,可以用它来存储UIImage(图像类)的对象 NSInteger pageCount = [photoArray count]; //将数组里的图片个数单独建立对象方便操作 pageControl.numberOfPages = pageCount; //设置UIPageControl的小白点个数(页数) pageControl.currentPage = 0; //设置当前页为第一页 scrollView.frame = CGRectMake(0, 0, 320, 443); //设置界面坐标和长宽(显示界面) scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * pageCount, 0);//设置范围 滑动插件的显示界面大小 和 可滑动大小是两个概念!显示界面大小是每一张图片的大小,而后面有滑动范围,就是所有的图片平铺在一起的大小 for (NSInteger i = 0; i<pageCount; i++) {//通过for循环来实现将每张图片添加到UIScrollView上面 CGRect frame; frame.origin.x = scrollView.frame.size.width * i; frame.origin.y = 0; frame.size = scrollView.frame.size; //通过循环实现每一张图片对应的frame的大小不变,横坐标改变的目的 UIImageView *imageDemo; imageDemo = [[UIImageView alloc] initWithImage:[photoArray objectAtIndex:i]]; //把对应的图片取出来给imageDemo,然后给imageDemo添加属性 imageDemo.contentMode = UIViewContentModeScaleAspectFill;//图片完全填充在imageDemo中 imageDemo.frame = frame; //对于UIImageView的属性、大小,一定要在UIImageView对象被赋值后才可以进行调整,否则就会出现显示的视图与目标视图不相符的情况。 [scrollView addSubview:imageDemo];//将imageDemo添加到UIScrollView视图上面 } } //UIPageControl方法实现翻页 -(IBAction)pageChange{ // CGRect frame; // frame.origin.y = 0; // frame.origin.x = self.scrollView.frame.size.width * pageControl.currentPage; // frame.size = self.scrollView.frame.size; // [self.scrollView scrollRectToVisible:frame animated:YES]; //上面注解里面的方法我的XCode运行后实现不了翻页,只能使用下面的方法代替 [scrollView setContentOffset:CGPointMake(self.scrollView.frame.size.width * pageControl.currentPage, 0) animated:YES]; //直接调用UIScrollView的setContentOffset(设置内容偏移,改变的是坐标) animated(动画)使偏移更流畅,而不显得生硬 } -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat pageWidth = self.scrollView.frame.size.width; //得到显示视图的宽度 int page = floor((self.scrollView.contentOffset.x + pageWidth/2)/pageWidth);//滑动超过视图的一半就触发翻页 pageControl.currentPage = page; //偏移的一种算法 } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end </span>
版权声明:本文为博主原创文章,未经博主允许不得转载。
原文地址:http://blog.csdn.net/v7595v/article/details/47147697