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

来源：互联网发布：淘宝进口牛肉便宜编辑：程序博客网时间：2024/04/30 12:55

项目中用到了多张网络图片浏览，点击后要实现类似微信好友文件中的图片浏览器的效果，刚开始给多张图片添加拖动、捏合手势来实现缩放，然后放到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];    }

1 0