This is the 14th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge.

preface

The use of UICollectionView is familiar to any iOS developer, but there is still a lot to know in order to play with the full range of UICollectionView techniques. This blog post is about the UICollectionView to set different sizes of items, in order to meet the needs of the product, easy to record for future use, to share with the people in need.

Analysis of the

It is easy to set different sizes of collectionView items, but you must first make sure that the layout elements of the items are similar before you can share the cell. Then we need to inherit the UICollectionViewLayout to override the layout method, so that the collectionView of different width items, each item can keep the same spacing and not equal partition.

The core of setting UICollectionView for different sizes of items is to call methods: – (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout SizeForItemAtIndexPath :(NSIndexPath *)indexPath. I won’t go into much of the rest of it in this post. The specific implementation steps are as follows.

steps

Initialize the UICollectionView by lazy loading

The specific meaning of the following code is not described one by one, but the specific code is as follows:

- (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); / / on the lower left right _collectionView = [[UICollectionView alloc] initWithFrame: CGRectZero collectionViewLayout: layout]; If (@ the 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; }Copy the code
UICollectionView’s proxy method
1. Agent method 1, as shown below:
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return _proArr.count; // Array of data sources}Copy the code
2, the focus of this article, inherit UICollectionViewLayout to rewrite the layout method, the requirement of this instance is to achieve the operation of different sizes of items through this method, as shown below:
- (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); }else if (indexPath. Row == 2) {return CGSizeMake((screen_width-10), (screen_width-100)/2.0); // Return the size of a large *cell*}} return CGSizeZero; }Copy the code
3. Agent method 2, as shown below:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { TeaHomeCollectionViewCell2 *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([TeaHomeCollectionViewCell2 class]) forIndexPath:indexPath]; cell.bgImgV.contentMode = UIViewContentModeScaleAspectFill; / / prevent image deformation [cell bgImgV sd_setImageWithURL: [NSURL URLWithString: _proArr [indexPath. Row]] placeholderImage: [UIImage imageNamed:@""]]; return cell; }Copy the code

The specific effect diagram is as follows:

The last

The above is all of this chapter, welcome to pay attention to three shopkeeper’s wechat public number “program ape by three shopkeeper”, three shopkeeper’s Sina Weibo “three shopkeeper 666”, welcome to pay attention!