0
点赞
收藏
分享

微信扫一扫

iOS小技能：上传图片视图的封装【上篇】（核心处理逻辑及注意事项）

玩物励志老乐 2022-08-01 阅读 87
iOS上传ico背景图移动开发

​

引言

本文为iOS上传图片视图的封装的上篇，介绍核心处理逻辑及注意事项​

iOS小技能：上传图片视图的封装【上篇】（核心处理逻辑及注意事项）_上传

I 核心处理逻辑

  1. 封装单元格视图：单元格视图ShowImageView的核心是显示上传成功图片，以及删除按钮。
  2. 上传图片视图的最后一个单元格视图的处理：判断视图模型数组中是否已经包含添加图片数据，如果没有包含，且总上传图片数量小于上传的最大张数，则显示添加按钮。
  3. 判断当前单元格显示的图片是背景图，还是上传的图片。

例如上传身份证的单元有身份证背景示例图，需要判断当前单元格显示的图片是背景图，还是上传的图片；才能友好的响应用户的点击事件，比如是应该放大图片，还是弹出选择图片方式视图。

1.1 判断是否已经包含添加图片单元格

  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;



}

  1. 构建添加按钮的数据模型

+ (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

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

//判断是否已经包含添加图片视图，如果没有，且数量小于上传的最大张数，则显示添加按钮
        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];





    }];

1.2 判断当前单元格显示的图片是背景图，还是上传的图片

例如上传身份证的单元有身份证背景示例图，需要判断当前单元格显示的图片是背景图，还是上传的图片；才能友好的响应用户的点击事件，比如是应该放大图片，还是弹出选择图片方式视图。

iOS小技能：上传图片视图的封装【上篇】（核心处理逻辑及注意事项）_iOS_02

UITapGestureRecognizer *cutTap = [[UITapGestureRecognizer alloc] init];


        [[cutTap rac_gestureSignal] subscribeNext:^(id x) {



            // 判断当前图片是否为背景图
            NSData *imagedata1 = UIImagePNGRepresentation(tmpView.image);
            NSData *imagedata2 = UIImagePNGRepresentation([UIImage imageNamed:self.models.backImgName]);

            BOOL  isShowSelectedPic =[imagedata1 isEqualToData:imagedata2];//当前图片为背景图时，弹出选择图片方式视图

            if(tmpView.image == nil){// 没有背景图的情况
                isShowSelectedPic = YES;
            }



            if(!isShowSelectedPic){// 已经上传图片，进行放大


                //进行放大查看

                if ( weakSelf.models.bigblock) {

                    weakSelf.models.bigblock(weakSelf.models);



                }


            }else{//弹出选择图片方式视图
                if

II 注意事项及单元格视图的封装

2.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，就直接注释掉代码即可。

iOS小技能：上传图片视图的封装【上篇】（核心处理逻辑及注意事项）_上传_03

@implementation UIWindow (QMUIUserInterfaceStyleWillChangeNotification)

#ifdef
+ (void)load {

    return

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

这是因为系统自己在子线程访问了这些方法，只是 Main Thread Checker 对其做了兼容，发现 App 自己修改了这些方法的实现，才报错，没修改则不报错。

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

2.2 完整Demo下载

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

iOS小技能：上传图片视图的封装【上篇】（核心处理逻辑及注意事项）_上传_04

  1. 技术特点：使用UICollectionViewCell、UITableViewCell 控件进行搭建，使用Masonry 框架布局，采用MVVM结构。
  2. 我的其他类似SDKpod 'KNPodlib'

2.3 单元格视图的封装

单元格视图ShowImageView的核心是显示上传成功图片，以及删除按钮。 .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

.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;

}

单元格的数据模型 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

see also

iOS 自定义折扣视图：支持添加/删除/选择折扣 【 应用场景：购物车界面选择整单折扣，无品收银台界面选择订单折扣】

举报

相关推荐

iOS小技能：上传图片视图的封装 【下篇】（用法）

iOSico上传图片搜索编程语言

iOS小技能： 用纯代码开发界面的过程 & 图片使用的相关注意事项

iOS成员变量bundle数组虚拟化云计算

ios 上传APP到APP STORE注意事项

iosapp store钥匙串上传xcode系统/运维

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

iOS前端icoios上传OpenStack云计算

Jenkins 上传接口文档注意事项

jenkins

shareSDK 分享的注意事项 iOS端

iOS笔记iOS相关iOS 技术点ios UI与...牛叉的demo学无止境环境集成上海恩美路演

列表的使用及注意事项

pythonpython

编码篇 - iOS各种权限状态的获取及注意事项

iOS开发笔记高能iOS基础iOS开发iOS在路上iOS开发系列IOS 开发iOS学习

Python eval的用法及注意事项

字符串pythonlinuxJavaScript前端开发

API的设计原则及注意事项!

API数据版本控制MySQL数据库yyds干货盘点
0 条评论