UICollectionView 集合視圖
主要包括6個部分:
1.UICollectionView:與UITableView類似,它是顯示內容的主視圖,注意到它並沒有佔據視圖的所有部分。
2.UICollectionViewCell:同樣與UITableViewCellInUITableView類似,它組成UICollectionView的子視圖。可以再IB中創建,也可以代碼實現。
3.Supplementary Views:主要用來顯示各個部分的標題或腳註。
4.Decoration View:裝飾!
5. UICollectionViewLayout:通過一些委託,它設置每一個單元在 UICollectionView中的位置。
6.UICollectionViewFlowLayout:Apple特別爲開發者提供的基本的“flow-based”佈局,它基於每一個元素的大小來排列。
準備UICollectionView
正如UITableView,你必須設置數據源(DataSource)和委託(Delegate)來提供數據和處理事件(比如,選中或取消選中單元格)。
在UICollectionView中,也需要設置這兩個。
數據源返回集合視圖的單元的數目和他們的視圖:
#pragma mark - UICollectionView Datasource
// 1
- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section {
//
return number; //number是每個章節(section)的單元個數
}
// 2
- (NSInteger)numberOfSectionsInCollectionView: (UICollectionView *)collectionView {
//
return number; //number是集合視圖的章節個數
}
// 3
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
//
return cell; //設置單元的格式
}
// 4
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
//
return UICollectionReusableView;
}
委託用來處理單元的選中、高亮或者移除等事件。
與UITableView類似,UICollectionView有處理選中和取消選中單元格的委託方法:
#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
// TODO: Select Item
}
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
// TODO: Deselect item
}
然而,在UICollectionView中,有一個不同於UITableView的新協議—UICollectionViewDelegateFlowLayout protocol(它是UICollectionViewDelegate的子協議),它可以控制集合視圖的佈局,配置單元間距,滾動方向等等。
#pragma mark – UICollectionViewDelegateFlowLayout
// 1處理給定單元的尺寸大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
NSString *searchTerm = self.searches[indexPath.section];
FlickrPhoto *photo = self.searchResults[searchTerm][indexPath.row];
// 2僅僅是一個網格視圖的例子,處理圖片的大小和邊界大小
CGSize retval = photo.thumbnail.size.width > 0 ? photo.thumbnail.size : CGSizeMake(100, 100);
retval.height += 35; retval.width += 35; return retval;
}
// 3 返回單元格、標題、腳註之間的距離
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
return UIEdgeInsetsMake(50, 20, 50, 20);
}
下面只需要添加單元格到UICollectionView
@property(nonatomic, weak) IBOutlet UICollectionView *collectionView;
- (void)viewDidLoad {
[super viewDidLoad];
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@“CellID"];
}