功能齐全的全屏浏览

今天给大家带来一个简单的全屏浏览实例.相信对大家会有些帮助.先看看效果图吧.



首先,创建一个userDetailView.xib文件.放置一些控件,如图:


这个没什么,就是一个view.用于放在userDetailcontroller里面.

UserDetailController.m

#import "UserDetailController.h"
#import "userDetailView.h"
#import "PicScrollView.h"
#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
@interface UserDetailController ()<removeImgDelegate>
@property (nonatomic, strong)userDetailView *userDetailView;
@property (nonatomic, assign)CGRect transformedFrame;
@property (nonatomic, strong)UIImageView *lookImg;
@property (nonatomic, strong)PicScrollView *picScroll;
@property (nonatomic, strong)NSArray *ImgList;
@end

@implementation UserDetailController

- (void)viewDidLoad {
    _userDetailView = [[NSBundle mainBundle]loadNibNamed:@"userDetailView" owner:self options:nil].lastObject;
    _userDetailView.frame = CGRectMake(0, 0, _contentScroll.frame.size.width, _contentScroll.frame.size.height);
    [_contentScroll addSubview:_userDetailView];
    self.contentScroll.contentSize = CGSizeMake(0, 600);
    [self getData];
}

-(void)getData
{
    NSArray *titleArr = [NSArray arrayWithObjects:@"篮球",@"足球",@"排球", nil];
    _ImgList = [NSArray arrayWithObjects:@"h1.jpg",@"h2.jpg",@"h3.jpg",@"h4.jpg", nil];
            for (NSInteger i = 0; i < _ImgList.count; i ++) {
                UIImageView *image = (UIImageView *)[_userDetailView viewWithTag:900 + i];
                image.image = [UIImage imageNamed:_ImgList[i]];
                UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(touchImage:)];
                image.userInteractionEnabled = YES;
                [image addGestureRecognizer:tap];
            }
            static  NSInteger contentX = 130;
            for (NSInteger num = 0; num < titleArr.count; num++) {
               
                UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
                button.frame = CGRectMake(contentX, 12, [self stringWidth:titleArr[num]], 30);
                [button setTitle:titleArr[num] forState:UIControlStateNormal];
                button.layer.masksToBounds = YES;
                button.layer.cornerRadius = 15 ;
                [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
                button.backgroundColor = [UIColor colorWithRed:0 green:0.68 blue:0.94 alpha:1];
                contentX += [self stringWidth:titleArr[num]] + 5;
                
                [_userDetailView.userInterstView addSubview:button];
            }
    
}

-(void)touchImage:(UITapGestureRecognizer *)tap
{
    UIImageView *tapimageView = (UIImageView *)tap.view;
      _transformedFrame = [tapimageView.superview convertRect:tapimageView.frame toView:[UIApplication sharedApplication].keyWindow];
    _lookImg = [[UIImageView alloc]initWithFrame:_transformedFrame];
        _lookImg.image = tapimageView.image;
        [[UIApplication sharedApplication].keyWindow addSubview:_lookImg];
    [UIView animateWithDuration:.5 animations:^{
        _lookImg.center = [UIApplication sharedApplication].keyWindow.center;
        CGPoint point = [UIApplication sharedApplication].keyWindow.center;
        _lookImg.frame = CGRectMake(point.x - WIDTH / 2, point.y - WIDTH / 2, WIDTH, WIDTH);
    } completion:^(BOOL finished) {
        _picScroll = [[PicScrollView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
        _picScroll.delegate = self;
        [_picScroll scrollViewWith:tapimageView.tag - 900 Pictol:_ImgList.count picArr:_ImgList];
         [[UIApplication sharedApplication].keyWindow addSubview:_picScroll];
    }];
        UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImage:)];
        _lookImg.userInteractionEnabled = YES;
        [_lookImg addGestureRecognizer:tap1];
    
}

-(void)removeImageDelegate
{
  NSInteger i =   _picScroll.scrollView.contentOffset.x / WIDTH;
    UIImageView *imageView = [self.userDetailView viewWithTag:900 +i];
    _transformedFrame = [imageView.superview convertRect:imageView.frame toView:[UIApplication sharedApplication].keyWindow];
    _lookImg.image = [UIImage imageNamed:_ImgList[i]];
    [UIView animateWithDuration:1 animations:^{
        _lookImg.frame = _transformedFrame;
        
    } completion:^(BOOL finished) {
        [_lookImg removeFromSuperview];
        _lookImg = nil;
    }];
}

-(void)tapImage:(UITapGestureRecognizer *)tap
{
   
   
}
-(NSInteger)stringWidth:(NSString *)string
{
    return string.length * 24;
}

这里的重点是在这里

UIImageView *tapimageView = (UIImageView *)tap.view;
      _transformedFrame = [tapimageView.superview convertRect:tapimageView.frame toView:[UIApplication sharedApplication].keyWindow];
    _lookImg = [[UIImageView alloc]initWithFrame:_transformedFrame];
        _lookImg.image = tapimageView.image;
        [[UIApplication sharedApplication].keyWindow addSubview:_lookImg];
    [UIView animateWithDuration:.5 animations:^{
        _lookImg.center = [UIApplication sharedApplication].keyWindow.center;
        CGPoint point = [UIApplication sharedApplication].keyWindow.center;
        _lookImg.frame = CGRectMake(point.x - WIDTH / 2, point.y - WIDTH / 2, WIDTH, WIDTH);
    } completion:^(BOOL finished) {
        _picScroll = [[PicScrollView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
        _picScroll.delegate = self;
        [_picScroll scrollViewWith:tapimageView.tag - 900 Pictol:_ImgList.count picArr:_ImgList];
         [[UIApplication sharedApplication].keyWindow addSubview:_picScroll];
    }];
        UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImage:)];
        _lookImg.userInteractionEnabled = YES;
        [_lookImg addGestureRecognizer:tap1];

