实现图片浏览器功能

实现图片浏览器功能

效果:

此教程涉及到较多的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;

@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

需要注意的地方:

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

通通玩blend美工（6）下——仿iPhone滚动选择器的ListBox（交互逻辑） 原文:通通玩blend美工（6）下——仿iPhone滚动选择器的ListBox（交互逻辑） 上一篇我们已经把界面画出来了，这篇我们就来制作交互的逻辑吧。上一篇的电梯： http://www.
目前想用kanzi实现类似安卓手机的左右滑动切换桌面的效果。尝试了以下两种方法都没有实现。 仿造例子程序album切换效果，将Trajectory List Box 3D中切换改为AngleTrajectory方式，可以实现切换，但是两个图片的间距太大，设置spacing参数到最小也还是有间距。