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 @end15 16 @implementation YYViewController17 18 - (void)viewDidLoad19 {20     [super viewDidLoad];21     //註冊cell22     static NSString *[email protected]"cell";23     [self.collectinView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];24     25 }26 27 #pragma mark- UICollectionViewDataSource28 //一共多少組，預設為1組29 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView30 {31     return 1;32 }33 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section34 {35     return 16;36 }37 38 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath39 {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-UICollectionViewDelegate47 @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 : UICollectionViewCell12 @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 @end14 @implementation YYimageCell15 16 - (id)initWithFrame:(CGRect)frame17 {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 *)icon29 {30     _icon=[icon copy];31     self.imageView.image=[UIImage imageNamed:icon];32 }33 34 -(void)layoutSubviews35 {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 @end18 19 @implementation YYViewController20 21 - (void)viewDidLoad22 {23     [super viewDidLoad];24     //註冊cell25 //    static NSString *[email protected]"cell";26     [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];27     28 }29 30 #pragma mark- UICollectionViewDataSource31 //一共多少組，預設為1組32 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView33 {34     return 1;35 }36 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section37 {38     return 16;39 }40 41 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath42 {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-UICollectionViewDelegate52 @end

　　介面實現：　　　　（5）細節處理設定分頁　　調整間距隱藏水平捲軸。清除其顏色。

iOS開發UI篇—無限輪播（迴圈利用）