9宫格实现微信朋友圈图片点击放大缩小弹簧效果

//之前写Demo要实现点击scrollView中图片的放大缩小的效果，用了scrollView自带的viewForZoomingInScrollView方法，效果不明显，后来改用点击图片，切换控制器，但是就有明显的push和pop痕迹（以上2种都需要给图片添加tap手势），还是不理想，最后在网上看到个类似微信朋友圈的demo，可以点击图片，放大缩小，并可以添加手势。

//用到的3方为"SDPhotoBrowser"

//最好是在tableViewcell中使用，但是我这有别的需求。

1.需要创建个继承自UIView的9宫格view

.h

／＊＊＊＊＊＊＊＊＊＊＊＊＊／

#import <UIKit/UIKit.h>

#import "SDPhotoBrowser.h"

///九宫格图片间隔

#define kJGG_GAP 5

/**

 *

 *  @param index      点击index

 *  @param dataSource 数据源

 */

typedef void (^TapBlcok)(NSInteger index,NSArray *dataSource,NSIndexPath *indexpath);

@interface JGGView : UIView<SDPhotoBrowserDelegate>

/**

 *  九宫格显示的数据源，dataSource中可以放UIImage对象和NSString(http://sjfjfd.cjf.jpg)，还有NSURL也可以

 */

@property (nonatomic, retain)NSArray * dataSource;

/**

 *  TapBlcok

 */

@property (nonatomic, copy)TapBlcok  tapBlock;

/**

 *  TapBlcok

 */

@property (nonatomic, copy)NSIndexPath  *indexpath;

/**

 *  Description 九宫格

 *

 *  @param frame      frame

 *  @param dataSource 数据源

 *  @param tapBlock tapBlock点击的block

 *  @return JGGView对象

 */

- (instancetype)initWithFrame:(CGRect)frame dataSource:(NSArray *)dataSource completeBlock:(TapBlcok )tapBlock;

/**

 *  Description 九宫格

 *

 *  @param dataSource 数据源

 *  @param tapBlock tapBlock点击的block

 *  @return JGGView对象

 */

-(void)JGGView:(JGGView *)jggView DataSource:(NSArray *)dataSource completeBlock:(TapBlcok)tapBlock;

/**

 *  配置图片的宽（正方形，宽高一样）

 *

 *  @return 宽

 */

+(CGFloat)imageWidth;

/**

 *  配置图片的高（正方形，宽高一样）

 *

 *  @return 高

 */

+(CGFloat)imageHeight;

@end

／＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊／

.m

#import "JGGView.h"

#import "UIImageView+WebCache.h"

#import "Masonry.h"

@implementation JGGView

- (instancetype)initWithFrame:(CGRect)frame dataSource:(NSArray *)dataSource completeBlock:(TapBlcok )tapBlock

{

    self = [super initWithFrame:frame];

    if (self) {

        for (NSUInteger i=0; i<dataSource.count; i++) {

            UIImageView *iv = [[UIImageView alloc]initWithFrame:CGRectMake(0+([JGGView imageWidth]+kJGG_GAP)*(i%3),floorf(i/3.0)*([JGGView imageHeight]+kJGG_GAP),[JGGView imageWidth], [JGGView imageHeight])];

            if ([dataSource[i] isKindOfClass:[UIImage class]]) {

                iv.image = dataSource[i];

            }else if ([dataSource[i] isKindOfClass:[NSString class]]){

                [iv sd_setImageWithURL:[NSURL URLWithString:dataSource[i]] placeholderImage:[UIImage imageNamed:@"placeholder"]];

            }else if ([dataSource[i] isKindOfClass:[NSURL class]]){

                [iv sd_setImageWithURL:dataSource[i] placeholderImage:[UIImage imageNamed:@"placeholder"]];

            }

            self.dataSource = dataSource;

            self.tapBlock = tapBlock;// 一定要给self.tapBlock赋值

            iv.userInteractionEnabled = YES;//默认关闭NO，打开就可以接受点击事件

            iv.tag = i;

            [self addSubview:iv];

            UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImageAction:)];

            [iv addGestureRecognizer:singleTap];

        }

    }

    return self;

}

-(void)JGGView:(JGGView *)jggView DataSource:(NSArray *)dataSource completeBlock:(TapBlcok)tapBlock

