iOS - 图片选择器（UICollectionView展示）

前言

有两种展示的样式都是通过用UICollectionView来完成的

第一种： 推荐下我自己写的轮子，也是一个图片选择器，如果能帮到你请我star

地址https://github.com/zhanglizhong1002/MLPhotoKit

35C17697-BB8C-4A57-BCDD-6EDD5BD62A2C.png

• 华丽分割线

第二种： 以下效果利用UICollectionView展示，图片选择器是第三方TZImagePickerController， 直接贴上代码供大家参考

5A7CC746B0EE665AB5886AF4F1B92A81.png

创建类view .h的代码

//
//  MLSelectPhotosView.h
//  HuiBao
//
//  Created by 玛丽 on 2017/12/18.
//  Copyright © 2017年 玛丽. All rights reserved.
//

#import 

@interface MLSelectPhotosView : UIView
- (instancetype)initWithFrame:(CGRect)frame withVC:(UIViewController *)vc;
PROPERTY_STRONG UIViewController *VC;

@end

@interface MLSelectPhotosCell : UICollectionViewCell
PROPERTY_STRONG UIImageView *imageView;
PROPERTY_STRONG UIImageView *editImageView;
@property (nonatomic, copy) void (^clickEditCellBlock)(void);
@property (nonatomic, copy) void (^clickImageViewCellBlock)(void);

@end

.m的代码

//
//  MLSelectPhotosView.m
//  HuiBao
//
//  Created by 玛丽 on 2017/12/18.
//  Copyright © 2017年 玛丽. All rights reserved.
//

#import "MLSelectPhotosView.h"
#import "LCActionSheet.h"
#import "CBImageCompressor.h"
#import 

@interface MLSelectPhotosView() 
PROPERTY_STRONG UICollectionView *collectionView;
PROPERTY_STRONG UICollectionViewFlowLayout *flowLayout;
PROPERTY_STRONG NSMutableArray *dataArray;

@end

@implementation MLSelectPhotosView

- (instancetype)initWithFrame:(CGRect)frame withVC:(UIViewController *)vc
{
    self = [super initWithFrame:frame];
    if (self) {
        self.VC = vc;
        [self setupView];
    }
    return self;
}

- (void)setupView {
    
    [self addSubview:self.collectionView];
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return self.dataArray.count == 8 ? 8 : self.dataArray.count+1;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MLSelectPhotosCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    if (indexPath.row != self.dataArray.count) {
        cell.imageView.image = self.dataArray[indexPath.row];
    } else {
        cell.imageView.image = [UIImage imageNamed:@"me_new_add_select_image"];
    }
    cell.editImageView.hidden = indexPath.row == self.dataArray.count ? YES : NO;
    cell.imageView.userInteractionEnabled = indexPath.row == self.dataArray.count ? YES : NO;
    
    WS(weakSelf);
    cell.clickImageViewCellBlock = ^{
        TZImagePickerController *pickerController = [[TZImagePickerController alloc] initWithMaxImagesCount:8-self.dataArray.count columnNumber:4 delegate:nil pushPhotoPickerVc:YES];
        pickerController.allowCrop = YES;
        [weakSelf.VC presentViewController:pickerController animated:YES completion:nil];
        [pickerController setDidFinishPickingPhotosHandle:^(NSArray *photo, NSArray * assets, BOOL isSelectOriginalPhoto) {
            [weakSelf.dataArray addObjectsFromArray:photo];
            NSLog(@"photo == %@, assets == %@",photo,assets);
            [weakSelf.collectionView reloadData];
        }];
    };
    cell.clickEditCellBlock = ^{
        [weakSelf.dataArray removeObjectAtIndex:indexPath.row];
        [weakSelf.collectionView reloadData];
    };
    
    
    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return CGSizeMake(kScreenWidth/4, kScreenWidth/4);
}



- (UICollectionView *)collectionView {
    if (!_collectionView) {
        _collectionView = [[UICollectionView alloc] initWithFrame:self.frame collectionViewLayout:self.flowLayout];
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.backgroundColor = [UIColor whiteColor];
        [_collectionView registerClass:[MLSelectPhotosCell class] forCellWithReuseIdentifier:@"cell"];
    }
    return _collectionView;
}

- (UICollectionViewFlowLayout *)flowLayout {
    if (!_flowLayout) {
        _flowLayout = [[UICollectionViewFlowLayout alloc] init];
        _flowLayout.minimumLineSpacing = 0;
        _flowLayout.minimumInteritemSpacing = 0;
        _flowLayout.sectionInset = UIEdgeInsetsMake(8, 0, 8, 0);
    }
    return _flowLayout;
}

- (NSMutableArray *)dataArray {
    if (!_dataArray) {
        _dataArray = [[NSMutableArray alloc] init];
    }
    return _dataArray;
}

@end

@implementation MLSelectPhotosCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setupView];
    }
    return self;
}

- (void)setupView {
    
    [self.contentView addSubview:self.imageView];
    [self.contentView addSubview:self.editImageView];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    [self.imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.equalTo(@(8));
        make.bottom.right.equalTo(@(-8));
    }];
    
    [self.editImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.top.equalTo(self);
    }];
}

- (void)tagDidCLick:(UIGestureRecognizer *)tap {
    if (self.clickEditCellBlock) {
        self.clickEditCellBlock();
    }
}

- (void)tagDidImageViewCLick:(UIGestureRecognizer *)tap {
    if (self.clickImageViewCellBlock) {
        self.clickImageViewCellBlock();
    }
}

- (UIImageView *)imageView {
    if (!_imageView) {
        _imageView = [[UIImageView alloc] init];
        _imageView.image = [UIImage imageNamed:@"me_new_add_select_image"];
        _imageView.userInteractionEnabled = YES;
        [_imageView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tagDidImageViewCLick:)]];
    }
    return _imageView;
}

- (UIImageView *)editImageView {
    if (!_editImageView) {
        _editImageView = [[UIImageView alloc] init];
        _editImageView.userInteractionEnabled = YES;
        _editImageView.image = [UIImage imageNamed:@"ml_new_home_cell_edit"];
        [_editImageView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tagDidCLick:)]];
    }
    return _editImageView;
}

@end