iOS開發-UI (三)Collection

標籤：element   nim   滑動   fit   apple   .section   xpath   items   oid   

知識點

1.UICollectionView的建立

2. UICollectionView的常用代理方法

3. UICollectionView相關XIB操作

================================

UICollectionView的建立

1.UICollectionViewLayout

作用：控制collectionView布局的一個抽象類別

 

注意：一般不直接使用這個類，因為這個類很多方法都沒有實現，只是規定了很多屬性和方法，自已定義布局需要建立一個類繼承UICollectionViewLayout，然後設定自訂布局

 

2.UICollectionViewFlowLayout

作用：系統寫好的一個瀑布流布局

//使用系統寫好的一個瀑布流布局

    UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];

/*

     UICollectionViewScrollDirectionVertical,

     UICollectionViewScrollDirectionHorizontal

     */

    //設定滑動的方向

    layout.scrollDirection = UICollectionViewScrollDirectionVertical;

    //設定item之間的最小間距(豎直滑動的時候，表示的橫向間距，水平滑動的時候，表示的是縱向間距)

    layout.minimumInteritemSpacing = 35;

    //設定item之間的最小間距(豎直滑動的時候，表示的縱向間距，水平滑動的時候，表示的是橫向間距)

    layout.minimumLineSpacing = 10;

 

3.- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout;

作用：建立一個UICollectionView，必須提供一個UICollectionViewLayout

//執行個體化一個UICollectionView

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

 

4.協議代理

1）UICollectionViewDataSource

2）UICollectionViewDelegateFlowLayout

================================

UICollectionView的常用代理方法

#pragma mark- UICollectionView的代理方法

1.- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

作用：返回組數

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    

    return 10;

}

2.- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;

作用：返回元素個數

//返回每組當中所有的元素個數

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

    return 10;

}

3.- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

作用：返回元素所使用的UICollectionViewCell

//返回每個元素所使用的UICollectionViewCell對象

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

    //去複用隊列尋找cell

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

    //改變背景色

    cell.backgroundColor = [UIColor redColor];

    return cell;

}

4.- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

作用：返回元素的CGSize大小

//修改每一個item的寬度和高度

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    

    return CGSizeMake(100, 100);

}

5.- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

作用：返回元素之間允許的最小間距，如果是水平滑動，則代表垂直距離，如果豎直滑動，則代表橫向距離

//效果同layout.minimumInteritemSpeacing,二選一

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{   

    

}

 

6.- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;

作用：返回元素之間允許的最小間距，如果是水平滑動，則代表橫向距離，如果豎直滑動，則代表垂直距離

//效果同layout.minimumLineSpacing,二選一

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{

    

}

7.- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

作用：控制一組視圖和螢幕邊界的（上，左，下，右）距離

//返回每一組元素跟螢幕4個邊界的距離(上，左，下，右)

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{

    

    //建立一個UIEdgeInsets的結構體

    return UIEdgeInsetsMake(10, 10, 10, 10);

    

}

 

8.- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

作用：返回頭部視圖的CGSize，如果是水平滑動，則寬度有效，如果是豎直滑動，只有高度有效

//返回頭部視圖的寬和高

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{

    

    //注意：如果是豎直滑動，則只有高度有效，如果是水平滑動，則只有寬度有效

    return CGSizeMake(50, 50);

}

 

9.- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

作用：返回頭部視圖

//返回頭部和尾部視圖所使用的UICollectionReusableView對象

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

    

    //由於頭部和尾部視圖的執行個體化都需要調用此方法，所以需要通過kind判斷產生的是頭部視圖還是尾部視圖

    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {

        //表示需要建立頭部視圖

        //複用形式建立頭部視圖

        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];

        

        //改變背景色

        headerView.backgroundColor = [UIColor greenColor];

        

        return headerView;

        

    }

    

    return nil;

}

 

10.- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;

作用：選中某個元素

//選中某一個item

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    

    NSLog(@"第%ld組第%ld個",indexPath.section,indexPath.item);

    

}

 

iOS開發-UI (三)Collection