UISCrollView —— 图片轮播器封装实现(三)——(第三讲)
1、分析
利用xib布局,然后自定义一个UIView,解析xib,然后利用控制器传入数据,将其加载到控制器的view上展示即可
2、 程序结构
3、 代码具体实现
1》 xib文件
2》 创建类 XMGPageView,然后将其与xib文件关联,选中xib文件,然后设置下文中 " custom class " 为定义的类,让其来管理xib
1> (如图,设置xib与类关联)
2> XMGPageView.h 文件中,声明分页图片数组属性,及其一个快速创建的工厂方法,如下:
1 #import <UIKit/UIKit.h> 2 3 @interface XMGPageView : UIView 4 5 + (instancetype)pageView; 6 7 /** 所有需要展示的图片名称*/ 8 @property (nonatomic, strong)NSArray *imageNames; 9 @end
3> XMGPageView.m 文件中,要做很多事情,如:管理xib文件上的控件,
1.重写初始化方法 (在里面进行一次性的初始化)
xib :awakeFromNib
纯代码:initWithFrame
2.重写layoutSubviews, 在里面布局子控件
3.接收外界传入的数据, 重写set方法
#import "XMGPageView.h" @interface XMGPageView ()<UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *sc; @property (weak, nonatomic) IBOutlet UIPageControl *pageControl; // 注意:NSTimer应该是weak @property (weak, nonatomic) NSTimer *timer; @end @implementation XMGPageView + (instancetype)pageView { #warning 注意.这里有知识点 return [[[NSBundle mainBundle] loadNibNamed:@"XMGPageView" owner:nil options:nil] lastObject]; } /* 自定义View的步骤: 1.重写初始化方法 (在里面进行一次性的初始化) xib :awakeFromNib 纯代码:initWithFrame 2.重写layoutSubviews, 在里面布局子控件 3.接收外界传入的数据, 重写set方法 */ - (void)awakeFromNib { self.sc.delegate = self; // 1.隐藏滚动条 self.sc.showsHorizontalScrollIndicator = NO; self.sc.showsVerticalScrollIndicator = NO; // 2.设置UIScrollView的其它属性 self.sc.bounces = NO; self.sc.pagingEnabled = YES; // 3.监听PageControl的点击事件 [self.pageControl addTarget:self action:@selector(pageControlClick:) forControlEvents:UIControlEventValueChanged]; // 4.通过KVC给UIPageControl的私有属性赋值, 设置自定义图片 [self.pageControl setValue:[UIImage imageNamed:@"current"] forKeyPath:@"_currentPageImage"]; [self.pageControl setValue:[UIImage imageNamed:@"other"] forKeyPath:@"_pageImage"]; // 5.让UIScrollView每隔一段事件就切换一页 [self startTimer]; } #pragma mark - 内部监听 - (IBAction)pageControlClick:(UIPageControl *)sender { self.sc.contentOffset = CGPointMake(sender.currentPage * self.sc.frame.size.width , 0); } #pragma mark - 定时器相关 - (void)startTimer { // 打开定时器 self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage:) userInfo:@"lnj" repeats:YES]; // 主线程在处理其它事件的时候, 分一点时间来处理NSTimer [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes]; } // 切换到下一页 - (void)nextPage:(NSTimer *)timer { // 1.获取下一页的页码 NSUInteger page = self.pageControl.currentPage + 1; // 2.判断页码是否越界 if (page >= _imageNames.count) { // 如果越界就回到第0页 self.pageControl.currentPage = 0; }else { // 如果没有越界, 就进入到下一页 self.pageControl.currentPage = page; } [self pageControlClick:self.pageControl]; } - (void)stopTimer { // 关掉定时器 [self.timer invalidate]; } #pragma mark - UIScrollViewDelegate // 只要滚动就会调用 - (void)scrollViewDidScroll:(nonnull UIScrollView *)scrollView { // 1.计算页码 // 当前页码 = 偏移位 / UIScrollView的宽度 CGFloat page = scrollView.contentOffset.x / scrollView.frame.size.width; int currnetPage = page + 0.5; // 2.修改页码 self.pageControl.currentPage = currnetPage; } // 开始拖拽 - (void)scrollViewWillBeginDragging:(nonnull UIScrollView *)scrollView { [self stopTimer]; } // 结束拖拽 - (void)scrollViewDidEndDragging:(nonnull UIScrollView *)scrollView willDecelerate:(BOOL)decelerate { [self startTimer]; } - (void)setImageNames:(NSArray *)imageNames { _imageNames = imageNames; // 0.每次重新设置图片, 都需要情空以前的图片 for (UIView *subView in self.sc.subviews) { [subView removeFromSuperview]; } // 1.创建图片 // 1.初始化子控件, 添加图片 for (int i = 0; i < _imageNames.count; i++) { // 1.创建UIImageView UIImageView *iv = [[UIImageView alloc] init]; // 2.创建图片 NSString *imageName = _imageNames[i]; UIImage *image = [UIImage imageNamed:imageName]; iv.image = image; // 4.添加到父控件 [self.sc addSubview:iv]; } // 2.设置pageControl的页码数量 self.pageControl.numberOfPages = _imageNames.count; } - (void)layoutSubviews { [super layoutSubviews]; CGFloat width = self.sc.frame.size.width; CGFloat height = self.sc.frame.size.height; NSUInteger imageCount = self.imageNames.count; // 1.设置每个UIImageView的frame for (int i = 0; i < imageCount; i++) { UIImageView *iv = self.sc.subviews[i]; iv.frame = CGRectMake(i * width, 0, width, height); } // 2.设置滚动范围 self.sc.contentSize = CGSizeMake(imageCount * width, height); } @end
3》 在控制器中使用,展示数据到View上即可。
1 #import "ViewController.h" 2 #import "XMGPageView.h" 3 4 @interface ViewController ()<UIScrollViewDelegate> 5 6 @property(nonatomic, strong)XMGPageView *pageView; 7 @end 8 9 @implementation ViewController 10 11 - (void)viewDidLoad 12 { 13 [super viewDidLoad]; 14 /* 15 1.利用UIScrollView实现商品展示 16 2.用纯代码封装图片轮播器 17 */ 18 19 // 1.创建图片轮播器 20 XMGPageView *pageView = [XMGPageView pageView]; 21 // 2.设置图片轮播器的frame 22 pageView.imageNames = @[@"img_01", @"img_02", @"img_03", @"img_04", @"img_05"]; 23 pageView.frame = CGRectMake(27, 97, 320, 128); 24 // pageView.frame = CGRectMake(0, 97, 330, 200); 25 [self.view addSubview:pageView]; 26 self.pageView = pageView; 27 28 } 29 30 - (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event 31 { 32 // 切换图片轮播器上的图片 33 self.pageView.imageNames = @[@"img_04", @"img_05"]; 34 35 }
好的,图片轮播器就到此结束,明天将继续讲解,Autolayout屏幕布局,明天见,^_^