初学了UIScrollView的分页的功能,只能说iOS中UIScrollView这玩意儿功能太强了,除了有相似于android中的scrollview的功能,还有Viewpager的功能,好比作app引导页、图片轮播器等,android中通常用viewpager来作,iOS却能够用UIScrollView来作,并且实现起来比android要简单。android
封装后的好处就是,在ViewController中只须要建立一个自定义的View对象,设置好尺寸图片以及相应的颜色并把她添加到父控件中,就能正常使用了。。也就是说,要把UIScrollView和UIPageControl的初始化、设置数据,分页,设置属性等等相应的操做都在我自定义的View类中进行。在头文件中提供一些接口供外部去使用,而不暴露内部实现。app
仍是和以前同样,建立好xib文件,自定义的view类,在xib中放UIScrollView和UIPageControl,修改xib中的View的class,定义属性、构造方法,重写setter方法,监听UIScrollView的滚动。。。。balabala
ide
XXPageView.hoop
// // XXPageView.h // UIScrollView的简单封装 // // Created by Daniel on 16/3/6. // Copyright © 2016年 Daniel. All rights reserved. // #import <UIKit/UIKit.h> @interface XXPageView : UIView + (instancetype)pageView; /** 图片名字 */ @property(nonatomic, strong) NSArray *imageNames; /** UIPageControl当前圆点的颜色 */ @property(nonatomic, strong) UIColor *currentColor; /** UIPageControl其余圆点的颜色 */ @property(nonatomic, strong) UIColor *otherColor; @end
XXPageView.m优化
// // XXPageView.m // UIScrollView的简单封装 // // Created by Daniel on 16/3/6. // Copyright © 2016年 Daniel. All rights reserved. // #import "XXPageView.h" @interface XXPageView() <UIScrollViewDelegate> /** 这里的属性 以及scrollview的代理我都是用拖线的方式来的 */ @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; @property (weak, nonatomic) IBOutlet UIPageControl *pageControl; @end @implementation XXPageView + (instancetype)pageView { //加载xib return [[[NSBundle mainBundle]loadNibNamed:NSStringFromClass(self) owner:nil options:nil]lastObject]; } - (void)layoutSubviews { [super layoutSubviews]; //这些设置尺寸应该能够用autoLayout来搞吧,如今还不会用autoLayout,后面再来优化 // 设置scrollView的frame self.scrollView.frame = self.bounds; // 得到scrollview的尺寸 CGFloat scrollW = self.scrollView.frame.size.width; CGFloat scrollH = self.scrollView.frame.size.height; // 设置pageControl CGFloat pageW = 100; CGFloat pageH = 20; CGFloat pageX = scrollW - pageW; CGFloat pageY = scrollH - pageH; self.pageControl.frame = CGRectMake(pageX, pageY, pageW, pageH); // 设置内容大小 self.scrollView.contentSize = CGSizeMake(self.imageNames.count * scrollW, 0); // 设置全部imageView的frame for (int i = 0; i<self.scrollView.subviews.count; i++) { UIImageView *imageView = self.scrollView.subviews[i]; imageView.frame = CGRectMake(i * scrollW, 0, scrollW, scrollH); } } #pragma mark - setter方法重写 - (void)setImageNames:(NSArray *)imageNames { _imageNames = imageNames; //先移除以前全部的imageview //makeObjectsPerformSelector 让全部的objects都执行某个方法 [self.scrollView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)]; //根据图片名建立对应的imageView并添加到UIScrollView中 for (int i = 0; i < imageNames.count; i++) { UIImageView *imageView = [[UIImageView alloc]init]; imageView.image = [UIImage imageNamed:imageNames[i]]; [self.scrollView addSubview:imageView]; } //开启分页功能,也能够在xib中设置 //self.scrollView.pagingEnabled = YES; //设置总页数 self.pageControl.numberOfPages = imageNames.count; //当只有一个控件时隐藏pageControl //这句代码也能够在xib文件中设置 //self.pageControl.hidesForSinglePage = YES; //这种方法也能够 //self.pageControl.hidden = imageNames.count <=1; } /** 设置当前圆点的颜色 */ -(void)setCurrentColor:(UIColor *)currentColor { _currentColor = currentColor; self.pageControl.currentPageIndicatorTintColor = currentColor; } /** 设置其余圆点的颜色 */ - (void)setOtherColor:(UIColor *)otherColor { _otherColor = otherColor; self.pageControl.pageIndicatorTintColor = otherColor; } #pragma mark - <UIScrollViewDelegate> - (void)scrollViewDidScroll:(UIScrollView *)scrollView { self.pageControl.currentPage = (int)(scrollView.contentOffset.x / scrollView.frame.size.width + 0.5); } @end
<补充start>atom
这种图片轮播通常都是能够拖拽滑动,也能够定时滑动的,如今给她加一个定时器,仍是监听UIScrollView的滚动,对scrollViewWillBeginDragging方法和scrollViewDidEndDragging方法重写,去控制定时器的开关,定时器中间隔多长时间后执行跳转到下一页的方法便可。spa
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView { [self stopTimer]; } -(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { [self startTimer]; } #pragma mark - 定时器控制 -(void)startTimer { //建立一个定时器 self.timer = [NSTimer scheduledTimerWithTimeInterval:1.5 target:self selector:@selector(nextPage) userInfo:nil repeats:YES]; //解决当同界面的其余控件滚动时,定时器失效的问题 [[NSRunLoop mainRunLoop]addTimer:self.timer forMode:NSRunLoopCommonModes]; } -(void)stopTimer { [self.timer invalidate]; self.timer = nil; } //滚动到下一页 -(void)nextPage { NSInteger page = self.pageControl.currentPage + 1; if(page == self.pageControl.numberOfPages) { page = 0; } CGPoint offset = self.scrollView.contentOffset; offset.x = page * self.scrollView.frame.size.width; [self.scrollView setContentOffset:offset animated:YES]; }
还有,加载xib的方式中,xib或者storyboard中的控价建立完以后,会调用awakeFromNib这个方法,因此初始化完以后在该方法中开启定时器便可。代理
/** 当控件从xib\storyboard中建立完毕时,就会调用这个方法,建立完毕后的初始化操做,在这个方法中执行 */ - (void)awakeFromNib { [self setup]; } /** 初始化代码 */ - (void)setup { // 开启定时器 [self startTimer]; }
<补充end>
code
XXPageView.xiborm
也能够在代码中设置
设置XXPageView为UIScrollView的代理
最后在ViewController中调用
// // ViewController.m // UIScrollView分页控件的简单封装 // // Created by Daniel on 16/3/6. // Copyright © 2016年 Daniel. All rights reserved. // #import "ViewController.h" #import "XXPageView.h" @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //直接建立一个XXPageView XXPageView *pageView = [XXPageView pageView]; //设置frame pageView.frame = CGRectMake(37, 50, 300, 200); //设置图片内容 pageView.imageNames = @[@"img_00", @"img_01", @"img_02",@"img_03",@"img_04"]; //设置pageControl相应的颜色 pageView.currentColor = [UIColor orangeColor]; pageView.otherColor = [UIColor grayColor]; [self.view addSubview:pageView]; } @end
效果图:
咦,为啥pageControl在右下角啊?我在xib中设置的是居中啊,妈蛋。。。