iOS开发-UI Collection

Posted 2020-08-28 CUG

知识点

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);

    

}