iOS8 UICollectionView 集合視圖

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"];

}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章