无限轮播(循环利用)

无限轮播(循环利用)

一、无限轮播 

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)连线,设置其数据源和代理

    

实现代码:

 8
 9 #import "YYViewController.h"
10
11 @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
12 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;
13
14 @end
15
16 @implementation YYViewController
17
18 - (void)viewDidLoad
19 {
20     [super viewDidLoad];
21     //注册cell
22     static NSString *[email protected]"cell";
23     [self.collectinView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];
24
25 }
26
27 #pragma mark- UICollectionViewDataSource
28 //一共多少组,默认为1组
29 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
30 {
31     return 1;
32 }
33 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
34 {
35     return 16;
36 }
37
38 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
39 {
40     static NSString *[email protected]"cell";
41     UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
42     cell.backgroundColor=YYRandomColor;
43     return cell;
44 }
45
46 #pragma mark-UICollectionViewDelegate
47 @end

    界面展示:

    

    打印查看有没有实现cell的循环利用。

    

    可以看出,整个程序中只创建了两个cell。

  (4)展示图片,自定义cell(两种做法,可以使用xib也可以使用代码)。

    自定义一个cell,用来展示图片。

    

    实现代码:
  YYimageCell.h文件

 8
 9 #import <UIKit/UIKit.h>
10
11 @interface YYimageCell : UICollectionViewCell
12 @property(nonatomic,copy)NSString *icon;
13 @end

YYimageCell.m文件

 1 //

 8
 9 #import "YYimageCell.h"
10
11 @interface YYimageCell ()
12 @property(nonatomic,strong)UIImageView *imageView;
13 @end
14 @implementation YYimageCell
15
16 - (id)initWithFrame:(CGRect)frame
17 {
18     self = [super initWithFrame:frame];
19     if (self) {
20
21         UIImageView *imageView=[[UIImageView alloc]init];
22         [self addSubview:imageView];
23         self.imageView=imageView;
24     }
25     return self;
26 }
27
28 -(void)setIcon:(NSString *)icon
29 {
30     _icon=[icon copy];
31     self.imageView.image=[UIImage imageNamed:icon];
32 }
33
34 -(void)layoutSubviews
35 {
36     [super layoutSubviews];
37     self.imageView.frame=self.bounds;
38 }
39
40 @end

  YYViewController.m文件

 9 #import "YYViewController.h"
10 #import "YYimageCell.h"
11
12 #define YYCell @"cell"
13
14 @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
15 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;
16
17 @end
18
19 @implementation YYViewController
20
21 - (void)viewDidLoad
22 {
23     [super viewDidLoad];
24     //注册cell
25 //    static NSString *[email protected]"cell";
26     [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
27
28 }
29
30 #pragma mark- UICollectionViewDataSource
31 //一共多少组,默认为1组
32 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
33 {
34     return 1;
35 }
36 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
37 {
38     return 16;
39 }
40
41 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
42 {
43 //    static NSString *[email protected]"cell";
44     YYimageCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYCell forIndexPath:indexPath];
45     cell.backgroundColor=YYRandomColor;
46     NSLog(@"%p,%d",cell,indexPath.item);
47     cell.icon=[NSString stringWithFormat:@"minion_%02d",indexPath.item+1];
48     return cell;
49 }
50
51 #pragma mark-UICollectionViewDelegate
52 @end

  界面实现:

  

  (5)细节处理

设置分页

  

调整间距

隐藏水平滚动条。

清除其颜色。

时间: 2024-08-28 13:33:43

无限轮播(循环利用)的相关文章

iOS开发UI篇—无限轮播(循环利用)

一.无限轮播  1.简单说明 在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动. 在开发的时候,我们通常的做法是使用一个UIScrollView,在UIScrollView上面添加多个imageView,然后设置imageView的图片,和scrollView的滚动范围. 以前的做法: 一般而言,轮播的广告或者是图片数量都不会太多(3~5张).所以,并不会太多的去考虑性能问题.但是如果图片过多(比如有16张图片,就需要创建16个imageView),那么就不得不考虑性能问题

