UICollectionView使用以及與UITableView的區別

　　在開始前咱們在這先附一段最簡單的代碼

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    
    UICollectionView *colView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    colView.backgroundColor = [UIColor grayColor];
    [colView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"myCell"];
    colView.delegate = self;
    colView.dataSource = self;
    
    [self.view addSubview:colView];

}

- (NSArray *)loadData
{
    NSArray *arr = [NSArray arrayWithObjects:@"cell", @"cell2", @"cell3", @"cell4", @"cell5", @"cell6", @"cell7",nil];
    return arr;
}

#pragma mark - UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return [[self loadData] count];
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *cellID = @"myCell";
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

代碼

 

當你運行時將看到，它與UITableView的佈局區別。

　　

1、介紹

　　UICollectionView類負責管理數據的有序集合以及以自定義佈局的模式來呈現這些數據，它提供了一些經常使用的表格（table）功能，此外還增長了許多單欄佈局。UICollectionView支持能夠用於實現多列網格、 平鋪的佈局、 圓形的佈局和更多的自定義佈局，甚至你能夠動態地改變它的佈局。

當將一個集合視圖添加到您的用戶界面，您的應用程序的主要工做是管理與該集合視圖關聯的數據。集合視圖的數據源對象，是一個對象，符合 UICollectionViewDataSource 協議，提供由您的應用程序數據集合中視圖分紅單個的item，而後能夠分爲節爲演示文稿中獲取其數據。item是您想要呈現的數據的最小單位。例如，在照片的應用程序，item多是一個單一的圖像。集合視圖使用一個cell來呈現item，這是您的數據源配置，並提供 UICollectionViewCell 類的一個實例。

除了將它嵌入在您的用戶界面，您可使用 UICollectionView 對象的方法以確保item的可視化表示匹配您的數據源對象中的順序。所以，每當您添加、 刪除或從新排列您的集合中的數據，您可使用此類的方法來插入、 刪除和從新排列相應cell的狀態。您還使用集合視圖對象來管理所選的item。

 

 2、使用

 

　　1.咱們要使用UICollectionView得實現UICollectionViewDataSource, UICollectionViewDelegate,UICollectionViewDelegateFlowLayout這三個協議。UICollectionViewDataSource是它的數據源，UICollectionViewDelegate是它的呈現樣式，UICollectionViewDelegateFlowLayout是它的佈局模式

 

　　2.初始化，在初始化以前咱們須要常見佈局實例

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

 

UICollectionView *colView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

 

　　3.註冊UICollectionView使用的cell類型。

【必須先註冊，不然會報異常

*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'could not dequeue a view of kind: UICollectionElementKindCell with identifier myCell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard'

】

[colView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"myCell"];

　　4.設置代理　

    colView.delegate = self;
    colView.dataSource = self;

 

 

　　5.實現協議

UICollectionViewDataSource

//配置UICollectionView的每一個section的item數 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return [[self loadData] count]; }

 

//配置section數
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1; }

 

//呈現數據
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { static NSString *cellID = @"myCell"; UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath]; cell.backgroundColor = [UIColor redColor]; return cell; }

 

UICollectionViewDelegateFlowLayout

//配置每一個item的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return CGSizeMake(100, 60); } //配置item的邊距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(20, 20, 0, 20); }

 

 效果

咱們明晰地能夠看到，它已經進行自動佈局，爲了更能說明問題，咱們如今將

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(200, 60);
}

 

 

return CGSizeMake(60, 60);

 

UICollectionViewDelegate

//點擊item時觸發
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { NSLog(@"您點擊了item:%@", [[self loadData] objectAtIndex:indexPath.row]); [collectionView cellForItemAtIndexPath:indexPath].backgroundColor = [UIColor redColor]; } //當前ite是否能夠點擊
- (BOOL) collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(nonnull NSIndexPath *)indexPath { if (indexPath.row % 2) { return YES; } return NO; }

 

 

咱們也能夠經過設置UICollectionViewCell的selectedBackgroundView屬性來改變cell選中時的背景視圖。

咱們還能夠設置哪些cell點擊時不高亮，點擊時cell的樣式和點擊後cell的樣式

- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } - (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath]; cell.backgroundColor = [UIColor redColor]; } - (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath]; cell.backgroundColor = [UIColor grayColor]; }