當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

iOS-UICollectionView

發布時間：2024/4/13 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 iOS-UICollectionView 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1------------------------------------------------------------------------------------------------------------------------

本章通過先總體介紹UICollectionView及其常用方法，再結合一個實例，了解如何使用UICollectionView。

UICollectionView 和 UICollectionViewController 類是iOS6 新引進的API，用于展示集合視圖，布局更加靈活，可實現多列布局，用法類似于UITableView 和 UITableViewController 類。

使用UICollectionView 必須實現UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout這三個協議。

下面先給出常用到的一些方法。（只給出常用的，其他的可以查看相關API）?

#pragma?mark?--?UICollectionViewDataSource???

//定義展示的UICollectionViewCell的個數??

-(NSInteger)collectionView:(UICollectionView?*)collectionView?numberOfItemsInSection:(NSInteger)section??

{??

????return?30;??

} ??

//定義展示的Section的個數??

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView?*)collectionView??

{??

????return?1;??

} ??

//每個UICollectionView展示的內容??

-(UICollectionViewCell?*)collectionView:(UICollectionView?*)collectionView?cellForItemAtIndexPath:(NSIndexPath?*)indexPath??

{??

????static?NSString?*?CellIdentifier?=?@"GradientCell";??

????UICollectionViewCell?*?cell?=?[collectionView?dequeueReusableCellWithReuseIdentifier:CellIdentifier?forIndexPath:indexPath];??

????cell.backgroundColor?=?[UIColor?colorWithRed:((10?*?indexPath.row)?/?255.0)?green:((20?*?indexPath.row)/255.0)?blue:((30?*?indexPath.row)/255.0)?alpha:1.0f];??

????return?cell;??

} ??

#pragma?mark?--UICollectionViewDelegateFlowLayout???

//定義每個UICollectionView?的大小??

-?(CGSize)collectionView:(UICollectionView?*)collectionView?layout:(UICollectionViewLayout*)collectionViewLayout?sizeForItemAtIndexPath:(NSIndexPath?*)indexPath??

{??

????return?CGSizeMake(96,?100);??

} ??

//定義每個UICollectionView?的?margin??

-(UIEdgeInsets)collectionView:(UICollectionView?*)collectionView?layout:(UICollectionViewLayout?*)collectionViewLayout?insetForSectionAtIndex:(NSInteger)section??

{??

????return?UIEdgeInsetsMake(5,?5,?5,?5);??

} ??

#pragma?mark?--UICollectionViewDelegate???

//UICollectionView被選中時調用的方法??

-(void)collectionView:(UICollectionView?*)collectionView?didSelectItemAtIndexPath:(NSIndexPath?*)indexPath??

{??

????UICollectionViewCell?*?cell?=?(UICollectionViewCell?*)[collectionView?cellForItemAtIndexPath:indexPath];??

????cell.backgroundColor?=?[UIColor?whiteColor];??

} ??

//返回這個UICollectionView是否可以被選擇??

-(BOOL)collectionView:(UICollectionView?*)collectionView?shouldSelectItemAtIndexPath:(NSIndexPath?*)indexPath??

{??

????return?YES;??

}??

下面通過一個例子具體介紹下。（例子來自網絡。但是是通過第三方獲得的，無法取得鏈接。還望見諒。）

iOS CollectionView的出現是一大福利，再也不用用TableView來定義復雜的多欄表格了，用法與Table類似，只是Cell必須自己添加，無默認模式

由于CollectionView沒有默認的Cell布局，所以一般還是自定義方便又快捷

一、自定義Cell

1、新建類CollectionCell繼承自UICollectionViewCell

2、新建Xib，命名為CollectionCell.xib

a.選中CollectionCell.xib刪掉默認的View，從控件中拖一個Collection View Cell（圖3）到畫布中，設置大小為95*116；

b.選中剛剛添加的Cell，更改類名為CollectionCell，如圖4

c.在CollectionCell.xib的CollectionCell中添加一個ImageView和一個Label（圖5）

d.創建映射, 圖6，圖7

e.選中CollectionCell.m , 重寫init方法?

-?(id)initWithFrame:(CGRect)frame??

