前言
应用场景： 上传和展示多张图片的场景，比如风险商户处理、商品图片、终端设备的轮播图配置。
效果图：
技术特点：使用UICollectionViewCell、UITableViewCell 控件进行搭建，使用Masonry 框架布局，采用MVVM结构。
我的其他相关SDK pod 'KNPodlib'
6、private 仓库地址
I 用法
demo下载地址请搜索微信小程序：iOS逆向，进入发现页搜索“上传图片视图”。
配置相册访问权限key
NSPhotoLibraryUsageDescriptionThe app's Info.plist must contain an NSPhotoLibraryUsageDescription key with a string value explaining to the user how the app uses this data.1.1 初始化 cell
- cell
case ERPRelease_commoditiesViewSection4UploadPic:{
return [ERPcomposePhotosTableViewCell tableViewCellWithTableView:tableView block:^(id _Nonnull sender) {
} models:self.viewModel.Model4UploadPictures];
}break;
- 上传图片界面的初始模型数据
#pragma
+ (NSMutableArray*)getModel4ADDUploadPicturesWithBlock:(void (^)(id sender))block {
NSMutableArray *tmpD = @[
@{@"block":block,@"imgName":@"img_zhuece_tianjia",@"imageType":[NSNumber numberWithInt:ERPimageType4name],@"type":[NSNumber numberWithInt:QCTCollectionModelType4UploadPicturesAddIcon],@"isHiddenDelBtn":@1},
];
NSMutableArray *tmp = [[self class] mj_objectArrayWithKeyValuesArray:tmpD];
return
- 处理上传图片逻辑
void)Model4UploadPictures{
__weak __typeof__(self) weakSelf = self;
self.viewModel.Model4UploadPictures = [QCTCollectionModel getModel4ADDUploadPicturesWithBlock:^(UISwitch* sender) {
[weakSelf setupChooseimage];//上传图片
1.2 初始化 cellView
ERPcomposePhotosV4UploadPictures
- (ERPcomposePhotosV4UploadPictures *)cellView{
if (nil == _cellView) {
ERPcomposePhotosV4UploadPictures *tmpView = [[ERPcomposePhotosV4UploadPictures alloc]init];
_cellView = tmpView;
[tmpView setBackgroundColor:kcellColor];
[self.contentView addSubview:tmpView];
__weak __typeof__(self) weakSelf = self;
[tmpView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.contentView).offset(kAdjustRatio(20));
make.right.equalTo(weakSelf.contentView).offset(- kAdjustRatio(20));
make.top.equalTo(weakSelf.contentView).offset(kAdjustRatio(0));
make.bottom.equalTo(weakSelf.contentView).offset(- kAdjustRatio(0));
}];
}
return
1.3 约束的设置
根据模型数据，更新视图高度
mas_updateConstraints 计算宽度的时候采用UIScreen进行屏幕宽度的获取
- (void)setModels:( NSMutableArray*)models{
_models =models;
self.cellView.models = models;
NSInteger maxclos= 3;// 列数
CGFloat margin = 10;
//
// [self.cellView layoutIfNeeded];
// CGFloat w = (self.cellView.frame.size.width - margin*(maxclos-1))/maxclos;
CGFloat cellViewW =kWidth-kAdjustRatio(20*2) ;//计算宽度的时候采用UIScreen进行屏幕宽度的获取
CGFloat w = (cellViewW- margin*(maxclos-1))/maxclos;
CGFloat cell_H = w*(1);//宽高比
// NSLog(@"cell_H:%f",cell_H);//
NSInteger row = [QCT_Common getRowWithCount:models.count clos:maxclos];
[self.cellView mas_updateConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(kAdjustRatio(cell_H*row + (row -1)*10
设置sizeForItemAtIndexPath
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
CGSize size;
NSInteger maxclos= 3;// 列数
CGFloat margin = 10;
CGFloat w = (self.frame.size.width - margin*(maxclos-1))/maxclos;
CGFloat cell_H = w*(1);//宽高比 123/234
size = CGSizeMake(cell_H, cell_H);
return
初始化collectionView，并设置每一行之间的间距
- (UICollectionView *)collectionView {
if (_collectionView == nil) {
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
// 2.设置整个collectionView的内边距
//分别为上、左、下、右
flowLayout.sectionInset = UIEdgeInsetsMake(kAdjustRatio(0),kAdjustRatio(0),kAdjustRatio(0),kAdjustRatio(0));
//.设置每一行之间的间距
flowLayout.minimumLineSpacing = kAdjustRatio(10);
flowLayout.minimumInteritemSpacing = 0;
// flowLayout.itemSize = CGSizeMake((SCREEN_WIDTH-3*kAdjustRatio(10))/3.0, self.optionsView.height);
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
_collectionView.backgroundColor = [UIColor whiteColor];
_collectionView.showsVerticalScrollIndicator = NO;
_collectionView.bounces = NO;
_collectionView.dataSource = self;
_collectionView.delegate = self;
[_collectionView registerClass:[ERPUploadPicturesUICollectionViewCell class] forCellWithReuseIdentifier:@"ERPUploadPicturesUICollectionViewCell"];
if (@available(iOS 11.0, *)) {
_collectionView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
} else {
// Fallback on earlier versions
}
_collectionView.scrollEnabled = NO;
// UICollectionViewScrollDirectionHorizontal
__weak __typeof__(self) weakSelf = self;
[self addSubview:_collectionView];
[_collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.bottom.right.equalTo(weakSelf);
}];
}
return
1.4 处理图片添加成功的用法举例
- (void)UpdateImageToViewWithurl:(NSString*)picurl{
__weak __typeof__(self) weakSelf = self;
// 新增模型
QCTCollectionModel *tm = [QCTCollectionModel new];
tm.type = QCTCollectionModelType4ShowUploadPictures;
tm.imageType = ERPimageType4url;
tm.picurl = picurl;
[tm setDelblock:^(QCTCollectionModel* sender) {
[weakSelf.viewModel.Model4UploadPictures removeObject:sender];
//判断是否已经包含添加图片视图，如果没有，且数量小于上传的最大张数，则显示添加按钮
if(self.viewModel.Model4UploadPictures.count<maxcount4UploadPicturesInRelease_commodities && ( ![QCTCollectionModel idContainsUploadPicturesAddIconWithArr:self.viewModel.Model4UploadPictures])){// 处理最大数量
[weakSelf.viewModel.Model4UploadPictures addObject:[QCTCollectionModel getModel4ADDUploadPicturesWithBlock:^(UISwitch* sender) {
[weakSelf setupChooseimage];
} ].firstObject];
}
[weakSelf.viewModel.reloadProductFileUploadSubject sendNext:nil];
}];
[tm setBlock:^(id _Nonnull sender) {
}];
[self.viewModel.Model4UploadPictures insertObject:tm atIndex:self.viewModel.Model4UploadPictures.count-1];
if(self.viewModel.Model4UploadPictures.count>maxcount4UploadPicturesInRelease_commodities){// 处理最大数量
[self.viewModel.Model4UploadPictures removeLastObject];
}
// 刷新视图
[self.viewModel.reloadProductFileUploadSubject sendNext:nil];
}
II 解决图片压缩之后模糊的问题
本文的压缩方案：质量压缩（0.5） 结合比例压缩（1028）
NSData * imageData = UIImageJPEGRepresentation( [image compressWithTargetPixel:1280], k_UIImageJPEGRepresentationcompressionQuality);//1028
//1280
III demo下载
下载地址请搜索微信#小程序：iOS逆向，进入发现页搜索“上传图片视图”。