iOS小知识：封装上传图片视图（支持删除和添加）

举报
iOS逆向 发表于 2021/10/13 15:15:11 2021/10/13
【摘要】 iOS上传图片视图的封装【支持删除和添加】 使用UICollectionViewCell、UITableViewCell 搭建视图，采用Masonry进行布局，项目采用MVVM结构

前言

应用场景： 上传和展示多张图片的场景，比如风险商户处理、发布商品图片

技术特点：使用UICollectionViewCell、UITableViewCell 控件进行搭建，使用Masonry 框架布局，采用MVVM结构。

demo下载：https://download.csdn.net/download/u011018979/15868813

效果图：

I、 使用方法

先配置相册访问权限key

NSPhotoLibraryUsageDescription

The 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 mark - ******** 上传图片界面的初始模型数据
+ (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 tmp;
    
    
}
  • 处理上传图片逻辑

- (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 _cellView;
}

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 size;
}

初始化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 _collectionView;
}

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、核心代码

2.0 处理是否已经包含添加图片视图

2.0.1 判断是否已经包含添加图片视图



+ (BOOL)idContainsUploadPicturesAddIconWithArr:(NSArray*)arr{
    
    
    NSPredicate* predicate = [NSPredicate predicateWithFormat:@"type == %d",QCTCollectionModelType4UploadPicturesAddIcon];
    
    
    NSArray *tmparr = [arr filteredArrayUsingPredicate:predicate];
    
    
    
    
    if(tmparr.count>0){
        
        return YES;

    }

    
    
    return NO;
    

    
}

2.0.2 添加按钮数据模型

+ (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 tmp;
    
    
}

2.0.3 判断是否已经包含添加图片视图，如果没有，且数量小于上传的最大张数，则显示添加按钮

    [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];

        
        
        
        
    }];

2.1 ShowImageView 显示图片的视图

2.1.1 .h

#import <UIKit/UIKit.h>
#import "QCTCollectionModel.h"
#define KNDeleteH 7 //删除按钮的高度的一半
NS_ASSUME_NONNULL_BEGIN
/**
 显示图片的视图
 */
@interface ERPShowImageView : UIView
@property (nonatomic,strong) QCTCollectionModel *model;

@property (nonatomic,weak) UIImageView *imageView;

@property (nonatomic,weak) UIButton *deleteBtn;


@end

2.1.2.m

#import "ERPShowImageView.h"

@implementation ERPShowImageView

- (UIImageView *)imageView{
    if (nil == _imageView) {
        UIImageView *tmpView = [[UIImageView alloc]init];
        _imageView = tmpView;
        tmpView.contentMode = UIViewContentModeScaleAspectFill;
        tmpView.clipsToBounds = YES;
        [self addSubview:_imageView];
        
        __weak __typeof__(self) weakSelf = self;

        [tmpView mas_makeConstraints:^(MASConstraintMaker *make) {
            
            make.top.offset(kAdjustRatio(KNDeleteH));
            make.left.offset(kAdjustRatio(KNDeleteH));
            make.right.offset(kAdjustRatio(-KNDeleteH));
            
            
            make.bottom.offset(kAdjustRatio(-KNDeleteH));

            

        }];
        
        tmpView.userInteractionEnabled = YES;
        
        UITapGestureRecognizer *cutTap = [[UITapGestureRecognizer alloc] init];
//        __weak __typeof__(self) weakSelf = self;
        
        [[cutTap rac_gestureSignal] subscribeNext:^(id x) {
            
            
            
            
            if(weakSelf.model.type != QCTCollectionModelType4UploadPicturesAddIcon
               ){
                
                return ;
                
                
                
            }
            
            NSLog(@" 上传图片 ");
            
            
            if (weakSelf.model.block) {
                
                weakSelf.model.block(weakSelf.model);
                
                
            }
            
        }];
        [tmpView addGestureRecognizer:cutTap];

        
        

        
    }
    return _imageView;
}

- (UIButton *)deleteBtn{
    if (nil == _deleteBtn) {
        UIButton *tmpView = [[UIButton alloc]init];
        _deleteBtn = tmpView;
        [tmpView addTarget:self action:@selector(clickDeleteBtn) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:_deleteBtn];
//
        __weak __typeof__(self) weakSelf = self;

        [tmpView mas_makeConstraints:^(MASConstraintMaker *make) {
           
            make.centerY.equalTo(weakSelf.imageView.mas_top);
            make.centerX.equalTo(weakSelf.imageView.mas_right);
            

                    
            make.width.height.mas_equalTo(kAdjustRatio(2*KNDeleteH));
            
            
            
            
        }];
    }
    return _deleteBtn;
}