{??

????self?=?[super?initWithFrame:frame];??

????if?(self)??

????{??

????????//?初始化時加載collectionCell.xib文件??

????????NSArray?*arrayOfViews?=?[[NSBundle?mainBundle]?loadNibNamed:@"CollectionCell"?owner:self?options:nil];??

??????????

????????//?如果路徑不存在，return?nil??

????????if?(arrayOfViews.count?<?1)??

????????{??

????????????return?nil;??

????????}??

????????//?如果xib中view不屬于UICollectionViewCell類，return?nil??

????????if?(![[arrayOfViews?objectAtIndex:0]?isKindOfClass:[UICollectionViewCell?class]])??

????????{??

????????????return?nil;??

????????}??

????????//?加載nib??

????????self?=?[arrayOfViews?objectAtIndex:0];??

????}??

????return?self;??

}??

f.選中CollectionCell.xib 修改其identifier為CollectionCell。

二、定義UICollectionView；

1、拖動一個Collection View到指定ViewController的View上

2、連線dataSource和delegate，并創建映射，命名為CollectionView

3、選中CollectionView的標尺，將Cell Size的Width和Height改成與自定義的Cell一樣的95*116,圖8

? ??

4、選中CollectionView的屬性,可以修改其屬性，比如是垂直滑動，還是水平滑動，選擇Vertical或Horizontal

5、選中CollectionViewCell，修改Class，繼承自CollectionCell

5、在ViewDidLoad方法中聲明Cell的類，在ViewDidLoad方法中添加，此句不聲明，將無法加載，程序崩潰

其中,CollectionCell是這個Cell的標識（之前幾步已經定義過了。）?

[self.collectionView?registerClass:[CollectionCell?class]?forCellWithReuseIdentifier:@"CollectionCell"];??

6、在ViewController.h中聲明代理?

@interface?ViewController?:?UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>??

7、在.m文件中實現代理方法?

//每個section的item個數??

-(NSInteger)collectionView:(UICollectionView?*)collectionView?numberOfItemsInSection:(NSInteger)section??

{??

????return?12;??

}??

-(UICollectionViewCell?*)collectionView:(UICollectionView?*)collectionView?cellForItemAtIndexPath:(NSIndexPath?*)indexPath??

{??

??????

????CollectionCell?*cell?=?(CollectionCell?*)[collectionView?dequeueReusableCellWithReuseIdentifier:@"CollectionCell"?forIndexPath:indexPath];??

??????

????//圖片名稱??

????NSString?*imageToLoad?=?[NSString?stringWithFormat:@"%d.png",?indexPath.row];??

????//加載圖片??

????cell.imageView.image?=?[UIImage?imageNamed:imageToLoad];??

????//設置label文字??

????cell.label.text?=?[NSString?stringWithFormat:@"{%ld,%ld}",(long)indexPath.row,(long)indexPath.section];??

??????

????return?cell;??

}??

8 。效果如圖10

點擊某項后跳轉事件與UITableView類似，實現代理方法?

-(void)collectionView:(UICollectionView?*)collectionView?didSelectItemAtIndexPath:(NSIndexPath?*)indexPath ?

------------------------------------------------------------------------------------------------------------------------------------ 2

UICollectionView基礎

初始化部分：

