美文网首页
UICollectionView原理及基本使用

UICollectionView原理及基本使用

作者: 乡下秋草 | 来源:发表于2017-06-06 11:46 被阅读110次

1、显示过程

当UICollectionView显示内容时,先从数据源获取cell,然后交给UICollectionView。再从UICollectionViewLayout获取对应的layout attributes(布局属性)。最后,根据每个cell对应的layout attributes(布局属性)来对cell进行布局,生成了最终的界面。而用户交互的时候,都是通过Delegate来进行交互。

2、数据源和代理方法

注册cell

[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];

注册Supplementary View 即分组头部底部视图

//UICollectionElementKindSectionHeader 头部
//UICollectionElementKindSectionFooter 底部
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"cellHead"];
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind: UICollectionElementKindSectionFooter withReuseIdentifier:@"cellFoot"];


数据源方法

/**
 获取分组内item的数量
*/
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
    return 3;
}
/**
 获取分组内section的数量
 */
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 3;
    
}
/**
 获取头部尾部视图
 */
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        UICollectionReusableView *headerView =(UICollectionReusableView *) [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"cellHead" forIndexPath:indexPath];
        
        
        [headerView setBackgroundColor:[UIColor redColor]];
        return headerView;
    }else{
        UICollectionReusableView *footerView =(UICollectionReusableView *) [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"cellFoot" forIndexPath:indexPath];
        [footerView setBackgroundColor:[UIColor greenColor]];
        return footerView;
    }
    
}
/**
 获取UICollectionViewCell
 */
- ( UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell1" forIndexPath:indexPath];
    [cell setBackgroundColor:[UIColor blueColor]];
    return cell;
    
}

常用代理方法

//这个协议用来设置和处理collectionView的功能和一些逻辑,所有方法都是可选实现:是否允许某个Item的高亮,返回NO,则不能进入高亮状态
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath{
    return YES;
}
//当item高亮时触发的方法

- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"indexpath == %ld",(long)indexPath.row);

}
//结束高亮状态时触发的方法

- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"indexpath == %ld",(long)indexPath.row);

}
//是否可以选中某个Item,返回NO,则不能选中

- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    return YES;
}
//是否可以取消选中某个Item

- (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
    return YES;
}
//已经选中某个item时触发的方法

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"indexpath == %ld",(long)indexPath.row);

}
//取消选中某个Item时触发的方法

- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
    
    NSLog(@"indexpath == %ld",(long)indexPath.row);
    
}

长按item弹出编辑菜单

//这个方法设置是否展示长按菜单

- (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath{
    return YES;
}
//这个方法用于设置要展示的菜单选项

- (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender{
    return  YES;
}
//这个方法用于实现点击菜单按钮后的触发方法,通过测试,只有copy,cut和paste三个方法可以使用
- (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender{
    
    if ([NSStringFromSelector(action) isEqualToString:@"cut:"]) {
        //点击了cut
        NSLog(@"点击了cut");
    }
    if ([NSStringFromSelector(action) isEqualToString:@"paste:"]) {
        //点击了paste
        NSLog(@"点击了paste");

    }
    if ([NSStringFromSelector(action) isEqualToString:@"copy:"]) {
        //点击了copy
        NSLog(@"点击了copy");

    }
    
    
}

3、UICollectionViewLayout

UICollectionViewLayout是通过UICollectionViewLayoutAttributes类来管理cell、Supplementary View和Decoration View的位置、transform、alpha、hidden等等。
UICollectionViewLayout的属性

//同一组当中,垂直方向:行与行之间的间距;水平方向:列与列之间的间距
@property (nonatomic) CGFloat minimumLineSpacing;
//垂直方向:同一行中的cell之间的间距;水平方向:同一列中,cell与cell之间的间距
@property (nonatomic) CGFloat minimumInteritemSpacing;
//每个cell统一尺寸
@property (nonatomic) CGSize itemSize;
//滑动反向,默认滑动方向是垂直方向滑动
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
//每一组头视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。
@property (nonatomic) CGSize headerReferenceSize;
//每一组尾部视图的尺寸。如果是垂直方向滑动,则只有高起作用;如果是水平方向滑动,则只有宽起作用。
@property (nonatomic) CGSize footerReferenceSize;
//每一组的内容缩进
@property (nonatomic) UIEdgeInsets sectionInset;

相关文章

网友评论

      本文标题:UICollectionView原理及基本使用

      本文链接:https://www.haomeiwen.com/subject/npjgfxtx.html