- (void)clickDeleteBtn{
//    [self removeFromSuperview];
    
    if(self.model.delblock){
        self.model.delblock(self.model);
        
    }
}


- (instancetype)initWithFrame:(CGRect)frame{
    
    self = [super initWithFrame:frame];
    NSLog(@"kninitWithFrame");
    if (self) {
        //构建子控件
        [self setupSubviews];
    }
    return self;
}

- (void)setupSubviews{
    NSLog(@"setupSubviews");
    self.imageView.hidden = NO;
    
    [self.deleteBtn setImage:[self imageWithImageName:@"icon_xinzengmendian_shanchu.png"] forState:UIControlStateNormal];
    
}

- (UIImage*)imageWithImageName:(NSString*)name{
    
    return [UIImage imageNamed:name];
    
//
}



- (void)layoutSubviews{
    [super layoutSubviews];
//    self.imageView.frame = self.bounds;
    
    
    [self layoutIfNeeded];
    
    
}



- (void)setModel:(QCTCollectionModel *)model{
    
    _model = model;
//    tm.imageType = ;

    
    switch (model.imageType) {
        case ERPimageType4name:
            {
                self.imageView.image = [UIImage imageNamed:model.imgName];

            }
            break;
            
            case ERPimageType4url:
                {

                    [self.imageView sd_setImageWithURL:[NSURL URLWithString:model.picurl] placeholderImage:[UIImage imageNamed:@"占位"]];
                    
                    
                     
                     

                    
                }
            
                break;
                

            
            
        default:
            
            
            break;
    }

    
    self.deleteBtn.hidden = model.isHiddenDelBtn;

}

2.2 数据模型 QCTCollectionModel


typedef enum : NSUInteger {
    ERPimageType4name,
    ERPimageType4url,
    ERPimageType4Uiimage,
} ERPimageType;

@property (nonatomic,assign) ERPimageType imageType;

//

@property (nonatomic , copy) NSString *picurl;


/**
 默认NO 显示删除按钮
 */
@property (nonatomic,assign) BOOL isHiddenDelBtn;
@property (nonatomic,copy) NSString *imgName;

2.3 完整Demo下载

demo源码下载：https://download.csdn.net/download/u011018979/15868813

  1. 应用场景： 上传和展示多张图片的场景，比如风险商户处理、发布商品图片

  2. 技术特点：使用UICollectionViewCell、UITableViewCell 控件进行搭建，使用Masonry 框架布局，采用MVVM结构。

III、注意事项

3.1 QMUIKit在iOS14 下首次唤起键盘卡住主线程的解决方案

iOS14 下首次唤起键盘卡住主线程

  • Main Thread Checker: UI API called on a background thread: -[UIWindow windowScene]
=================================================================
Main Thread Checker: UI API called on a background thread: -[UIWindow windowScene]
PID: 580, TID: 21138, Thread name: (none), Queue name: com.apple.root.user-initiated-qos, QoS: 25
Backtrace:
4   retail                              0x000000010576b628 __62+[UIWindow(QMUIUserInterfaceStyleWillChangeNotification) load]_block_invoke_3 + 296

Main Thread Checker: UI API called on a background thread: -[UIWindow traitCollection]
PID: 509, TID: 22376, Thread name: (none), Queue name: com.apple.root.user-initiated-qos, QoS: 25
Backtrace:
4   Housekeeper                         0x0000000100f3c000 __62+[UIWindow(QMUIUserInterfaceStyleWillChangeNotification) load]_block_invoke_3 + 92
  • 解决方案：如果你没使用QMUITheme，就直接注释掉代码即可。

在这里插入图片描述

@implementation UIWindow (QMUIUserInterfaceStyleWillChangeNotification)

#ifdef IOS13_SDK_ALLOWED
+ (void)load {
    
    return ;
}

如果你使用QMUITheme，则及时你更新4.2.1版本也无法根本性解决

这是因为系统自己在子线程访问了这些方法，只是 Main Thread Checker 对其做了兼容，发现 App 自己修改了这些方法的实现，才报错，没修改则不报错。
检测方式可以打条件符号断点，然后把 QMUI 那段代码注释掉，运行起来后会发现依然能命中这个断点，说明系统自身确实是在子线程访问了（UIKit 这种行为特别多，不只是这里）。
所以从原理上看，QMUI 命中这个主线程检测是不可避免的，目前只是做了一些优化，只有真正使用了 QMUITheme 组件时才会出现这个情况，没使用的时候就不会命中，以减少一部分的出错场景。这个优化将会跟随 4.2.1 版本发布。

see also

更多内容请关注#小程序：iOS逆向,只为你呈现有价值的信息，专注于移动端技术研究领域。

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
iOS 任务调度
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入