无限轮播(循环展示)

无限轮播(循环展示) 一.简单说明 之前的程序还存在一个问题,那就是不能循环展示,因为plist文件中只有五个数组,因此第一个和最后一个之后就没有了,下面介绍处理这种循环展示问题的小技巧. 方法一:使用一个for循环,循环200次,创建200*=1000个模型,且默认程序启动后处在第100组的位置,向前有500个模型,向后也有500个模型,产生一种循环展示的假象. 代码如下: 8 9 #import "YYViewController.h" 10 #import "MJExt

iOS开发UI篇—无限轮播(功能完善)

iOS开发UI篇—无限轮播(功能完善) 一.自动滚动 添加并设置一个定时器,每个2.0秒,就跳转到下一条. 获取当前正在展示的位置. 1 [self addNSTimer]; 2 } 3 4 -(void)addNSTimer 5 { 6 // NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repe

无限轮播(功能完善)

无限轮播(功能完善) 一.自动滚动 添加并设置一个定时器,每个2.0秒,就跳转到下一条. 获取当前正在展示的位置. 1 [self addNSTimer]; 2 } 3 4 -(void)addNSTimer 5 { 6 // NSTimer timerWithTimeInterval:<#(NSTimeInterval)#> target:<#(id)#> selector:<#(SEL)#> userInfo:<#(id)#> repeats:<#

iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView

下载链接:github不断更新地址:https://github.com/gsdios/SDCycleScrollView 使用原理:采用UICollectionView的重用机制和循环滚动的方式实现图片的无限轮播,播放非常顺畅,解决了UISCrollView使用时从最后一张跳到第一张时的生硬状态. 主要类截图: SDCollectionViewCell:用来重用的item,即显示图片的视图: SDCycleScrollView: 对外提供的一个创建轮播器的接口类,使用者就是直接使用这个类来实现

ViewPager实现无限轮播踩坑记

最近笔者想通过ViewPager来实现一个广告Banner,并实现无限轮播的效果,但是在这个过程中踩了不少的坑,听我慢慢道来.如果大家有遇到和我一样的情况,可以参考我的解决方法,没有那就更好,如果针对我的解决方法,有啥更好的方案,欢迎和我分享 使用ViewPager实现无限轮播代码 MainActivity代码 public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private T

无限轮播(新闻数据展示)

无限轮播(新闻数据展示) 一.实现效果        二.实现步骤 1.前期准备 (1)导入数据转模型的第三方框架MJExtension (2)向项目中添加保存有“新闻”数据的plist文件 (3)导入用到的图片素材 2.步骤和代码 (1)新建一个数据模型 该模型的代码设计如下: YYnews.h文件 5 6 #import <Foundation/Foundation.h> 7 8 @interface YYnews : NSObject 9 @property(nonatomic,copy

iOS无限轮播视图

以前曾经写过一个用UICollectionView的无限轮播视图,但是写法不是很成熟,设置模型上限为数组的count * 50这样做的话会滚动到最后一个模型的时候会crash掉,今天理了下思路,写了一个基于UISCrollView的轮播视图,虽然比较简陋,但是实现了基本功能.没有怎么加入注释,请谅解效果图如下: 有兴趣的可以去参考一些代码,附上GitHub地址:https://github.com/zimou47/UnlimitedScrollView 如果为您带来了帮助,请点一颗星O(∩_∩)

无限轮播图的制作

url:http://zjingwen.github.io/SetTimeOutGoBlog/webdemo/huanyouji/index.html (如果打开过慢,或者打不开,原因你懂得.) 一.思路 1.所有滑动效果的demo都是通过控制css里的left值,来控制滑动效果的. 2.需要两个块,一个div块,一个ui.div块的position是relative,ui块的position是absolute.这样ui块的left就可以根据外层的div来控制.div的overflow是hidd