UICollectionView之九宫格封装

qh.png

惯例，先上效果图。
首先，要用UICollectionView封装一个九宫格效果的话
我们先创建一个继承UICollectionView的类QHCollectionViewNine
在QHCollectionViewNine.h中写个接口方法如下:

#import <UIKit/UIKit.h>

@interface QHCollectionViewNine : UICollectionView
/**
 *  @frame: collectionView的frame
 *
 *  @layout: UICollectionViewFlowLayout的属性 这次放在外界设置了，比较方便
 *
 *  @image: 本地图片数组(NSArray<UIImage *> *) 或者网络url的字符串(NSArray<NSString *> *)
 *
 */
- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout withImage:(NSArray *)image;
@end

在QHCollectionViewNine.m中

#import "QHCollectionViewNine.h"

@interface QHCollectionViewNine ()<UICollectionViewDelegate, UICollectionViewDataSource>
@property (nonatomic, strong) NSArray *imageArr;
@property (nonatomic, strong) UICollectionViewFlowLayout *Layout;
@end
@implementation QHCollectionViewNine

- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout withImage:(NSArray *)image {
    if (self = [super initWithFrame:frame collectionViewLayout:layout]) {
        _imageArr = image;
        _Layout = (UICollectionViewFlowLayout *)layout;
        self.pagingEnabled = NO;
        self.showsHorizontalScrollIndicator = NO;
        self.showsVerticalScrollIndicator = NO;
        self.bounces = NO;
        self.delegate = self;
        self.dataSource = self;
        [self registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class])];
    }
    return self;
}
#pragma mark - UICollectionViewDelegate, UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.imageArr.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath];
    UIImageView *imageV = nil;
    if ([NSStringFromClass([_imageArr[indexPath.row] class]) isEqualToString:@"UIImage"]) { // 如果是UIImage数组 即 本地图片
        imageV = [[UIImageView alloc] initWithImage:_imageArr[indexPath.row]];
    } else { // 如果是NSString 数组 即 urlStr
        imageV = [[UIImageView alloc] init];
        // 赋值在这里用SDWebImage加载图片
    }
    CGRect imageFrame = imageV.frame;
    imageFrame.size = _Layout.itemSize;
    imageV.frame = imageFrame;
    [cell.contentView addSubview:imageV];
    return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"%ld分区---%ldItem", indexPath.section, indexPath.row);
}

@end

最后在ViewController.m中调用即可

- (void)viewDidLoad {
    [super viewDidLoad];
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    layout.itemSize = CGSizeMake((self.view.frame.size.width - 40) / 3, (self.view.frame.size.width - 40) / 3);
    layout.minimumLineSpacing = 10.0; // 竖
    layout.minimumInteritemSpacing = 0.0; // 横
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    
    UIImage *image1 = [UIImage imageNamed:@"w.jpg"];
    UIImage *image2 = [UIImage imageNamed:@"c.jpg"];
    UIImage *image3 = [UIImage imageNamed:@"Mao"];
    NSArray *array = @[image2, image2, image3, image2, image3, image1, image3, image1, image1];

    QHCollectionViewNine *nineView = [[QHCollectionViewNine alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width) collectionViewLayout:layout withImage:array];
    [self.view addSubview:nineView];
}

最后附上Demo:https://github.com/catcups/UICollectionViewNine

UICollectionView之九宫格封装

推荐阅读更多精彩内容