iOS-UICollectionView的簡單使用(原創)

-Advertisement-

UICollectionView是一種新的數據展示方式，簡單來說可以把他理解成多列的UITableView(請一定註意這是UICollectionView的最最簡單的形式)。如果你用過iBooks的話，可能你還對書架佈局有一定印象：一個虛擬書架上放著你下載和購買的各類圖書，整齊排列。其實這就是一個U

前言

UICollectionView是一種新的數據展示方式，簡單來說可以把他理解成多列的UITableView(請一定註意這是UICollectionView的最最簡單的形式)。如果你用過iBooks的話，可能你還對書架佈局有一定印象：一個虛擬書架上放著你下載和購買的各類圖書，整齊排列。其實這就是一個UICollectionView的表現形式，或者iPad的iOS6中的原生時鐘應用中的各個時鐘，也是UICollectionView的最簡單的一個佈局。

基礎知識

一.創建UICollectionView的常用方法

1.創建cell以及header,footer

使用代碼創建

- registerClass:forCellWithReuseIdentifier: - registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

使用xib創建 - registerNib:forCellWithReuseIdentifier: - registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

復用cell - dequeueReusableCellWithReuseIdentifier:forIndexPath: - dequeueReusableSupplementaryViewOfKind: :withReuseIdentifier:forIndexPath:

2.獲取Collection View中的Item及位置 - indexPathForItemAtPoint: - indexPathsForVisibleItems - indexPathForCell: - cellForItemAtIndexPath:

3.獲取Collection View的狀態 - numberOfSections - numberOfItemsInSection:

二:代理方法

1.UICollectionViewDelegate

1.處理選擇的Cells

- collectionView:shouldSelectItemAtIndexPath:

- collectionView:didSelectItemAtIndexPath:

- collectionView:shouldDeselectItemAtIndexPath:

- collectionView:didDeselectItemAtIndexPath:

2.處理Cells的高亮

- collectionView:shouldHighlightItemAtIndexPath:

- collectionView:didHighlightItemAtIndexPath:

- collectionView:didUnhighlightItemAtIndexPath:

2.UICollectionViewDataSource

1.獲取Section和Item的數量

- collectionView:numberOfItemsInSection:

- numberOfSectionsInCollectionView:

2.獲取Items的視圖

- collectionView:cellForItemAtIndexPath:

- collectionView:viewForSupplementaryElementOfKind： atIndexPath:

關於學習UICollectionView我們可以和UITableView進行對比著學習下麵我們來寫一個簡單的小例子來具體使用一下這些方法要實現的效果如下圖

1.初始化視圖佈局對象導入代理這裡要說的是UICollectionView 有三個代理方法可以根據實際情況進行導入

<1>UICollectionViewDataSource

<2>UICollectionViewDelegate

<3>UICollectionViewDelegateFlowLayout

- (void)viewDidLoad {
    [super viewDidLoad];
    //初始化一個視圖佈局對象
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];
    collectionView.backgroundColor = [UIColor whiteColor];
    collectionView.dataSource = self;
    collectionView.delegate = self;
    [self.view addSubview:collectionView];
    //註冊cell 必須要有
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCell"];
}

2.實現具體的代理方法以下代碼中有詳情註釋

//定義展示UICollectionViewCell的個數
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 20;
}
//定義展示section的個數
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 2;
}
//cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellID = @"UICollectionViewCell";
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    cell.backgroundColor = [UIColor orangeColor];
   
    return cell;
}
//定義每個item的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    return CGSizeMake(50, 50);
}
//上左下右  每一組之間的間距
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    //對組進行操作
    return UIEdgeInsetsMake(50, 50, 50, 50);
}
//UICollectionView被選中時調用的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
    //臨時改變個顏色，看好，只是臨時改變的。如果要永久改變，可以先改數據源，然後在cellForItemAtIndexPath中控制。（和UITableView差不多吧！O(∩_∩)O~）
    cell.backgroundColor = [UIColor redColor];
    NSLog(@"item======%ld",(long)indexPath.item);
    NSLog(@"row=======%ld",indexPath.row);
    NSLog(@"section===%ld",indexPath.section);
}
//點擊cell 對上一個cell進行操作 // 取消選中操作
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
    
     UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor yellowColor];
    
}
//返回這個UICollectionView是否可以被選擇
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}
// 設置最小行間距，也就是前一行與後一行的中間最小間隔
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return 10;
}

// 設置最小列間距，也就是左行與右一行的中間最小間隔
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    return 10;
}
// 設置是否允許取消選中
- (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"%s", __FUNCTION__);
    return YES;
}
// 由高亮轉成非高亮完成時的回調
- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"%s", __FUNCTION__);
}
// 高亮完成後回調
- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"%s", __FUNCTION__);
}
// 允許選中時，高亮
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"%s", __FUNCTION__);
    return YES;
}

總結一下這些代理方法可以根據開發中的實際情況進行選擇當然也有像UITableView那樣的自定義Cell 只需要繼承至UICollectionViewCell即可。

您的分享是我們最大的動力!