iOS 九宫格添加图添加,修改,显示图片

前言

在项目中经常会有反馈,选择多张图片,或者cell中会有需要显示几张照片。 最近一个项目中需要选择图片,图片可修改,本地需要存储,提到到服务器之后需要展示。图片存到数据库只能以NSData方式存储,所以加载图片有三种方式,NSDataUIImageurl字符串。所以简单总结下。在本地处理中需要有添加,修改,照片选择器有系统默认的,有三方比如,TZImagePickerController。所以两种方式姑且都考虑在内。对于网络加载的图片,有照片浏览的需求,借用了SDPhotoBrowser

代码

.h

1
2
3
4
5
6
7
8
9
10
11
12
13
@property(nonatomic,strong)NSMutableArray *imageA;//必须是不可变数组(可传入,返回的是UIImage的数组)接受NSData, UIImage ,NSString的集合
@property(nonatomic,assign)NSInteger maxCount;//最多个数
@property(nonatomic,weak)UIViewController *currentVc;//
@property(nonatomic,assign)BOOL isWebUrl;//网络加载
@property(nonatomic,assign)CGSize imageSize;
@property(nonatomic,assign)BOOL isSelect3rdPicker;//默认是原生的,可以选择TZlPicker
-(void)beginLayout;//开始布局
@property(nonatomic,assign)CGFloat totalH;

因为需要控制器缘故,需要一个控制器属性,但是设置为weak,避免循环引用。

.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
-(void)beginLayout{
if (!self.imageA || self.imageA.count <=0) {
if (self.isWebUrl) {
self.height = 0;
return;
}else{
if (!self.imageA) {
self.imageA = [NSMutableArray array];
}
}
}
//如果是data提前转换
[self.imageA enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
if ([obj isKindOfClass:[NSData class]]) {
[self.imageA replaceObjectAtIndex:idx withObject:[UIImage imageWithData:obj]];
}
}];
[self.imageA enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL * _Nonnull stop) {
//大于最大个数,停止
if (idx > (self.maxCount-1)) {
*stop = YES;
}
//创建图片
UIImageView *imageView = [self createImageView];
if ([obj isKindOfClass:[UIImage class]]) {
imageView.image = obj;
}
if ([obj isKindOfClass:[NSData class]]) {
imageView.image = [UIImage imageWithData:obj];
}
if ([obj isKindOfClass:[NSString class]]) {
[imageView sd_setImageWithURL:[NSURL URLWithString:obj] placeholderImage:[UIImage imageNamed:@"默认头像"] options:SDWebImageRefreshCached];
imageView.tag = idx;
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapShow:)];
imageView.userInteractionEnabled = YES;
[imageView addGestureRecognizer:tapGesture];
}
if (!self.isWebUrl) {
imageView.userInteractionEnabled = YES;
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(changImage:)];
[imageView addGestureRecognizer:tapGesture];
}
[self addSubview:imageView];
}];
//是否有add按钮
if (!self.isWebUrl) {
if (self.subviews.count < self.maxCount) {
UIImageView *imageView = [self createImageView];
[self addSubview:imageView];
UIImageView *addImageView =[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"add_picture"]];
addImageView.userInteractionEnabled = YES;
addImageView.contentMode = UIViewContentModeScaleAspectFit;
addImageView.center = CGPointMake(self.imageSize.width/2, self.imageSize.height/2);
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(addPic)];
[addImageView addGestureRecognizer:tapGesture];
[imageView addSubview:addImageView];
}
}
[self dealImageA];
}

至于如果传入的NSData数组,提前转换为UIImage的数组,统一一下。

添加图片:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
-(void)addPic{
if (self.isSelect3rdPicker) {
TZImagePickerController *pickerController = [[TZImagePickerController alloc]initWithMaxImagesCount:self.maxCount - self.imageA.count delegate:self];
// pickerController.sortAscendingByModificationDate = NO;
WS(weakSelf);
[pickerController setDidFinishPickingPhotosHandle:^(NSArray<UIImage *> *photo, NSArray *assets, BOOL isSelectOriginalPhoto){
if (photo.count) {
[weakSelf addNewImages:photo];
}
}];
[self.currentVc presentViewController:pickerController animated:YES completion:nil];
}else{
[self showAlert];
}
}
-(void)addNewImage:(UIImage *)newImage{
[self.imageA insertObject:newImage atIndex:0];
UIImageView *imageView = [self createImageView];
imageView.image = newImage;
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(changImage:)];
[imageView addGestureRecognizer:tapGesture];
[self insertSubview:imageView atIndex:0];
if (self.imageA.count == self.maxCount) {
UIImageView *addIcon = self.subviews[self.maxCount];
[addIcon removeFromSuperview];
}
[self dealImageA];
}
//添加多张图片--
-(void)addNewImages:(NSArray *)newImages{
//默认多张图片选择顺序是按照用户选择顺序,所以这里进行反序,因为后面把刚添加的index 置为0;
NSArray* images = [[newImages reverseObjectEnumerator] allObjects];
[images enumerateObjectsUsingBlock:^(UIImage * obj, NSUInteger idx, BOOL * _Nonnull stop) {
[self.imageA insertObject:obj atIndex:0];
UIImageView *imageView = [self createImageView];
imageView.image = obj;
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(changImage:)];
[imageView addGestureRecognizer:tapGesture];
[self insertSubview:imageView atIndex:0];
}];
if (self.imageA.count == self.maxCount) {
UIImageView *addIcon = self.subviews[self.maxCount];
[addIcon removeFromSuperview];
}
[self dealImageA];
}

修改图片:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
-(void)changImage:(UITapGestureRecognizer *)tap{
self.isEidtImage = YES;
self.eidtImageView = (UIImageView *)tap.view;
if (self.isSelect3rdPicker) {
TZImagePickerController *pickerController = [[TZImagePickerController alloc]initWithMaxImagesCount:self.maxCount - self.imageA.count delegate:self];
WS(weakSelf);
[pickerController setDidFinishPickingPhotosHandle:^(NSArray<UIImage *> *photo, NSArray *assets, BOOL isSelectOriginalPhoto){
if (photo.count) {
UIImage *image = photo[0];
weakSelf.eidtImageView.image = image;
NSUInteger index = [weakSelf.subviews indexOfObject:weakSelf.eidtImageView];
[weakSelf changeImageForIndex:index image:image];
weakSelf.isEidtImage = NO;
weakSelf.eidtImageView = nil;
}
}];
[self.currentVc presentViewController:pickerController animated:YES completion:nil];
}else{
[self showAlert];
}
}
//替换图片
-(void)changeImageForIndex:(NSUInteger)index image:(UIImage *)changeImage{
[self.imageA replaceObjectAtIndex:index withObject:changeImage];
}

最后

效果:选择照片.gif

demo地址:LXGGView