图片浏览器：利用UIScrollView做类似微信好友文件中的图片浏览器（缩放、单击退出、双击放大等）

最新推荐文章于 2018-09-26 10:47:25 发布

扬帆追梦人

最新推荐文章于 2018-09-26 10:47:25 发布

阅读量864

点赞数 1

文章标签： UIScrollView缩放图片浏览器

本文链接：https://blog.csdn.net/qq_34417314/article/details/71425616

版权

项目中用到了多张网络图片浏览，点击后要实现类似微信好友文件中的图片浏览器的效果，刚开始给多张图片添加拖动、捏合手势来实现缩放，然后放到UIScrollView上。结果滑动翻页的时候总是有BUG，后来查资料才发现，UIScrollView自带缩放效果，改变了思路后，终于搞定，才疏学浅，大牛勿喷。

理下实现思路：

1.给要放大的图片添加手势

2.获取图片数组（本地的为图片名，网络加载的为对应图片的url）

3.创建UIScrollView, 在UIScrollView上循环创建多个子scrollView,然后在子scrollView上添加图片

4.将创建好的UIScrollView放到临时的window上，实现对应代理方法即可

demo 链接：https://github.com/SunshineTraveller/LMPhotoWall

下面上核心代码：

// 给图片添加手势

-(void)tapImageViewAction:(UIGestureRecognizer *)gesture {

[self.currentWinmakeKeyWindow];

[self.currentWinmakeKeyAndVisible];

UIScrollView *sca = [[UIScrollViewalloc] initWithFrame:CGRectMake(0,0,SCREENWIDTH,ScreenHeight)];

self.scView = sca;

sca.delegate =self;

sca.userInteractionEnabled =YES;

sca.backgroundColor = [UIColorclearColor];

sca.pagingEnabled =YES;

for (int i =0; i<self.imageArray.count; i++) {

// 单击退出

UITapGestureRecognizer *taps = [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(dismissCurrentWin)];

taps.numberOfTapsRequired =1;

// 双击放大

UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(doubleTapAction:)];

doubleTap.numberOfTapsRequired =2;

[taps requireGestureRecognizerToFail:doubleTap];

UIScrollView *sc = [[UIScrollViewalloc]initWithFrame:CGRectMake(i*SCREENWIDTH,0,SCREENWIDTH,ScreenHeight)];

sc.showsHorizontalScrollIndicator =NO;

[sc addGestureRecognizer:doubleTap];

[sc addGestureRecognizer:taps];

sc.showsVerticalScrollIndicator =NO;

sc.delegate =self;

sc.scrollEnabled =YES;

sc.minimumZoomScale =1;

sc.maximumZoomScale =2.5;

UIImageView *imgV = [[UIImageViewalloc]initWithFrame:CGRectMake(0,0,SCREENWIDTH,ScreenHeight)];

imgV.userInteractionEnabled =YES;

HouseTypeModel *model =self.imageArray[i];

NSString *urlstr = [NSStringstringWithFormat:@"%@/upfile/projectMessage/%@/tingshi/%@",PHOTOURL,self.projectid,model.pic];

[_urlArraddObject:urlstr];

[imgV sd_setImageWithURL:[NSURLURLWithString:urlstr]placeholderImage:[UIImageimageNamed:@"new_house_test"]];

imgV.contentMode =UIViewContentModeScaleAspectFit;

[sc addSubview:imgV];

[sca addSubview:sc];

}

sca.contentSize =CGSizeMake(self.imageArray.count*SCREENWIDTH,ScreenHeight);

[self.currentWinaddSubview:sca];

// 页码

UILabel *curLabel = [[UILabelalloc]initWithFrame:CGRectMake(SCREENWIDTH/2-70,SCREENHEIGHT-50,140,20)];

NSInteger totalPage =self.imageArray.count;

curLabel.textColor = [UIColorwhiteColor];

curLabel.font = [UIFontsystemFontOfSize:13];

curLabel.backgroundColor = [UIColorclearColor];

curLabel.textAlignment =NSTextAlignmentCenter;

curLabel.tag =1990;

