iOSDay34之UICollectionView

標籤：

1. 什麼是集合視圖

　　在iOS6.0之後, 蘋果推出了一個新的繼承於 UIScrollView 的視圖, UICollectionView , 也被稱之為 集合視圖. 和 UITableView 共同作為在開發中非常常用的兩個視圖, 常常作為項目的主介面出現

2. 建立 UICollectionView　
　1> UICollectionView 的實現

　　UICollectionView 的實現跟 tableView 不一樣的地方在於 Item 的布局稍微複雜一點, 需要用 UICollectionViewLayout 類來描述視圖的視圖的布局. 我們在項目中常用的是系統提供的 UICollectionViewFlowerLayout 類, 也可以自訂 UICollectionViewLayout

　2> 建立 UICollectionViewFlowerLayout

 1     // 1. 定義 collectionView 的樣式 2      3     self.myFlowLayout = [UICollectionViewFlowLayout new]; 4     // 設定屬性 5     // 給定Item的大小 6     self.myFlowLayout.itemSize = CGSizeMake((kWidth - 40) / 3, kWidth / 3); 7     // 每兩個Item之間的最小間隙(垂直滾動) 8     self.myFlowLayout.minimumInteritemSpacing = 10; 9     // 每兩個Item之間的最小間隙(水平滾動)10     self.myFlowLayout.minimumLineSpacing = 10;11     // 設定滾動方向12     self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical; // 垂直方向13 //    self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal; // 水平方向14     // 設定視圖的內邊距(上左下右)15     self.myFlowLayout.sectionInset = UIEdgeInsetsMake(20, 10, 10, 10);16     17     // 布局頭視圖尺寸18     self.myFlowLayout.headerReferenceSize = CGSizeMake(0, 50);19     20     // 布局尾視圖尺寸21     self.myFlowLayout.footerReferenceSize = CGSizeMake(0, 50);

　3> 初始化 UICollectionView

1     // 2.布局 collectionView2     // 建立對象並指定樣式3     self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.myFlowLayout];4     5     self.collectionView.backgroundColor = [UIColor cyanColor];6     7     [self addSubview:self.collectionView];

　4> 設定代理

    // 設定代理    self.rootView.collectionView.delegate = self;    self.rootView.collectionView.dataSource = self;

　5> 註冊cell

    // 第一步:註冊cell    [self.rootView.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier_cell];

　6> 代理方法

　　① UICollectionView 和 UITableView 一樣有兩個必須實現的代理方法

　　　返回多少個 Item　

1 // 設定每個分區有多少個Item2 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section3 {4     return 10;5 }

　　　指定每個 Item 的樣式

 1 // 返回每一個Item的cell對象 2 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath 3 { 4     RootCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier_cell forIndexPath:indexPath]; 5      6     cell.backgroundColor = [UIColor redColor]; 7      8     if (0 == indexPath.section) { 9         cell.photoImage.image = [UIImage imageNamed:@"1"];10     }11     if (1 == indexPath.section) {12         cell.photoImage.image = [UIImage imageNamed:@"2"];13     }14     if (2 == indexPath.section) {15         cell.photoImage.image = [UIImage imageNamed:@"3"];16     }17     18     return cell;19 }

　　　RootCell 為自訂 Cell　　

　　② 選擇實現的代理方法

　　　UICollectionView 有很多可以選擇實現的代理方法,例如:

• 設定分區個數:

1 // 返回分組個數2 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView3 {4     return 3;5 }

• Item點擊方法

1 // 點擊Item2 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath3 {4     SecondViewController *secondVC = [SecondViewController new];5     6     [self.navigationController pushViewController:secondVC animated:YES];7 }

• 返回頭部, 尾部視圖的樣式

　　　UICollectionView 不能像 UITableView 一樣直接指定頭部和尾部視圖, 需要註冊使用, 最大的好處是添加了重用機制。

 1     // 註冊頭視圖 2     [self.rootView.collectionView registerClass:[HeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"]; 3      4     // 註冊尾視圖 5     [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"]; 6 // 返回頭視圖和尾視圖 7 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath 8 { 9     // 判斷是頭視圖還是尾視圖10     if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {11         12         HeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerView" forIndexPath:indexPath];13         14 //        headerView.backgroundColor = [UIColor redColor];15         16         switch (indexPath.section) {17             case 0:18                 headerView.headerLabel.text = @"學生期";19                 break;20             case 1:21                 headerView.headerLabel.text = @"生活期";22                 break;23             case 2:24                 headerView.headerLabel.text = @"程式員";25                 break;26             default:27                 break;28         }29         return headerView;30     }31     32     UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];33     footerView.backgroundColor = [UIColor lightGrayColor];34     35     return footerView;36 }

　　:

　　

3. 布局協議

　　布局協議: UICollectionViewDelegateFlowLayout , 它是對 UICollectionViewDelegate 的擴充　

 

iOSDay34之UICollectionView