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

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)连线,设置其数据源和代理
    
实现代码:
 1 //
 2 //  YYViewController.m
 3 //  07-无限滚动(循环利用)
 4 //
 5 //  Created by apple on 14-8-3.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 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 *ID=@"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 *ID=@"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文件
 1 //
 2 //  YYimageCell.h
 3 //  07-无限滚动(循环利用)
 4 //
 5 //  Created by apple on 14-8-3.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 
11 @interface YYimageCell : UICollectionViewCell
12 @property(nonatomic,copy)NSString *icon;
13 @end

YYimageCell.m文件

 1 //
 2 //  YYimageCell.m
 3 //  07-无限滚动(循环利用)
 4 //
 5 //  Created by apple on 14-8-3.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 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文件
 1 //
 2 //  YYViewController.m
 3 //  07-无限滚动(循环利用)
 4 //
 5 //  Created by apple on 14-8-3.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 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 *ID=@"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 *ID=@"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)细节处理
设置分页
  
调整间距
隐藏水平滚动条。
清除其颜色。

posted on 2014-08-03 17:51  文顶顶  阅读(...)  评论(... 编辑 收藏

导航

统计