curLabel.text = [NSStringstringWithFormat:@"%@/%ld",@(1),(long)totalPage];

[self.currentWinaddSubview:curLabel];

}

// 返回要缩放的视图

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {

return scrollView.subviews.firstObject;

}

// 再次回到该图片时，让该图片比例恢复为1，否则下次仍为缩放时的大小

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {

if ([scrollViewisEqual:self.scView]) {

for (UIView *reinself.scView.subviews) {

if ([reisKindOfClass:[UIScrollViewclass]]) {

UIScrollView *sc = (UIScrollView *)re;

[sc setZoomScale:1];

}

// 让UIImageView在UIScrollView缩放后居中显示

- (void)scrollViewDidZoom:(UIScrollView *)scrollView {

UIImageView *imV = (UIImageView *)[scrollView.subviewsfirstObject];

CGFloat delta_x= scrollView.bounds.size.width > scrollView.contentSize.width ? (scrollView.bounds.size.width-scrollView.contentSize.width)/2 : 0;

CGFloat delta_y= scrollView.bounds.size.height > scrollView.contentSize.height ? (scrollView.bounds.size.height - scrollView.contentSize.height)/2 :0;

imV.center=CGPointMake(scrollView.contentSize.width/2 + delta_x, scrollView.contentSize.height/2 + delta_y);

}

下面是做的本地的一个图片浏览器

#define MaxScale  3.0   最大缩放比
#define MinScale  1.0   最小缩放比

#define WID [UIScreen mainScreen].bounds.size.width
#define HEI [UIScreen mainScreen].bounds.size.height


#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

// 装载照片的滚动视图
@property (nonatomic,strong) UIScrollView   *photoView;
// 装载滚动视图的window
@property (nonatomic,strong) UIWindow       *curWin;
// 图片数组
@property (nonatomic,strong) NSMutableArray *imArr;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.title = @"图片墙";
    self.view.backgroundColor = [UIColor whiteColor];
    [self layoutTheSubviews];
    
}

-(void)layoutTheSubviews {
    
    // 宽高
    CGFloat imW = WID/4;
    CGFloat imH = HEI/4;
    
    // 创建照片
    for (int i = 0; i<8; i++) {
        
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imVTapGestureAction:)];
        UIImageView *imV = [[UIImageView alloc] initWithFrame:CGRectMake(i%4*imW, 64+i/4*imH, WID/4, HEI/4)];
        imV.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i+1]];
        [self.imArr addObject:imV];
        imV.userInteractionEnabled = YES;
        [imV addGestureRecognizer:tap];
        [self.view addSubview:imV];
    }
    
}

// 照片点击事件
-(void)imVTapGestureAction:(UITapGestureRecognizer *)tap {
    
    [self.curWin makeKeyWindow];
    [self.curWin makeKeyAndVisible];
    self.photoView.contentSize = CGSizeMake(self.imArr.count*WID, HEI);
    
    for (int i = 0; i < self.imArr.count; i ++) {
        
        UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doubleTapAction:)];
        doubleTap.numberOfTapsRequired = 2;
        
        UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(singleTapAction:)];
        singleTap.numberOfTapsRequired = 1;
        
        
        // 区分单双击事件
        [singleTap requireGestureRecognizerToFail:doubleTap];
        
        
        // 创建滚动视图
        UIScrollView *sc = [[UIScrollView alloc] initWithFrame:CGRectMake(i*WID, 0, WID, HEI)];
        sc.backgroundColor = [UIColor clearColor];
        sc.scrollEnabled = YES;
        sc.delegate = self;
        sc.userInteractionEnabled = YES;
        [sc addGestureRecognizer:doubleTap];
        [sc addGestureRecognizer:singleTap];
        
        
        // 缩放比例，可自行改变
        sc.maximumZoomScale = MaxScale;
        sc.minimumZoomScale = MinScale;
        
        
        // 向滚动视图上添加照片  (网络加载图片替换为 通过SDWebImage加载的图片即可)
        UIImageView *imV = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, WID, HEI)];
        imV.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d.jpg",i+1]];
        imV.contentMode = UIViewContentModeScaleAspectFit;
        imV.userInteractionEnabled = YES;
        [sc addSubview:imV];
        
        [self.photoView addSubview:sc];
        
    }
    self.photoView.contentOffset = CGPointMake(0, 0);
    [self.curWin addSubview:self.photoView];
    
    // 页码
    UILabel *page = [[UILabel alloc] initWithFrame:CGRectMake(WID/2-70, HEI-50, 140, 20)];
    page.tag = 1000;
    page.textColor = [UIColor whiteColor];
    page.font = [UIFont systemFontOfSize:14];
    page.textAlignment = NSTextAlignmentCenter;
    page.backgroundColor = [UIColor clearColor];
    page.text = [NSString stringWithFormat:@"1/%lu",(unsigned long)self.imArr.count];
    [self.curWin addSubview:page];
    
    
}