{

        for (NSUInteger i=0; i<dataSource.count; i++) {

            UIImageView *iv = [UIImageView new];

            if ([dataSource[i] isKindOfClass:[UIImage class]]) {

                iv.image = dataSource[i];

            }else if ([dataSource[i] isKindOfClass:[NSString class]]){

                [iv sd_setImageWithURL:[NSURL URLWithString:dataSource[i]] placeholderImage:[UIImage imageNamed:@"placeholder"]];

            }else if ([dataSource[i] isKindOfClass:[NSURL class]]){

                [iv sd_setImageWithURL:dataSource[i] placeholderImage:[UIImage imageNamed:@"placeholder"]];

            }

            jggView.dataSource = dataSource;

            jggView.tapBlock = tapBlock;

            iv.userInteractionEnabled = YES;//默认关闭NO，打开就可以接受点击事件

            iv.tag = i;

            [jggView addSubview:iv];

            //九宫格的布局

            CGFloat  Direction_X = (([JGGView imageWidth]+kJGG_GAP)*(i%4));

            CGFloat  Direction_Y  = (floorf(i/4.0)*([JGGView imageHeight]+kJGG_GAP));

            

            [iv mas_makeConstraints:^(MASConstraintMaker *make) {

                make.left.mas_equalTo(jggView).offset(Direction_X);

                make.top.mas_equalTo(jggView).offset(Direction_Y);

                make.size.mas_equalTo(CGSizeMake([JGGView imageWidth], [JGGView imageHeight]));

            }];

            

            UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc]initWithTarget:jggView action:@selector(tapImageAction:)];

            [iv addGestureRecognizer:singleTap];

        }

    

}

#pragma mark

#pragma mark 配置图片的宽高

+(CGFloat)imageWidth{

    return ([UIScreen mainScreen].bounds.size.width-(2*kGAP+kAvatar_Size)*2)/3;

}

+(CGFloat)imageHeight{

    return ([UIScreen mainScreen].bounds.size.width-(2*kGAP+kAvatar_Size)*2)/3;

}

-(void)tapImageAction:(UITapGestureRecognizer *)tap{

    UIImageView *tapView = (UIImageView *)tap.view;

    

    SDPhotoBrowser *photoBrowser = [SDPhotoBrowser new];

    photoBrowser.delegate = self;

    photoBrowser.currentImageIndex = tapView.tag;

    photoBrowser.imageCount = _dataSource.count;

    photoBrowser.sourceImagesContainerView = self;

    [photoBrowser show];

    

    

    if (self.tapBlock) {

        self.tapBlock(tapView.tag,self.dataSource,self.indexpath);

    }

}

#pragma mark - SDPhotoBrowserDelegate

- (NSURL *)photoBrowser:(SDPhotoBrowser *)browser highQualityImageURLForIndex:(NSInteger)index

{s

    NSString *urlString = self.dataSource[index];

    return [NSURL URLWithString:urlString];

}

- (UIImage *)photoBrowser:(SDPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index

{

    UIImageView *imageView = self.subviews[index];

    return imageView.image;

}

@end

/********************************/

布局没必要完全按照9宫格，可以根据项目要求定

／＊＊＊＊＊＊＊＊＊＊＊＊＊＊／

2.在需要添加图片的地方创建9宫格view，并将其添加到父视图上

self.jggView = [JGGView new];

    

[myScrollView addSubview:self.jggView];//myScrollView就是我9宫格的父视图，展示图片的地方

接着对9宫格进行布局

CGFloat jjg_height = 0.0;

    CGFloat jjg_width = 0.0;

    if (imageArr.count>0&&imageArr.count<=4) {/＊这里的4，可以根据自己项目要求进行更改，还有另外3种判断，需要的可以找我要demo＊，项目中的宏，稍后附上／

        jjg_height = [JGGView imageHeight];

        jjg_width  = (imageArr.count)*([JGGView imageWidth]+kJGG_GAP)-kJGG_GAP;

    }

    ///解决图片复用问题

    [self.jggView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

    ///布局九宫格

    [self.jggView JGGView:self.jggView DataSource:imageArr completeBlock:^(NSInteger index, NSArray *dataSource,NSIndexPath *indexpath) {

        NSLog(@"%ld",(long)index);

       

    }];

    [self.jggView mas_updateConstraints:^(MASConstraintMaker *make) {

        make.left.mas_equalTo(0);

        make.top.mas_equalTo(myScrollView.mas_top).offset(kJGG_GAP);

        make.size.mas_equalTo(CGSizeMake(jjg_width, jjg_height));

    }];

/******************************************************************/

 其实早到这里就可以实现我上述的功能了，还有更复杂的，等有别的要求在再更新

／＊＊实现中用到的宏＊／

//9宫格用到的宏

#define kGAP 10

#define kThemeColor [UIColor colorWithRed:0 green:(190 / 255.0) blue:(12 / 255.0) alpha:1]

#define kAvatar_Size 40

#define kTabBarHeight       49

#define kNavbarHeight       64

#define kAlmostZero         0.0000001

/**********************************************  over  ****************************************/