首页 > 代码库 > 实现图片浏览器功能

实现图片浏览器功能

实现图片浏览器功能

效果:

此教程涉及到较多的category的使用,注意.

 

思路:

1. 获取一个view在UIWindow中的frame值

2. 获取这个view的快照

3. 对这个快照进行动画全屏

4. 全屏消失后移除掉这个快照

 

源码:

NSObject+WeakRelated.h 与 NSObject+WeakRelated.m (让两个对象之间产生关联)

////  NSObject+WeakRelated.h//  ScrollViewShowImage////  Created by YouXianMing on 14-9-24.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import <Foundation/Foundation.h>@interface NSObject (WeakRelated)// 与另一个对象绑定(弱相关)@property (nonatomic, weak) id weakRelatedObject;@end
////  NSObject+WeakRelated.m//  ScrollViewShowImage////  Created by YouXianMing on 14-9-24.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import "NSObject+WeakRelated.h"#import <objc/runtime.h>@implementation NSObject (WeakRelated)static char customWeakRelatedObject;- (void)setWeakRelatedObject:(id)weakRelatedObject{    objc_setAssociatedObject(self, &customWeakRelatedObject,                             weakRelatedObject,                             OBJC_ASSOCIATION_ASSIGN /**< Specifies a weak reference to the associated object. */                             );}- (id)weakRelatedObject{    return objc_getAssociatedObject(self, &customWeakRelatedObject);}@end

UIView+ConvertRect.h 与 UIView+ConvertRect.m (当前view在另外一个view中的frame值)

////  UIView+ConvertRect.h//  ScrollViewShowImage////  Created by YouXianMing on 14-9-24.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import <UIKit/UIKit.h>@interface UIView (ConvertRect)// 当前view在另外一个view中的rect值- (CGRect)rectInView:(UIView *)view;@end
////  UIView+ConvertRect.m//  ScrollViewShowImage////  Created by YouXianMing on 14-9-24.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import "UIView+ConvertRect.h"@implementation UIView (ConvertRect)- (CGRect)rectInView:(UIView *)view{    return [self convertRect:self.bounds toView:view];}@end

UIView+RelativeToUIScreen.h 与 UIView+RelativeToUIScreen.m (将当前view的size值转换成另外一个view中的frame值)

////  UIView+RelativeToUIScreen.h//  ScrollViewShowImage////  Created by YouXianMing on 14-9-24.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import <UIKit/UIKit.h>@interface UIView (RelativeToUIScreen)// 返回的等比例尺寸,但宽度与屏幕宽度相同- (CGRect)scaleAspectFitScreenWidth;// 返回的等比例尺寸,但高度与屏幕高度相同- (CGRect)scaleAspectFitScreenHeight;// 返回等比例尺寸,进行有效填充- (CGRect)ScaleAspectFit;@end
////  UIView+RelativeToUIScreen.m//  ScrollViewShowImage////  Created by YouXianMing on 14-9-24.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import "UIView+RelativeToUIScreen.h"#define SCR_HEIGHT             [UIScreen mainScreen].bounds.size.height#define SCR_WIDTH              [UIScreen mainScreen].bounds.size.width@implementation UIView (RelativeToUIScreen)- (CGRect)scaleAspectFitScreenWidth{    if (self.bounds.size.height && self.bounds.size.width) {        CGFloat calculate = SCR_WIDTH * self.bounds.size.height / self.bounds.size.width;        CGRect rect       = CGRectMake(0, 0, SCR_WIDTH, calculate);        return rect;    } else {        return CGRectZero;    }}- (CGRect)scaleAspectFitScreenHeight{    if (self.bounds.size.height && self.bounds.size.width) {        CGFloat calculate = SCR_HEIGHT * self.bounds.size.width / self.bounds.size.height;        CGRect rect       = CGRectMake(0, 0, calculate, SCR_HEIGHT);        return rect;    } else {        return CGRectZero;    }}- (CGRect)ScaleAspectFit{    if (self.bounds.size.height && self.bounds.size.width) {        if ((self.bounds.size.height / self.bounds.size.width) > (SCR_HEIGHT / SCR_WIDTH)) {            CGFloat calculate = SCR_HEIGHT * self.bounds.size.width / self.bounds.size.height;            CGRect rect       = CGRectMake(0, 0, calculate, SCR_HEIGHT);            return rect;        } else {            CGFloat calculate = SCR_WIDTH * self.bounds.size.height / self.bounds.size.width;            CGRect rect       = CGRectMake(0, 0, SCR_WIDTH, calculate);            return rect;        }    } else {        return CGRectZero;    }}@end

