iOS仿探探六宮格相冊的實現,帶添加和刪除功能

先看一下實現效果如下圖:
仿探探的九宮格相冊截圖
具體實現代碼如下:
View視圖的創建

#import <UIKit/UIKit.h>
@protocol PhotoViewDelegate <NSObject>
-(void)addPhotoLessThanMax:(NSInteger)num;//添加圖片
-(void)deletePhotoTap:(NSInteger)tag;//刪除圖片
@end
typedef void (^PhotoBlock)(BOOL isBool);
@interface PhotoView : UIView<UIGestureRecognizerDelegate>
@property (assign, nonatomic) id <PhotoViewDelegate>delegate;
@property (strong, nonatomic)NSMutableArray *imgArray;
@property(nonatomic,copy)PhotoBlock inputBlock;
- (instancetype)initWithFrame:(CGRect)frame;
@end



#import "PhotoView.h"
#import "UIImage+GIF.h"
#define BIGIMAGE_WIDTH (ScreenWidth-70)/3*2+10
#define DIVIDE_WIDTH 10
#define SMALLIMAGE_WIDTH (ScreenWidth-70)/3

#define MOVEIMAGE_WIDTH SMALLIMAGE_WIDTH * 10

@interface PhotoView()
@property (strong, nonatomic)UIImageView *moveImageView;
@property (nonatomic,strong)NSMutableArray *viewArray;
@property (nonatomic,strong)NSMutableArray * btnAray;
@property (nonatomic,strong)NSMutableArray *rectArray;
@property (nonatomic,assign)BOOL isLongPress;
@property (nonatomic,assign)float touchX;
@property (nonatomic,assign)float touchY;
@property (nonatomic,assign)CGRect moveInitFrame;
@property (nonatomic,assign)CGRect moveFinishRect;
@property (nonatomic,assign)int startPosition;
@property (nonatomic,assign)BOOL isChangeEnd;
@property (nonatomic,assign)BOOL isPerfermMove;
@end

@implementation PhotoView

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

