iOS流布局UICollectionView系列一——初識與簡單使用UICollectionView

目錄[-]
iOS流布局UICollectionView系列一——初識與簡單使用UICollectionView
一、簡介
二、先來實現一個最簡單的九宮格類布局
三、UICollectionView中的常用方法和屬性
iOS流布局UICollectionView系列一——初識與簡單使用UICollectionView

一、簡介

    UICollectionView是iOS6之后引入的一個新的UI控件,它和UITableView有著諸多的相似之處,其中許多代理方法都十分類似。簡單來說,UICollectionView是比UITbleView更加強大的一個UI控件,有如下幾個方面:

1、支持水平和垂直兩種方向的布局

2、通過layout配置方式進行布局

3、類似于TableView中的cell特性外,CollectionView中的Item大小和位置可以自由定義

4、通過layout布局回調的代理方法,可以動態的定制每個item的大小和collection的答題布局屬性

5、更加強大一點,完全自定義一套layout布局方案,可以實現意想不到的效果

這篇博客,我們主要討論CollectionView使用原生layout的方法和相關屬性,其他特點和更強的制定化,會在后面的博客中介紹

二、先來實現一個最簡單的九宮格類布局

    在了解UICollectionView的更多屬性前,我們先來使用其進行一個最簡單的流布局試試看,在controller的viewDidLoad中添加如下代碼:

//創建一個layout布局類
UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc]init];
//設置布局方向為垂直流布局
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
//設置每個item的大小為100*100
layout.itemSize = CGSizeMake(100, 100);
//創建collectionView 通過一個布局策略layout來創建
UICollectionView * collect = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:layout];
//代理設置
collect.delegate=self;
collect.dataSource=self;
//注冊item類型 這里使用系統的類型
[collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];

[self.view addSubview:collect];

這里有一點需要注意,collectionView在完成代理回調前,必須注冊一個cell,類似如下:

[collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
這和tableView有些類似,又有些不同,因為tableView除了注冊cell的方法外,還可以通過臨時創建來做:

//tableView在從復用池中取cell的時候,有如下兩種方法
//使用這種方式如果復用池中無,是可以返回nil的,我們在臨時創建即可

  • (nullable __kindof UITableViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier;
    //6.0后使用如下的方法直接從注冊的cell類獲取創建,如果沒有注冊 會崩潰
  • (__kindof UITableViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(6_0);
    我們可以分析:因為UICollectionView是iOS6.0之前的新類,因此這里統一了從復用池中獲取cell的方法,沒有再提供可以返回nil的方式,并且在UICollectionView的回調代理中,只能使用從復用池中獲取cell的方式進行cell的返回,其他方式會崩潰,例如:

//這是正確的方法
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
return cell;
}

//這樣做會崩潰
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
// UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
// cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
UICollectionViewCell * cell = [[UICollectionViewCell alloc]init];
return cell;
}
上面錯誤的方式會崩潰,信息如下,讓我們使用從復用池中取cell的方式:

上面的設置完成后,我們來實現如下幾個代理方法:

這里與TableView的回調方式十分類似

//返回分區個數
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
//返回每個分區的item個數
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 10;
}
//返回每個item
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
return cell;
}
效果如下:

同樣,如果內容的大小超出一屏,和tableView類似是可以進行視圖滑動的。

還有一點細節,我們在上面設置布局方式的時候設置了垂直布局:

layout.scrollDirection = UICollectionViewScrollDirectionVertical;
//這個是水平布局
//layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
這樣系統會在一行充滿后進行第二行的排列,如果設置為水平布局,則會在一列充滿后,進行第二列的布局,這種方式也被稱為流式布局

三、UICollectionView中的常用方法和屬性