控制器源码:

////  ViewController.m//  ScrollViewShowImage////  Created by YouXianMing on 14-9-24.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import "ViewController.h"#import "NSObject+WeakRelated.h"typedef enum : NSUInteger {    Enum_blackView = 0x11,    Enum_snapView,} ViewTag;@interface ViewController ()@property (strong, nonatomic) UIScrollView *scrollView;@property (strong, nonatomic) UIImageView  *imageView1;@property (strong, nonatomic) UIImageView  *imageView2;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        // scorllView    _scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];    _scrollView.contentSize = CGSizeMake(self.view.bounds.size.width, self.view.bounds.size.height * 3);    [self.view addSubview:_scrollView];        // imageView1 +  imageView2    _imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"1.png"]];    _imageView1.viewOrigin = CGPointMake(50, 50);    _imageView1.userInteractionEnabled = YES; // 开启用户交互并添加手势    [_scrollView addSubview:_imageView1];    UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc] initWithTarget:self                                                                          action:@selector(tapMaxGestureEvent:)];    [_imageView1 addGestureRecognizer:tap1];    _imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"2.png"]];    _imageView2.viewOrigin = CGPointMake(50, 500);    _imageView2.userInteractionEnabled = YES; // 开启用户交互并添加手势    [_scrollView addSubview:_imageView2];    UITapGestureRecognizer *tap2 = [[UITapGestureRecognizer alloc] initWithTarget:self                                                                          action:@selector(tapMaxGestureEvent:)];    [_imageView2 addGestureRecognizer:tap2];}- (void)tapMaxGestureEvent:(UITapGestureRecognizer *)tap{    // 获取UIWindow,之后在    UIWindow *window = [@"Window" recoverFromWeakDictionary];        // 变黑的背景    UIView *blackView         = [[UIView alloc] initWithFrame:self.view.bounds];    blackView.tag             = Enum_blackView;    blackView.alpha           = 0;    blackView.backgroundColor = [UIColor blackColor];    [window addSubview:blackView];        // 复制view + tap手势    UIView *snapView = [tap.view snapshotViewAfterScreenUpdates:YES];    snapView.tag     = Enum_snapView;    snapView.frame   = [tap.view rectInView:window]; // 复制view的frame值    snapView.alpha   = 1;    snapView.weakRelatedObject = tap.view;    UITapGestureRecognizer *newTap = [[UITapGestureRecognizer alloc] initWithTarget:self                                                                             action:@selector(tapMinGestureEvent:)];    [snapView addGestureRecognizer:newTap];    [window addSubview:snapView];        // 动画    [UIView animateWithDuration:0.5f animations:^{        blackView.alpha = 1.f;        snapView.frame  = [snapView ScaleAspectFit];        snapView.center = self.view.center;    }];}- (void)tapMinGestureEvent:(UITapGestureRecognizer *)tap{    UIWindow *window = [@"Window" recoverFromWeakDictionary];    UIView *view1    = [window viewWithTag:Enum_snapView];    UIView *view2    = [window viewWithTag:Enum_blackView];        UIView *tapView = tap.view;    [UIView animateWithDuration:0.5f animations:^{        tapView.frame = [tap.view.weakRelatedObject rectInView:window];        view2.alpha   = 0;    } completion:^(BOOL finished) {        [view2 removeFromSuperview];        [view1 removeFromSuperview];    }];}@end

需要注意的地方:

其实这个例子已经写得非常便利了,不需要封装任何的接口就可以很容易的实现点击浏览图片的效果.

 

实现图片浏览器功能