我的思路是先获取到点击的那个imageView,获取到它相对于window的frame,然后在这个frame上新建一个imageView,完全与我们点击的imageView重合,但是新的imageView是放在window上的.然后加一个动画慢慢改变它的frame,动画完了之后再在Window上放一个scrollerview(PicScrollView),覆盖掉整个userdetailController.

picScrollView

#import "PicScrollView.h"
#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
@interface PicScrollView ()<UIScrollViewDelegate>
@property (nonatomic, assign)NSInteger total;
@end
@implementation PicScrollView

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor blackColor];
    }
    return self;
}
-(void)scrollViewWith:(NSInteger)picNum Pictol:(NSInteger)picTol picArr:(NSArray *)picArr
{
    _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
    _scrollView.delegate = self;
    _total = picTol;
    _scrollView.contentSize = CGSizeMake(WIDTH * picTol, 1);
    _scrollView.contentOffset = CGPointMake(WIDTH * picNum, 0);
    _scrollView.pagingEnabled = YES;
    _scrollView.showsHorizontalScrollIndicator = NO;
    _scrollView.bounces = NO;
 
    [self addSubview:_scrollView];
    for (NSInteger i = 0; i < picArr.count; i ++) {
        UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(WIDTH * i, 0, WIDTH, HEIGHT)];
        scrollView.minimumZoomScale = 1.0;
        scrollView.maximumZoomScale = 2.0;
        scrollView.delegate = self;
        scrollView.tag = i + 2400;
        UIImageView *imageView = [[UIImageView alloc]init];
        imageView.center = [UIApplication sharedApplication].keyWindow.center;
        CGPoint point = [UIApplication sharedApplication].keyWindow.center;
        imageView.frame = CGRectMake(point.x - WIDTH / 2, point.y - WIDTH / 2, WIDTH, WIDTH);
        [scrollView addSubview:imageView];
        [_scrollView addSubview:scrollView];
        imageView.image = [UIImage imageNamed:picArr[i]];
        
        //双击放大缩小
        UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapToZoom:)];
        doubleTap.numberOfTapsRequired = 2;
        doubleTap.numberOfTouchesRequired = 1;
        [scrollView addGestureRecognizer:doubleTap];
        //点击事件
        UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(removeFromSuper)];
        [singleTap requireGestureRecognizerToFail:doubleTap];
        
        [scrollView addGestureRecognizer:singleTap];
        [imageView setTag:1];
    }
}

-(void)tapToZoom:(UITapGestureRecognizer *)tap
{
    UIScrollView *zoomable = (UIScrollView*)tap.view;
    if (zoomable.zoomScale > 1.0) {
        [zoomable setZoomScale:1 animated:YES];
    } else {
        [zoomable setZoomScale:2 animated:YES];
    }
}
#pragma mark 缩放中走的方法
-(void)scrollViewDidZoom:(UIScrollView *)scrollView
{
    if (scrollView != _scrollView) {
        UIImageView *imageView = (UIImageView *)[scrollView viewWithTag:1];
        CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)?
        (scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;
        CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)?
        (scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;
        imageView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,
                                       scrollView.contentSize.height * 0.5 + offsetY);
    }
}
#pragma mark 缩放停止
-(void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale
{
    NSLog(@"缩放停止    %.2f", scale);
}

#pragma mark 缩放所对应的视图
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    if (scrollView != _scrollView) {
        UIImageView *imageView = [scrollView viewWithTag:1];
        return imageView;
    }
    return nil;
}
-(void)removeFromSuper
{
    [_scrollView removeFromSuperview];
    [self removeFromSuperview];
    [self.delegate removeImageDelegate];
}

这里是在最底层有个大的scrollerview,大的scrollerview上面放4个小的scrollerview,每个小的scrollerview上放一张图片.如果只是在大的scrollerview上4张图片的话就会造成放大的时候图片越界,变形.
单击图片的时候,先让底部大的scrollerview remove掉,再将整个view remove掉,这个时候在userdetailController上还有一张图片,代理就是让那张图片慢慢缩回到具体的那张小图上然后remove掉.
好了,大概的思路就这些,其实也并不难哈,其实还有不完善和很多可以优化的地方,我把代码给大家看看,大家可以再在这基础上改进改进.下载地址在这里.
好了,就这么多吧.谢谢大家😄

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,590评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,808评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,151评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,779评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,773评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,656评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,022评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,678评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,038评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,411评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,005评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2赞 343

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4赞 62
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,439评论 25赞 707
  • 你好，简书。
    初来乍到，请多关照。
    若无其事l阅读 135评论 0赞 0
  • 你自恋吗？
    自认为了解我的朋友们一般都会给我贴上一个自恋的标签，这样的标签一直让我很困惑，不知道自己怎么就自恋...
    小芳的天空阅读 590评论 6赞 5
  • day40 时间管理
    今天将古典的《超级个体》关于时间管理的章节学习整理。概要如下： 一、碎片化时代：3种能力让你效率升级 1、碎片整合...
    沐子老妖阅读 373评论 1赞 6