iOS开发UI篇—无限轮播(循环利用)
2014-08-03 17:51
411 查看
iOS开发UI篇—无限轮播(循环利用)
一、无限轮播
1.简单说明
在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动。
在开发的时候,我们通常的做法是使用一个UIScrollView,在UIScrollView上面添加多个imageView,然后设置imageView的图片,和scrollView的滚动范围。
以前的做法:
一般而言,轮播的广告或者是图片数量都不会太多(3~5张)。所以,并不会太多的去考虑性能问题。但是如果图片过多(比如有16张图片,就需要创建16个imageView),那么就不得不考虑性能问题了。
更甚,如果深入做一个图片浏览的小程序,那么可能会处理成百上千张图片,这会造成极大的内存浪费且性能低下。
图片数量众多:
当用户在查看第一张图片的时候,后面的7张创建的时间太早,且用户可能根本就没机会看见(看完前面几张就没有兴趣再看后面的内容 了)。
优化思路:只有在需要用到的时候,再创建,创建的imageView进行村循环利用。比较好的做法,不论有多少张图片,只需要创建3个imageView就够了。
本文介绍使用Collectionview来实现无限滚动的循环利用。它支持垂直和水平方向上的滚动。
二、实现
1.说明:
CollectionCell的用法和tableViewCell的用法不太一样,CollectionCell
需要注册,告诉它这种标识对应的cell是什么类型的cell,如果缓存池中没有,那么它就检测当时这种标识注册的是什么类型的cell,就会自动创建这种类型的Cell。
2.实现步骤
(1)向storyboard中添加一个UICollectionView,调整控件的宽高。
(2)设置其宽高==一张图片的宽高==其一个cell的宽高
设置cell的格子的大小。其默认为向上滚动的,调整为水平滚动。
(3)连线,设置其数据源和代理
实现代码:
界面展示:
打印查看有没有实现cell的循环利用。
可以看出,整个程序中只创建了两个cell。
(4)展示图片,自定义cell(两种做法,可以使用xib也可以使用代码)。
自定义一个cell,用来展示图片。
实现代码:
YYimageCell.h文件
YYimageCell.m文件
YYViewController.m文件
界面实现:
(5)细节处理
设置分页
调整间距
隐藏水平滚动条。
清除其颜色。
一、无限轮播
1.简单说明
在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动。
在开发的时候,我们通常的做法是使用一个UIScrollView,在UIScrollView上面添加多个imageView,然后设置imageView的图片,和scrollView的滚动范围。
以前的做法:
一般而言,轮播的广告或者是图片数量都不会太多(3~5张)。所以,并不会太多的去考虑性能问题。但是如果图片过多(比如有16张图片,就需要创建16个imageView),那么就不得不考虑性能问题了。
更甚,如果深入做一个图片浏览的小程序,那么可能会处理成百上千张图片,这会造成极大的内存浪费且性能低下。
图片数量众多:
当用户在查看第一张图片的时候,后面的7张创建的时间太早,且用户可能根本就没机会看见(看完前面几张就没有兴趣再看后面的内容 了)。
优化思路:只有在需要用到的时候,再创建,创建的imageView进行村循环利用。比较好的做法,不论有多少张图片,只需要创建3个imageView就够了。
本文介绍使用Collectionview来实现无限滚动的循环利用。它支持垂直和水平方向上的滚动。
二、实现
1.说明:
CollectionCell的用法和tableViewCell的用法不太一样,CollectionCell
需要注册,告诉它这种标识对应的cell是什么类型的cell,如果缓存池中没有,那么它就检测当时这种标识注册的是什么类型的cell,就会自动创建这种类型的Cell。
2.实现步骤
(1)向storyboard中添加一个UICollectionView,调整控件的宽高。
(2)设置其宽高==一张图片的宽高==其一个cell的宽高
设置cell的格子的大小。其默认为向上滚动的,调整为水平滚动。
(3)连线,设置其数据源和代理
实现代码:
// // YYViewController.m // 07-无限滚动(循环利用) // // Created by apple on 14-8-3. // Copyright (c) 2014年 yangyong. All rights reserved. // #import "YYViewController.h" @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate> @property (weak, nonatomic) IBOutlet UICollectionView *collectinView; @end @implementation YYViewController - (void)viewDidLoad { [super viewDidLoad]; 21 //注册cell 22 static NSString *ID=@"cell"; 23 [self.collectinView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID]; } #pragma mark- UICollectionViewDataSource //一共多少组,默认为1组 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1; } -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 16; } -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { static NSString *ID=@"cell"; UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath]; cell.backgroundColor=YYRandomColor; return cell; } #pragma mark-UICollectionViewDelegate @end
界面展示:
打印查看有没有实现cell的循环利用。
可以看出,整个程序中只创建了两个cell。
(4)展示图片,自定义cell(两种做法,可以使用xib也可以使用代码)。
自定义一个cell,用来展示图片。
实现代码:
YYimageCell.h文件
// // YYimageCell.h // 07-无限滚动(循环利用) // // Created by apple on 14-8-3. // Copyright (c) 2014年 yangyong. All rights reserved. // #import <UIKit/UIKit.h> @interface YYimageCell : UICollectionViewCell @property(nonatomic,copy)NSString *icon; @end
YYimageCell.m文件
// // YYimageCell.m // 07-无限滚动(循环利用) // // Created by apple on 14-8-3. // Copyright (c) 2014年 yangyong. All rights reserved. // #import "YYimageCell.h" @interface YYimageCell () @property(nonatomic,strong)UIImageView *imageView; @end @implementation YYimageCell - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { UIImageView *imageView=[[UIImageView alloc]init]; [self addSubview:imageView]; self.imageView=imageView; } return self; } -(void)setIcon:(NSString *)icon { _icon=[icon copy]; self.imageView.image=[UIImage imageNamed:icon]; } -(void)layoutSubviews { [super layoutSubviews]; self.imageView.frame=self.bounds; } @end
YYViewController.m文件
// // YYViewController.m // 07-无限滚动(循环利用) // // Created by apple on 14-8-3. // Copyright (c) 2014年 yangyong. All rights reserved. // #import "YYViewController.h" #import "YYimageCell.h" #define YYCell @"cell" @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate> @property (weak, nonatomic) IBOutlet UICollectionView *collectinView; @end @implementation YYViewController - (void)viewDidLoad { [super viewDidLoad]; //注册cell // static NSString *ID=@"cell"; [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell]; } #pragma mark- UICollectionViewDataSource //一共多少组,默认为1组 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1; } -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 16; } -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { // static NSString *ID=@"cell"; YYimageCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYCell forIndexPath:indexPath]; cell.backgroundColor=YYRandomColor; NSLog(@"%p,%d",cell,indexPath.item); cell.icon=[NSString stringWithFormat:@"minion_%02d",indexPath.item+1]; return cell; } #pragma mark-UICollectionViewDelegate @end
界面实现:
(5)细节处理
设置分页
调整间距
隐藏水平滚动条。
清除其颜色。
相关文章推荐
- iOS开发UI篇—无限轮播(循环利用)
- iOS开发UI篇—无限轮播(循环利用)
- iOS开发UI篇—无限轮播(循环利用)
- iOS开发UI篇—无限轮播
- iOS开发UI篇—无限轮播(新闻数据展…
- iOS开发UI篇—无限轮播(循环展示)
- iOS开发UI篇—无限轮播(循环展示)
- iOS开发UI篇—无限轮播(循环展示)…
- iOS开发UI篇—无限轮播(循环展示)
- iOS开发UI篇—无限轮播(新闻数据展示)
- iOS开发UI篇—自定义瀑布流控件(cell的循环利用)
- iOS开发UI篇—无限轮播(新闻数据展示)
- iOS开发UI篇—无限轮播(新闻数据展示)
- IOS开发UI篇之──自定义加载等待框(MBProgressHUD)
- iOS开发UI篇—transframe属性(形变)
- 学习IOS开发UI篇--UIView\UIButton\UILabel\UIImageView\UITextField
- iOS开发UI篇—懒加载
- iOS开发UI篇—简单的浏览器查看程序
- IOS开发UI篇之──自定义加载等待框(MBProgressHUD)
- iOS开发UI篇—字典转模型