iOS开发:设置UICollectionView不同大小的item的方法

在iOS开发过程中,UICollectionView的使用作为iOS开发者来说都不陌生,但是要想完美的玩转UICollectionView的所有使用的技巧,还是需要了解很多的。本篇博文来分享一下关于UICollectionView设置不同大小item的方法,为的是迎合产品的需求,方便记录为了以后查看使用,分享给有需要的人。

设置不同大小的collectionview的item的方法也很简单,只是首先要确定item的布局元素都差不多,才能公用cell;然后需要继承UICollectionViewLayout重写布局方法,使得collectionview的不同宽度的item、每个item能够保持相同的间距不会等分。设置UICollectionView不同大小的item的核心就是调用方法:- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath,其他部分本篇博文不再过多介绍,一笔带过。具体实现步骤,如下所示。

一、懒加载初始化UICollectionView

下面代码的具体含义不再一一介绍,具体代码如下所示:

- (UICollectionView *)collectionView {

    if (!_collectionView) {

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

        layout.minimumLineSpacing = 5;

        layout.minimumInteritemSpacing = 5;

        layout.itemSize = CGSizeMake((SCREEN_WIDTH - 20)/2.0, (SCREEN_WIDTH - 100)/2.0);

        layout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5); //上左下右

        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];

        if (@available(iOS 11.0, *)) {

            _collectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;

        }else {

            self.automaticallyAdjustsScrollViewInsets = NO;

        }

        _collectionView.delegate = self;

        _collectionView.dataSource = self;

        _collectionView.backgroundColor = [UIColor whiteColor];

        [_collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([TeaHomeCollectionViewCell2 class]) bundle:nil] forCellWithReuseIdentifier:NSStringFromClass([TeaHomeCollectionViewCell2 class])];

        [_collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([TeaHomeCollectionReusableView class]) bundle:nil] forCellWithReuseIdentifier:NSStringFromClass([TeaHomeCollectionReusableView class])];

        [_collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([TeaHomeCollectionReusableView class]) bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];

    }

    return _collectionView;

}

二、UICollectionView的代理方法

1、代理方法一,如下所示:

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

    return _proArr.count;  //数据源的数组

}

2、本篇的重点,继承UICollectionViewLayout重写布局方法,本篇实例的需求就是通过该方法实现不同大小的item的操作,具体如下所示:

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

    if (indexPath.section == 0) {

        if (indexPath.row == 0 || indexPath.row == 1) {

            return CGSizeMake((SCREEN_WIDTH - 20)/2.0, (SCREEN_WIDTH - 100)/2.0);//返回两个小的cell的尺寸

        }else if (indexPath.row == 2) {

            return CGSizeMake((SCREEN_WIDTH - 10), (SCREEN_WIDTH - 100)/2.0);//返回大的cell的尺寸

        }

    }

    return CGSizeZero;

}

3、代理方法二,如下所示:

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

    TeaHomeCollectionViewCell2 *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([TeaHomeCollectionViewCell2 class]) forIndexPath:indexPath];

    cell.bgImgV.contentMode = UIViewContentModeScaleAspectFill; //防止图片变形

    [cell.bgImgV sd_setImageWithURL:[NSURL URLWithString:_proArr[indexPath.row]] placeholderImage:[UIImage imageNamed:@""]];

    return cell;

}

具体效果图如下所示:

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

三掌柜的微信公众号:

三掌柜的新浪微博:

发布了224 篇原创文章 · 获赞 328 · 访问量 108万+

猜你喜欢

转载自blog.csdn.net/CC1991_/article/details/103349742