//通過一個布局策略初識化CollectionView

  • (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout;

//獲取和設置collection的layout
@property (nonatomic, strong) UICollectionViewLayout *collectionViewLayout;

//數據源和代理
@property (nonatomic, weak, nullable) id <UICollectionViewDelegate> delegate;
@property (nonatomic, weak, nullable) id <UICollectionViewDataSource> dataSource;

//從一個class或者xib文件進行cell(item)的注冊

  • (void)registerClass:(nullable Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier;
  • (void)registerNib:(nullable UINib *)nib forCellWithReuseIdentifier:(NSString *)identifier;

//下面兩個方法與上面相似,這里注冊的是頭視圖或者尾視圖的類
//其中第二個參數是設置 頭視圖或者尾視圖 系統為我們定義好了這兩個字符串
//UIKIT_EXTERN NSString *const UICollectionElementKindSectionHeader NS_AVAILABLE_IOS(6_0);
//UIKIT_EXTERN NSString *const UICollectionElementKindSectionFooter NS_AVAILABLE_IOS(6_0);

  • (void)registerClass:(nullable Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier;
  • (void)registerNib:(nullable UINib *)nib forSupplementaryViewOfKind:(NSString *)kind withReuseIdentifier:(NSString *)identifier;

//這兩個方法是從復用池中取出cell或者頭尾視圖

  • (__kindof UICollectionViewCell *)dequeueReusableCellWithReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath;
  • (__kindof UICollectionReusableView *)dequeueReusableSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath;

//設置是否允許選中 默認yes
@property (nonatomic) BOOL allowsSelection;

//設置是否允許多選 默認no
@property (nonatomic) BOOL allowsMultipleSelection;

//獲取所有選中的item的位置信息

  • (nullable NSArray<NSIndexPath *> *)indexPathsForSelectedItems;

//設置選中某一item,并使視圖滑動到相應位置,scrollPosition是滑動位置的相關參數,如下:
/*
typedef NS_OPTIONS(NSUInteger, UICollectionViewScrollPosition) {
//無
UICollectionViewScrollPositionNone = 0,
//垂直布局時使用的 對應上中下
UICollectionViewScrollPositionTop = 1 << 0,
UICollectionViewScrollPositionCenteredVertically = 1 << 1,
UICollectionViewScrollPositionBottom = 1 << 2,
//水平布局時使用的 對應左中右
UICollectionViewScrollPositionLeft = 1 << 3,
UICollectionViewScrollPositionCenteredHorizontally = 1 << 4,
UICollectionViewScrollPositionRight = 1 << 5
};
*/

  • (void)selectItemAtIndexPath:(nullable NSIndexPath *)indexPath animated:(BOOL)animated scrollPosition:(UICollectionViewScrollPosition)scrollPosition;

//將某一item取消選中

  • (void)deselectItemAtIndexPath:(NSIndexPath *)indexPath animated:(BOOL)animated;

//重新加載數據

  • (void)reloadData;

//下面這兩個方法,可以重新設置collection的布局,后面的方法多了一個布局完成后的回調,iOS7后可以用
//使用這兩個方法可以產生非常炫酷的動畫效果

  • (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated;
  • (void)setCollectionViewLayout:(UICollectionViewLayout *)layout animated:(BOOL)animated completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);

//下面這些方法更加強大,我們可以對布局更改后的動畫進行設置
//這個方法傳入一個布局策略layout,系統會開始進行布局渲染,返回一個UICollectionViewTransitionLayout對象
//這個UICollectionViewTransitionLayout對象管理動畫的相關屬性,我們可以進行設置

  • (UICollectionViewTransitionLayout *)startInteractiveTransitionToCollectionViewLayout:(UICollectionViewLayout *)layout completion:(nullable UICollectionViewLayoutInteractiveTransitionCompletion)completion NS_AVAILABLE_IOS(7_0);
    //準備好動畫設置后,我們需要調用下面的方法進行布局動畫的展示,之后會調用上面方法的block回調
  • (void)finishInteractiveTransition NS_AVAILABLE_IOS(7_0);
    //調用這個方法取消上面的布局動畫設置,之后也會進行上面方法的block回調
  • (void)cancelInteractiveTransition NS_AVAILABLE_IOS(7_0);

//獲取分區數

  • (NSInteger)numberOfSections;

//獲取某一分區的item數

  • (NSInteger)numberOfItemsInSection:(NSInteger)section;

//下面兩個方法獲取item或者頭尾視圖的layout屬性,這個UICollectionViewLayoutAttributes對象
//存放著布局的相關數據,可以用來做完全自定義布局,后面博客會介紹

  • (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
  • (nullable UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

//獲取某一點所在的indexpath位置

  • (nullable NSIndexPath *)indexPathForItemAtPoint:(CGPoint)point;

//獲取某個cell所在的indexPath

  • (nullable NSIndexPath *)indexPathForCell:(UICollectionViewCell *)cell;

//根據indexPath獲取cell

  • (nullable UICollectionViewCell *)cellForItemAtIndexPath:(NSIndexPath *)indexPath;

//獲取所有可見cell的數組

  • (NSArray<__kindof UICollectionViewCell *> *)visibleCells;

//獲取所有可見cell的位置數組

  • (NSArray<NSIndexPath *> *)indexPathsForVisibleItems;

//下面三個方法是iOS9中新添加的方法,用于獲取頭尾視圖

  • (UICollectionReusableView *)supplementaryViewForElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0);
  • (NSArray<UICollectionReusableView *> *)visibleSupplementaryViewsOfKind:(NSString *)elementKind NS_AVAILABLE_IOS(9_0);
  • (NSArray<NSIndexPath *> *)indexPathsForVisibleSupplementaryElementsOfKind:(NSString *)elementKind NS_AVAILABLE_IOS(9_0);

//使視圖滑動到某一位置,可以帶動畫效果

  • (void)scrollToItemAtIndexPath:(NSIndexPath *)indexPath atScrollPosition:(UICollectionViewScrollPosition)scrollPosition animated:(BOOL)animated;

//下面這些方法用于動態添加,刪除,移動某些分區獲取items

  • (void)insertSections:(NSIndexSet *)sections;

  • (void)deleteSections:(NSIndexSet *)sections;

  • (void)reloadSections:(NSIndexSet *)sections;

  • (void)moveSection:(NSInteger)section toSection:(NSInteger)newSection;

  • (void)insertItemsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths;

  • (void)deleteItemsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths;

  • (void)reloadItemsAtIndexPaths:(NSArray<NSIndexPath *> *)indexPaths;

  • (void)moveItemAtIndexPath:(NSIndexPath *)indexPath toIndexPath:(NSIndexPath *)newIndexPath;

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容