UICollectionViewFlowLayout *flowLayout= [[UICollectionViewFlowLayout alloc]init]; self.myCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(20, 20, 250, 350) collectionViewLayout:flowLayout]; self.myCollectionView.backgroundColor = [UIColor grayColor]; [self.myCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@“myCell"]; self.myCollectionView.delegate = self; self.myCollectionView.dataSource = self;[self.view addSubview:self.myCollectionView];

UICollectionViewLayout

UICollectionViewLayout決定了UICollectionView如何顯示在界面上，Apple提供了一個最簡單的默認layout對象：UICollectionViewFlowLayout。

Flow Layout是一個Cells的線性布局方案，并具有頁面和頁腳。其可定制的內容如下：

itemSize屬性

設定全局的Cell尺寸，如果想要單獨定義某個Cell的尺寸，可以使用下面方法：

-?(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

minimumLineSpacing屬性

設定全局的行間距，如果想要設定指定區內Cell的最小行距，可以使用下面方法：

-?(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section

minimumInteritemSpacing屬性

設定全局的Cell間距，如果想要設定指定區內Cell的最小間距，可以使用下面方法：

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

scrollDirection屬性

設定滾動方向，有UICollectionViewScrollDirectionVertical和UICollectionViewScrollDirectionHorizontal兩個值。

headerReferenceSize屬性與footerReferenceSize屬性

設定頁眉和頁腳的全局尺寸，需要注意的是，根據滾動方向不同，header和footer的width和height中只有一個會起作用。如果要單獨設置指定區內的頁面和頁腳尺寸，可以使用下面方法：

-?(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

-?(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section

sectionInset屬性

設定全局的區內邊距，如果想要設定指定區的內邊距，可以使用下面方法：

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

然后需要實現三種類型的委托：UICollectionViewDataSource, UICollectionViewDelagate和UICollectionViewDelegateFlowLayout。

@interface ViewController : UIViewController <UICollectionViewDelegateFlowLayout, UICollectionViewDataSource>

因為UICollectionViewDelegateFlowLayout實際上是UICollectionViewDelegate的一個子協議，它繼承了UICollectionViewDelegate，所以只需要在聲明處寫上UICollectionViewDelegateFlowLayout就行了。

UICollectionViewDataSource

-?(NSInteger)numberOfSectionsInCollectionView:(UICollectionView?*)collectionView

返回collection view里區(section)的個數，如果沒有實現該方法，將默認返回1：

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {return 2; }

-?(NSInteger)collectionView:(UICollectionView?*)collectionView numberOfItemsInSection:(NSInteger)section

返回指定區(section)包含的數據源條目數(number of items)，該方法必須實現：

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {return 7; }

-?(UICollectionViewCell?*)collectionView:(UICollectionView?*)collectionView cellForItemAtIndexPath:(NSIndexPath?*)indexPath

返回某個indexPath對應的cell，該方法必須實現：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"myCell" forIndexPath:indexPath];if(indexPath.section==0){cell.backgroundColor = [UIColor redColor];}else if(indexPath.section==1){cell.backgroundColor = [UIColor greenColor];}return cell; }

UICollectionViewCell結構上相對比較簡單，由下至上：

首先是cell本身作為容器view
然后是一個大小自動適應整個cell的backgroundView，用作cell平時的背景
再其次是selectedBackgroundView，是cell被選中時的背景
最后是一個contentView，自定義內容應被加在這個view上

-?(UICollectionReusableView?*)collectionView:(UICollectionView?*)collectionView viewForSupplementaryElementOfKind:(NSString*)kind atIndexPath:(NSIndexPath?*)indexPath

為collection view添加一個補充視圖(頁眉或頁腳)

-?(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

設定頁眉的尺寸

-?(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section

設定頁腳的尺寸

-?(void)registerClass:(Class)viewClass forSupplementaryViewOfKind:(NSString?*)elementKind withReuseIdentifier:(NSString*)identifier

添加頁眉和頁腳以前需要注冊類和標識：

添加補充視圖的代碼示例：

[self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader"]; [self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwHeader"];-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {CGSize size = {240,25};return size; }-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {CGSize size = {240,25};return size; }- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {MyHeadView *headView;if([kind isEqual:UICollectionElementKindSectionHeader]){headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath];[headView setLabelText:[NSString stringWithFormat:@"section %d's header",indexPath.section]];}else if([kind isEqual:UICollectionElementKindSectionFooter]){headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath];[headView setLabelText:[NSString stringWithFormat:@"section %d's footer",indexPath.section]];}return headView; }

MyHeadView.h

#import <UIKit/UIKit.h>@interface MyHeadView : UICollectionReusableView - (void) setLabelText:(NSString *)text; @end

MyHeadView.m

#import "MyHeadView.h"@interface MyHeadView()@property (strong, nonatomic) UILabel *label;@end@implementation MyHeadView- (id)initWithFrame:(CGRect)frame {self = [super initWithFrame:frame];if (self){self.label = [[UILabel alloc] init];self.label.font = [UIFont systemFontOfSize:18];[self addSubview:self.label];}return self; }- (void) setLabelText:(NSString *)text {self.label.text = text;[self.label sizeToFit]; }@end

在注冊Cell和補充視圖時，也可以用新建xib文件的方式：

[self.myCollectionView registerNib:[UINib nibWithNibName:@"MyCollectionCell" bundle:nil] forCellWithReuseIdentifier:@"hxwCell"];[self.myCollectionView registerNib:[UINib nibWithNibName:@"MySupplementaryView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader"];[self.myCollectionView registerNib:[UINib nibWithNibName:@"MySupplementaryView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwFooter"];

用這種方式注冊后，甚至可以不用新建類去綁定這個xib，直接通過viewWithTag的方式獲取xib里的控件：

UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind :kind withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath];UILabel *label = (UILabel *)[view viewWithTag:1];label.text = @"empty";

UICollectionViewDelegateFlowLayout

-?(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

設定指定Cell的尺寸

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {if(indexPath.section==0 && indexPath.row==1){return CGSizeMake(50, 50);}else{return CGSizeMake(75, 30);} }

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

設定collectionView(指定區)的邊距

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {if(section==0){return UIEdgeInsetsMake(35, 25, 15, 25);}else{return UIEdgeInsetsMake(15, 15, 15, 15);} }

-?(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section

設定指定區內Cell的最小行距，也可以直接設置UICollectionViewFlowLayout的minimumLineSpacing屬性

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {if(section==0){return 10.0;}else{return 20.0;} }

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

設定指定區內Cell的最小間距，也可以直接設置UICollectionViewFlowLayout的minimumInteritemSpacing屬性

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {if(section==0){return 10.0;}else{return 20.0;} }

UICollectionViewDelegate

-?(void)collectionView:(UICollectionView?*)collectionView didSelectItemAtIndexPath:(NSIndexPath?*)indexPath

當指定indexPath處的item被選擇時觸發

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { [self.myArray removeObjectAtIndex:indexPath.row];[collectionView deleteItemsAtIndexPaths:[NSArray arrayWithObject:indexPath]]; }

P.s. 當你刪除或添加元素時，一定要更新numberOfItemsInSection的返回情況。

-?(void)collectionView:(UICollectionView?*)collectionView didDeselectItemAtIndexPath:(NSIndexPath?*)indexPath

當指定indexPath處的item被取消選擇時觸發，僅在允許多選時被調用

下面是三個和高亮有關的方法：

-?(BOOL)collectionView:(UICollectionView?*)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath?*)indexPath

-?(void)collectionView:(UICollectionView?*)collectionView didHighlightItemAtIndexPath:(NSIndexPath?*)indexPath

-?(void)collectionView:(UICollectionView?*)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath?*)indexPath

事件的處理順序如下：

手指按下

shouldHighlightItemAtIndexPath (如果返回YES則向下執行，否則執行到這里為止)

didHighlightItemAtIndexPath (高亮)

手指松開

didUnhighlightItemAtIndexPath (取消高亮)

shouldSelectItemAtIndexPath (如果返回YES則向下執行，否則執行到這里為止)

didSelectItemAtIndexPath (執行選擇事件)

如果只是簡單實現點擊后cell改變顯示狀態，只需要在cellForItemAtIndexPath方法里返回cell時，指定cell的selectedBackgroundView：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"myCell" forIndexPath:indexPath];UIView* selectedBGView = [[UIView alloc] initWithFrame:cell.bounds];selectedBGView.backgroundColor = [UIColor blueColor];cell.selectedBackgroundView = selectedBGView;return cell; }

如果要實現點擊時(手指未松開)的顯示狀態與點擊后(手指松開)的顯示狀態，則需要通過上面提到的方法來實現：

- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath {return YES; }- (void)collectionView:(UICollectionView *)colView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath {UICollectionViewCell* cell = [colView cellForItemAtIndexPath:indexPath];[cell setBackgroundColor:[UIColor purpleColor]]; }- (void)collectionView:(UICollectionView *)colView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath {UICollectionViewCell* cell = [colView cellForItemAtIndexPath:indexPath];[cell setBackgroundColor:[UIColor yellowColor]]; }
-------------------------------------------------------------------------------------------------------------
3

iOS UICollectionView的實現

ios的UICollectionView并不能在iOS6之前的版本中使用，為了兼容之前的版本需要自定義UICollectionView。寫完之后發現人家已經有開源了，下過來看了看發現我是用UIScrollerView的委托真是多此一舉，完全可以用layout來實現嘛。我在判斷重用的時候用了一大堆if沒有別人寫的簡潔明了。首先是定義委托，需要用戶傳入collection總item的總數與每一行中item的個數。其余的與UITableView的委托基本一致。 isNeedRefreshOrMore方法用來判斷用戶使用需要下拉刷新上拉更多的功能，返回YES就使用。 doCollectionRefresh即為響應下拉刷新事件。更多同樣。。 1 #pragma mark -2 #pragma mark 委托3 @protocol CustomCollectionDataSource<NSObject>4 @required5 //item的總個數6 -(NSInteger)numberOfItemsInCollection;7 //每一行的個數8 -(NSInteger)numberOfItemsInRow;9 @end 10 11 @protocol CustomCollectionDelegate<NSObject> 12 @required 13 -(CustomCollectionItem *)itemInCollectionAtPoint:(CGPoint)point collectionView:(CustomCollectionView *)collection; 14 @optional 15 -(void)itemDidSelectedAtPoint:(CGPoint)point; 16 -(BOOL)isNeedRefreshOrMore; 17 -(void)doCollectionRefresh; 18 -(void)doCollectionMore; 19 20 -(UIView *)collectionViewForHeader; 21 @end 在同文件中定義了頁面狀態的枚舉，用來區分Collcetion的狀態。同時定義了一些public方法 #import <UIKit/UIKit.h>typedef enum {CS_Init,CS_More,CS_Refresh }CollectionState;@class CustomCollectionItem; @protocol CustomCollectionDataSource; @protocol CustomCollectionDelegate;@interface CustomCollectionView : UIScrollView<UIScrollViewDelegate> @property (weak, nonatomic) id<CustomCollectionDataSource> dataSource; @property (weak, nonatomic) id<CustomCollectionDelegate> customDelegate;-(CustomCollectionItem *)dequeueReusableItemWithIdentifier:(NSString *)identifier; -(void)addItemsIntoDic; -(void)itemClickedAtPoint:(CGPoint)point; -(void)reloadData; -(CustomCollectionItem *)getItemAtPoint:(CGPoint)point;@property (strong,nonatomic) UIView *headerView; @end #import "CustomCollectionView.h" #import "CustomCollectionItem.h" #import "BaseRMView.h" @interface CustomCollectionView()
//重用池--原諒這個名字 @property (strong, nonatomic) NSMutableDictionary *contentItemDictionary;
//能夠顯示的item數量（以行計） @property(assign,nonatomic) NSInteger showCount; @property (assign,nonatomic) NSInteger offRowIndex;
//分割線--沒有用到默認成了10px @property (assign,nonatomic) CGFloat itemSpliteWidth;
//總行數 @property (assign,nonatomic) NSInteger rows; //item個數 @property (assign, nonatomic) NSInteger numberOfItemsInCollection;
//每行item個數 @property (assign,nonatomic) NSInteger numberOfItemsInRow;
//每一行的高度 @property (assign, nonatomic) CGFloat heightOfRow; // @property (assign, nonatomic) CGRect viewFrame; //是否第一次加載 @property (assign,nonatomic) BOOL isFirstLoad;
//上一次scrollview的offsetY，用來判斷是向上滑動還是向下滑動 @property (assign,nonatomic) CGFloat lastOffsetY;
//當前最后一行的index，從0開始 @property (assign,nonatomic) NSInteger lastRowIndex;
//當前最上一行的index，從0開始 @property (assign,nonatomic) NSInteger topRowIndex; //沒用 @property (assign,nonatomic) NSInteger numberOfMore; //是否需要顯示刷新更多頁面標志 @property (assign,nonatomic) BOOL isNeedShowMoreTag;
//刷新view @property (strong,nonatomic) BaseRMView *refreshView;
//更多view @property (strong,nonatomic) BaseRMView *moreView;@property (assign,nonatomic) CGFloat baseOffsetY; @property (assign,nonatomic) CGFloat baseCanMove; //reload之前的行數，上拉更多的時候如果用戶滑動的距離超過行高會出錯，用beforeRowCount來比較rows來判斷新增的item需要添加的坐標 @property (assign,nonatomic) NSInteger beforeRowCount;//@property (assign,nonatomic) NSInteger firstShowCount; @end #pragma mark - #pragma mark 頁面初始化 -(id)init{CGRect frame=[UIScreen mainScreen].applicationFrame;self=[self initWithFrame:frame];if(self){}return self; }- (id)initWithFrame:(CGRect)frame {self = [super initWithFrame:frame];if (self) {_viewFrame=frame;self.delegate=self;_isFirstLoad=YES;_contentItemDictionary=[[NSMutableDictionary alloc] init];_isNeedShowMoreTag=NO;}return self; } #pragma mark - #pragma mark 數據初始化 -(void)loadData{if ([_dataSource respondsToSelector:@selector(numberOfItemsInCollection)]) {_numberOfItemsInCollection=[_dataSource numberOfItemsInCollection];}else{_numberOfItemsInCollection=0;}if([_dataSource respondsToSelector:@selector(numberOfItemsInRow)]){_numberOfItemsInRow=[_dataSource numberOfItemsInRow];_heightOfRow=((300.0-(_numberOfItemsInRow-1)*10)/_numberOfItemsInRow);_itemSpliteWidth=10;}else{_numberOfItemsInRow=3;//默認為3_heightOfRow=88;_itemSpliteWidth=18;}if ([_dataSource respondsToSelector:@selector(numberofMore)]) {_numberOfMore=[_dataSource numberofMore];}if ([_customDelegate respondsToSelector:@selector(isNeedRefreshOrMore)]) {_isNeedShowMoreTag=[_customDelegate isNeedRefreshOrMore];}if ([_customDelegate respondsToSelector:@selector(collectionViewForHeader)]) {_headerView=[_customDelegate collectionViewForHeader];if (![self.subviews containsObject:_headerView]) {[self addSubview:_headerView];}}//計算行數_rows=ceil((float)_numberOfItemsInCollection/_numberOfItemsInRow);CGFloat contentHeight=(_rows*_heightOfRow + (_rows+1)*10+_headerView.frame.size.height);CGFloat scrollContentHeight=contentHeight>_viewFrame.size.height?contentHeight:_viewFrame.size.height;//計算一頁能顯示多少行_showCount= (NSInteger)ceil((self.frame.size.height/(_heightOfRow+10)));[self setContentSize:CGSizeMake(320, scrollContentHeight)];//判斷是否有新增行，如果有當前最上義行index+1if (_rows!=_beforeRowCount&&_beforeRowCount!=0) {_topRowIndex++;}
　　//從當前最上一行開始增加showcount行的itemfor (int i=_topRowIndex; i<_topRowIndex+_showCount; i++) {[self creatItem:i];}if (_isNeedShowMoreTag==YES) {if (![self.subviews containsObject:_refreshView]) {_refreshView=[[BaseRMView alloc] initWithState:Refresh];[_refreshView setFrame:CGRectMake(0, -50, 320, 50)];[_refreshView setBackgroundColor:[UIColor grayColor]];[self addSubview:_refreshView];
} if (![self.subviews containsObject:_moreView]) {_moreView=[[BaseRMView alloc] initWithState:More];[_moreView setFrame:CGRectMake(0, self.contentSize.height, 320, 50)];[_moreView setBackgroundColor:[UIColor grayColor]];[self addSubview:_moreView];}else{[_moreView setFrame:CGRectMake(0, self.contentSize.height, 320, 50)];}} }