-(void)setImgArray:(NSMutableArray *)imgArray{
    _imgArray = imgArray;
    [self showImage];
}
-(void)initRect{
    NSValue *value0 = [NSValue valueWithCGRect:CGRectMake(0, 0, BIGIMAGE_WIDTH, BIGIMAGE_WIDTH)];
    NSValue *value1 = [NSValue valueWithCGRect:CGRectMake(BIGIMAGE_WIDTH + DIVIDE_WIDTH, 0, SMALLIMAGE_WIDTH, SMALLIMAGE_WIDTH)];
    NSValue *value2 = [NSValue valueWithCGRect:CGRectMake(BIGIMAGE_WIDTH + DIVIDE_WIDTH, SMALLIMAGE_WIDTH + DIVIDE_WIDTH, SMALLIMAGE_WIDTH, SMALLIMAGE_WIDTH)];
    NSValue *value3 = [NSValue valueWithCGRect:CGRectMake(0, BIGIMAGE_WIDTH + DIVIDE_WIDTH, SMALLIMAGE_WIDTH, SMALLIMAGE_WIDTH)];
    NSValue *value4 = [NSValue valueWithCGRect:CGRectMake(SMALLIMAGE_WIDTH + DIVIDE_WIDTH, BIGIMAGE_WIDTH + DIVIDE_WIDTH, SMALLIMAGE_WIDTH, SMALLIMAGE_WIDTH)];
    NSValue *value5 = [NSValue valueWithCGRect:CGRectMake(BIGIMAGE_WIDTH + DIVIDE_WIDTH, 2 * (SMALLIMAGE_WIDTH + DIVIDE_WIDTH), SMALLIMAGE_WIDTH, SMALLIMAGE_WIDTH)];
    self.rectArray = [NSMutableArray arrayWithObjects:value0,value1,value2,value3,value4,value5,nil];
}
//每次編輯之後重新排列圖片,更新新添加的圖片
-(void)showImage{
    if (self.inputBlock) {
        if (_imgArray.count >0) {
            self.inputBlock(YES);
        }else{
            self.inputBlock(NO);
        }
    }
    for (UIImageView * imageView in self.viewArray) {
        UIButton * btn= self.btnAray[imageView.tag];
        UIImage *image;
        if (_imgArray.count == 0) {
            imageView.contentMode = UIViewContentModeCenter;
            image = [UIImage imageNamed:@"添加圖片"];
            UITapGestureRecognizer *recongnizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleAddTapPress:)];
            [imageView addGestureRecognizer:recongnizer];
            btn.hidden = YES;
            imageView.image = image;
            return;
        }
        if (imageView.tag > _imgArray.count-1) {
            btn.hidden = YES;
            image = [UIImage imageNamed:@"添加圖片"];
            imageView.contentMode = UIViewContentModeCenter;
            UITapGestureRecognizer *recongnizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleAddTapPress:)];
            [imageView addGestureRecognizer:recongnizer];
        }else{
            image  = [_imgArray objectAtIndex:imageView.tag];
            imageView.contentMode = UIViewContentModeScaleAspectFill;
            btn.hidden = NO;
        }
        imageView.image = image;
    }
}
-(void)initShowImageView{
    self.viewArray = [NSMutableArray array];
    self.btnAray = [NSMutableArray array];
    for(int i= 0 ; i < self.rectArray.count ; i++){
        UIImageView *imageView = [[UIImageView alloc]init];
        imageView.backgroundColor = C6_238;
        imageView.tag = i;
        imageView.userInteractionEnabled = YES;
        imageView.layer.masksToBounds = YES;
        imageView.layer.cornerRadius = 10;
        imageView.frame = [[self.rectArray objectAtIndex:i] CGRectValue];
        [self.viewArray addObject:imageView];
        [self addSubview:imageView];
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake(imageView.width-30, imageView.height-30, 25, 25);
        [btn setBackgroundImage:[UIImage imageNamed:@"刪除照片"] forState:UIControlStateNormal];
        [btn addTarget:self action:@selector(handleDeleteTapPress:) forControlEvents:UIControlEventTouchUpInside];
        btn.tag = imageView.tag;
        btn.hidden = YES;
        [self.btnAray addObject:btn];
        [imageView addSubview:btn];
    }
}
#pragma mark ------添加照片----
-(void)handleAddTapPress:(UITapGestureRecognizer *)sender{
     if(self.delegate){
        [self.delegate addPhotoLessThanMax:6-self.imgArray.count];
    }
}
#pragma mark ---刪除圖片-----
-(void)handleDeleteTapPress:(UIButton *)sender{
    if(self.delegate){
        [self.delegate deletePhotoTap:sender.tag];
    }
    [self.imgArray removeObjectAtIndex:sender.tag];
    [self showImage];
}
@end

controller裏的實現

controller裏選取照片後的回調方法中把所選擇的新的圖片以UIIMage的形式添加進photoView的圖片數組裏

 //photos爲新增加的圖片數組
 NSMutableArray * phot = [NSMutableArray array];
 phot = weakSelf.photoView.imgArray;
 [phot  addObjectsFromArray:photos];
 //把新圖片數組重新賦值給photoView
 weakSelf.photoView.imgArray = phot;

controller裏實現photoView的代理方法,實現刪除和增加功能後,圖片的增減問題,num爲最多還可選幾張圖片六宮格最多顯示只能顯示6張,num=6-已有圖片數。保存編輯圖片信息的時候需要把最終新添加的圖片數組bigImageDataArray裏所存的圖片DATA的形式轉換成URL的形式,與編輯後的儲存URL的數組imageUrlDicArray合併一起,然後上傳至服務器端。

#pragma mark ------圖片編輯代理方法
-(void)addPhotoLessThanMax:(NSInteger)num{
    //點擊加號調取進入相冊選圖片方法
    [self pushImagePickerController:num];
}
-(void)deletePhotoTap:(NSInteger)tag{
    if (tag<self.imageUrlDicArray.count) {
    //說明刪除的是線上已有的圖片
        [self.imageUrlDicArray removeObjectAtIndex:tag];
    }else{
        //說明刪除的是新添加的圖片
        [self.bigImageDataArray removeObjectAtIndex:tag];
    }
}

好啦,這個頁面就寫到這裏,稍後有空會添加圖片的選擇上傳以及壓縮~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章