// 单击退出
-(void)singleTapAction:(UITapGestureRecognizer *)tap {
    
    // 去除之前视图，否则放大退出后，再次进入会有图片重叠BUG 
    for (UIView *view in self.photoView.subviews) {
        [view removeFromSuperview];
    }
    [self dissmissCurwin];
    
}


// 双击放大/缩小
-(void)doubleTapAction:(UITapGestureRecognizer *)tap {
    
    UIScrollView *sc = (UIScrollView *)tap.view;
    if (sc.zoomScale == MinScale) {
        [sc setZoomScale:MaxScale animated:YES];
    }else {
        [sc setZoomScale:MinScale animated:YES];
    }
    
}

#pragma makr -- UIScrollViewDelegate

// 让UIImageView在UIScrollView缩放后居中显示
- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
    
    UIImageView *imV = (UIImageView *)[scrollView.subviews firstObject];
    CGFloat delta_x= scrollView.bounds.size.width > scrollView.contentSize.width ? (scrollView.bounds.size.width-scrollView.contentSize.width)/2 : 0;
    
    CGFloat delta_y= scrollView.bounds.size.height > scrollView.contentSize.height ? (scrollView.bounds.size.height - scrollView.contentSize.height)/2 : 0;
    
    imV.center=CGPointMake(scrollView.contentSize.width/2 + delta_x, scrollView.contentSize.height/2 + delta_y);
    
}


// 改变页码
-(void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    NSInteger curPage = scrollView.contentOffset.x / WID;
    UILabel *page = (UILabel *)[self.curWin viewWithTag:1000];
    page.text = [NSString stringWithFormat:@"%lu/%lu",curPage+1,(unsigned long)self.imArr.count];
    
}


// 返回要缩放的视图
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    // 此处的 scrollView 为缩放的scrollView ,上面只放了一个imageView
    return scrollView.subviews.firstObject;
}


// 再次滚回后恢复到原大小
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    
    if ([scrollView isEqual:self.photoView]) {
        
        for (UIView *sc in self.photoView.subviews) {
            if ([sc isKindOfClass:[UIScrollView class]]) {
                UIScrollView *scV = (UIScrollView *)sc;
                [scV setZoomScale:1.];
            }
        }
    }
}


#pragma mark -- lazing methods
-(UIWindow *)curWin {
    if (_curWin == nil) {
        _curWin = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
        _curWin.backgroundColor = [UIColor blackColor];
    }
    return _curWin;
}

-(NSMutableArray *)imArr {
    if (!_imArr) {
        _imArr = [NSMutableArray array];
    }
    return _imArr;
}

-(UIScrollView *)photoView {
    if (!_photoView) {
        _photoView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WID, HEI)];
        _photoView.backgroundColor = [UIColor clearColor];
        _photoView.showsVerticalScrollIndicator = NO;
        _photoView.delegate = self;
        _photoView.pagingEnabled = YES;
        _photoView.showsHorizontalScrollIndicator = NO;
        _photoView.scrollEnabled = YES;
    }
    return _photoView;
}

// 退出临时窗口
-(void)dissmissCurwin {
 
    [self.curWin resignKeyWindow];
    self.curWin = nil;
    [self.view.window makeKeyWindow];
    [self.view.window makeKeyAndVisible];
    
}