-(void)layoutSubviews{
//第一次加載時初始化數據，之后不需要重新計算if (_isFirstLoad) {[self loadData];//offsetY基數只在第一次移動時候，10為默認的分割線高度_baseOffsetY=(10*(_showCount+1)+_heightOfRow*_showCount)-self.frame.size.height;//移動基數_baseCanMove=10+_heightOfRow;_isFirstLoad=NO;_lastRowIndex=_showCount-1;_topRowIndex=0;} } //重新加載數據，記錄加載前的行數
-(void)reloadData{_beforeRowCount=_rows;[self loadData]; } #pragma mark - #pragma mark Item相關 -(void)creatItem:(NSInteger)rowIndex{if ([_customDelegate respondsToSelector:@selector(itemInCollectionAtPoint:collectionView:)]) {for (int j=0; j<_numberOfItemsInRow; j++) {//判斷當前個數是否超過了總個數（單數情況下）if (!(((rowIndex)*_numberOfItemsInRow+j+1)>_numberOfItemsInCollection)) {//根據委托創建itemCustomCollectionItem *item=[_customDelegate itemInCollectionAtPoint:CGPointMake(rowIndex, j) collectionView:self];//設置item的大小[item setFrame:CGRectMake(10+_heightOfRow*j+_itemSpliteWidth*j, 10+_heightOfRow*rowIndex+10*rowIndex+_headerView.frame.size.height, _heightOfRow, _heightOfRow)];//設置item的point坐標item.point=CGPointMake(rowIndex, j);//在view中加入item[self addSubview:item];}}} } //根據重用標志（reuseidentifier）從重用池中獲取item -(CustomCollectionItem *)dequeueReusableItemWithIdentifier:(NSString *)identifier{NSArray *cellArray=[self.contentItemDictionary objectForKey:identifier];if (cellArray.count==0) {return nil;}else{id firstObject=[cellArray objectAtIndex:0];if([firstObject isKindOfClass:[CustomCollectionItem class]]){//獲取item后從重用池中刪除item;CustomCollectionItem *item=firstObject;[[self.contentItemDictionary objectForKey:identifier] removeObject:firstObject];[item reset];return item;}else{return nil;}} } //根據point坐標從當前item數組中獲取item -(CustomCollectionItem *)getItemAtPoint:(CGPoint)point{CustomCollectionItem *result=nil;for (id item in self.subviews) {if ([item isKindOfClass:[CustomCollectionItem class]]) {if (((CustomCollectionItem *)item).point.x==point.x&& ((CustomCollectionItem *)item).point.y==point.y) {result=item;}}}return result; } -(void)addItemToPool:(CustomCollectionItem *)item{if([[self.contentItemDictionary allKeys] containsObject:item.reuseIdentifier]){[[self.contentItemDictionary objectForKey:item.reuseIdentifier] addObject:item];}else{NSMutableArray *cellArray=[NSMutableArray arrayWithObject:item];[self.contentItemDictionary setObject:cellArray forKey:item.reuseIdentifier];} } #pragma mark - #pragma mark 頁面滾動 //topRowIndex ---> 當前最上一行的index(從0開始); //lastRowIndex ---> 當前最后一行的index //removeIndex ---> 當前被移除的最后一行的行數(從1開始) //addIndex ---> 在showcount基礎上增加的行數 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{@try {//手指向上移動移動基數后將顯示下一頁面//手指向下移動移動基數將移除最下一行BOOL isMoveUp=TRUE;//是否向下滑if (scrollView.contentOffset.y-_lastOffsetY>0) {isMoveUp=FALSE;}else{isMoveUp=TRUE;}_lastOffsetY=scrollView.contentOffset.y;//刷新更多if (scrollView.contentOffset.y==0) {if ([self.subviews containsObject:_refreshView]) {[_refreshView changeState:Refresh];}}else if(scrollView.contentOffset.y==scrollView.contentSize.height-scrollView.frame.size.height){if ([self.subviews containsObject:_moreView]) {[_moreView changeState:More];}}else if (scrollView.contentOffset.y>(scrollView.contentSize.height-scrollView.frame.size.height) ||scrollView.contentOffset.y<0) {if (scrollView.contentOffset.y>=(scrollView.contentSize.height-scrollView.frame.size.height+50)) {if ([self.subviews containsObject:_moreView]&&_moreView.viewState==More) {[_moreView changeState:ToMore];}}else if (scrollView.contentOffset.y<-50){if ([self.subviews containsObject:_refreshView]&&_refreshView.viewState==Refresh) {[_refreshView changeState:ToRefresh];}}}else{//判斷重用if (scrollView.contentOffset.y>_headerView.frame.size.height) {CGFloat realMove=scrollView.contentOffset.y-_headerView.frame.size.height;//增加的row坐標初始為0 移動一個移動基數后加/減1NSInteger addIndex=ceil((realMove-_baseOffsetY)/_baseCanMove);//刪除的row坐標初始為0 移動一個移動基數后加/減1NSInteger removeIndex=(realMove/_baseCanMove);//手指向上移動if (!isMoveUp) {//如果最后一行編號==增加的row坐標+1&&增加的row坐標<總行數-1if (_lastRowIndex==addIndex+_showCount-2&&addIndex<_rows-1) {//最后一行坐標++_lastRowIndex++;//如果最后一行坐標！=總行數；如果相等則為最后一行不需要增加if (_lastRowIndex!=_rows) {[self creatItem:_lastRowIndex];}}//如果刪除的row坐標！=0&&刪除的row坐標！=最上一行坐標&&最上一行坐標<總行數-顯示行數if (removeIndex!=0&&removeIndex!=_topRowIndex&&_topRowIndex<_rows-_showCount) {for (int i=0; i<_numberOfItemsInRow; i++) {CustomCollectionItem *item=[self getItemAtPoint:CGPointMake(removeIndex-1, i)];if (item!=nil) {[self addItemToPool:item];[item removeFromSuperview];}}_topRowIndex++;}}else{//remove-->add add-->removeif (removeIndex==_topRowIndex-1) {[self creatItem:removeIndex];_topRowIndex--;}if (addIndex!=0&&addIndex!=_lastRowIndex-_showCount+1) {if (_lastRowIndex==_rows) {_lastRowIndex--;}else{for (int i=0; i<_numberOfItemsInRow; i++) {CustomCollectionItem *item=[self getItemAtPoint:CGPointMake(_lastRowIndex, i)];if (item!=nil) {[self addItemToPool:item];[item removeFromSuperview];}}_lastRowIndex--;}}}}}}@catch (NSException *exception) {NSLog(@"customCollectionView exception %@",exception.reason);} } #pragma mark- #pragma mark item點擊 -(void)itemClickedAtPoint:(CGPoint)point{if ([_customDelegate respondsToSelector:@selector(itemDidSelectedAtPoint:)]) {[_customDelegate itemDidSelectedAtPoint:point];} } #pragma mark- #pragma mark 刷新更多-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{if (scrollView.contentOffset.y<-50) {if (_isNeedShowMoreTag==YES&&[self.subviews containsObject:_refreshView]) {if ([_customDelegate respondsToSelector:@selector(doCollectionRefresh)]) {[_customDelegate doCollectionRefresh];}[_refreshView changeState:EndRefresh];}}else if (scrollView.contentOffset.y>scrollView.contentSize.height-scrollView.frame.size.height+50){if (_isNeedShowMoreTag==YES&&[self.subviews containsObject:_moreView]) {if ([_customDelegate respondsToSelector:@selector(doCollectionMore)]) {[_customDelegate doCollectionMore];}[_moreView changeState:EndMore];}} } #import <UIKit/UIKit.h> #import <objc/runtime.h> #import <Foundation/Foundation.h> @interface CustomCollectionItem : UIView<UIGestureRecognizerDelegate,NSCoding> @property (strong,nonatomic) UIImageView *backgroundImage; @property (strong,nonatomic) NSString *reuseIdentifier; @property (assign,nonatomic) CGPoint point; -(id)initWithReuseIdentifier:(NSString *)identifier; -(void)itemTaped; -(void)reset; @end #import "CustomCollectionItem.h" #import "CustomCollectionView.h"@interface CustomCollectionItem() @property(strong,nonatomic) UIView *contentView; @end@implementation CustomCollectionItem-(id)initWithReuseIdentifier:(NSString *)identifier{self=[super init];if (self) {_reuseIdentifier=identifier;[self setUserInteractionEnabled:YES];_backgroundImage= [[UIImageView alloc] init];}return self; }-(void)setFrame:(CGRect)frame {[super setFrame:frame];[_backgroundImage setFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];_backgroundImage.tag=10099; }-(void)layoutSubviews {[super layoutSubviews];if([self viewWithTag:10099]== nil) {[self addSubview:_backgroundImage];[self sendSubviewToBack:_backgroundImage];}UITapGestureRecognizer *tapGR=[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(itemTaped)];[self addGestureRecognizer:tapGR]; }-(void)itemTaped{[(CustomCollectionView *)[self superview] itemClickedAtPoint:self.point]; }-(void)setBackgroundImage:(UIImageView *)backgroundImage {_backgroundImage=backgroundImage; }#pragma override -(void)reset{}- (void)encodeWithCoder:(NSCoder*)coder {Class clazz = [self class];u_int count;objc_property_t* properties = class_copyPropertyList(clazz, &count);NSMutableArray* propertyArray = [NSMutableArray arrayWithCapacity:count];for (int i = 0; i < count ; i++){const char* propertyName = property_getName(properties[i]);[propertyArray addObject:[NSString stringWithCString:propertyName encoding:NSUTF8StringEncoding]];}free(properties);for (NSString *name in propertyArray){id value = [self valueForKey:name];[coder encodeObject:value forKey:name];} }- (id)initWithCoder:(NSCoder*)decoder {if (self = [super init]){if (decoder == nil){return self;}Class clazz = [self class];u_int count;objc_property_t* properties = class_copyPropertyList(clazz, &count);NSMutableArray* propertyArray = [NSMutableArray arrayWithCapacity:count];for (int i = 0; i < count ; i++){const char* propertyName = property_getName(properties[i]);[propertyArray addObject:[NSString stringWithCString:propertyName encoding:NSUTF8StringEncoding]];}free(properties);for (NSString *name in propertyArray){id value = [decoder decodeObjectForKey:name];[self setValue:value forKey:name];}}return self; } @end

轉載于:https://www.cnblogs.com/LifeTechnologySupporter/p/5037806.html

總結

以上是生活随笔為你收集整理的iOS-UICollectionView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： android120 zhihuib
下一篇： Mycat对于导入和扩容迁移性能压测