OC语言基础-实现可以动态编辑的UICollectionView

接上文我们接下来继续实现如何实现一个可以动态编辑的UIcollectionView

一、基本介绍

pagingEnabled：UICollectionView分页属性，设置其为YES，可启动分页效果

scrollEnabled：UICollectionView是继承自UIScrollerView的，所以设置他的滚动属性为YES，则可实现UIcollectionView滑动

二、实现UIcollectionView动态编辑

由于我给的示例数据源是写死的，所以本文是手动编辑的，实际项目中数据源根据实际情况调整，掌握方法就好

1、修改UICollectionView懒加载和数据源获取方法

ViewController.m文件

//
//  ViewController.m
//  UICollectionView
//
//  Created by wonders on 2024/12/2.
//

#import "ViewController.h"
#import "mainCollectionViewCell.h"
#define kScreen_Width [UIScreen mainScreen].bounds.size.width
@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>
@property (nonatomic, strong) UIView *headerView;
@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) NSMutableArray *dataSource;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
//    [self setupView];
    self.dataSource = [NSMutableArray array];
        
    [self.dataSource addObject:@{@"image": @"collectionView", @"title": @"1"}];
    [self.dataSource addObject:@{@"image": @"collectionView", @"title": @"2"}];
    [self.dataSource addObject:@{@"image": @"collectionView", @"title": @"3"}];
    [self.dataSource addObject:@{@"image": @"collectionView", @"title": @"4"}];
    [self.dataSource addObject:@{@"image": @"collectionView", @"title": @"5"}];
    [self.dataSource addObject:@{@"image": @"collectionView", @"title": @"6"}];
    [self.dataSource addObject:@{@"image": @"collectionView", @"title": @"7"}];
    [self.dataSource addObject:@{@"image": @"collectionView", @"title": @"8"}];
    
    [self.view addSubview:self.collectionView];
    [self layout];
}


#pragma mark -UICollectionView Delegate
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    // 每页显示4个，计算需要多少个空白项来补齐
    NSInteger itemsPerPage = 4;
    return self.dataSource.count + (itemsPerPage - (self.dataSource.count % itemsPerPage)) % itemsPerPage;
}


- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    mainCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"mainCollectionViewCell" forIndexPath:indexPath];
    
    BOOL isEmpty = NO;
    if (indexPath.item >= self.dataSource.count) {
        isEmpty = YES;
    }
    
    if (!isEmpty) {
        NSDictionary *item = self.dataSource[indexPath.item];
        cell.icon.image = [UIImage imageNamed:item[@"image"]];
        cell.title.text = item[@"title"];
    } else {
        // 设置空白项的默认图片和标题
        cell.icon.image = nil; // 或者设置一个空白图片
        cell.title.text = @"";
    }
    
    return cell;
}
#pragma mark -collectionView layout
- (void)layout{
    //设置collectionView的约束
    CGFloat collectionViewX = 15; // 左边距
    CGFloat collectionViewY = 100; // 顶部边距
    CGFloat collectionViewWidth = kScreen_Width - 2 * collectionViewX; // 宽度填充整个 headerView 减去左右边距
    CGFloat collectionViewHeight = 85; // 高度
    CGRect collectionViewFrame = CGRectMake(collectionViewX, collectionViewY, collectionViewWidth, collectionViewHeight);
    _collectionView.frame = collectionViewFrame;

}
#pragma mark -layUI
//创建 UICollectionView 实例并设置其背景颜色、代理和数据源
- (UICollectionView *)collectionView {
    if (!_collectionView) {
        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
        layout.itemSize = CGSizeMake((kScreen_Width-30)/4, 60);
        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        layout.minimumLineSpacing = 0;
        layout.minimumInteritemSpacing = 0;
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
        _collectionView.backgroundColor = [UIColor clearColor];
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.pagingEnabled = YES;//允许分页
        _collectionView.scrollEnabled = YES;//允许滑动
        _collectionView.showsVerticalScrollIndicator = NO;
        _collectionView.showsHorizontalScrollIndicator = NO;//隐藏水平垂直滚动条
        _collectionView.contentInset = UIEdgeInsetsMake(10, 0, 15, 0);
        [_collectionView registerClass:[mainCollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([mainCollectionViewCell class])];
    }
    return _collectionView;
}


@end

本文的这里设置了计算方法，用于在数据源内容减少时补空白项，当数组内容大于4小于8会用空白项补全到八项显示两页，如果数组内容小于4时则用空白项以确保只显示一页，确保美观，实际根据要求来

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    // 每页显示4个，计算需要多少个空白项来补齐
    NSInteger itemsPerPage = 4;
    return self.dataSource.count + (itemsPerPage - (self.dataSource.count % itemsPerPage)) % itemsPerPage;
}

三、实现效果展示

1、数组元素大于4小于8的效果

NIA. 2024-12-12 14.57.12

NIA. 2024-12-12 14.57.08

3、当数组元素小于4个时的效果