[iOS]代码推荐：大图缩放视图 - Vertigo

今天有个需求，需要在 UIWebView 上点击图片，然后放大，类似于很多新闻客户端的文章阅读页的效果，开始想自己写，虽然不难，但由于程序员懒惰的天赋，悄悄点开 Code4APP，翻来翻去，找到一份还算理想的开源代码：Vertigo。

Vertigo

可以看到戳到妹纸的时候会有一个放大一点弹跳的效果，这是用到了 iOS7 新的 ViewController 切换 API，之前在破船的文章中也有提到过，在这里:[WWDC 2013 Session 笔记 - iOS7 中的 ViewController 切换]，这里就不多介绍了。

问题来了，既然是新的 API，那目前我的工程肯定还要兼容 iOS6，于是看看代码，还是很好解决的，不过要牺牲一点效果：

#pragma mark - Private methods

- (IBAction)showImage {
    TGRImageViewController *viewController = [[TGRImageViewController alloc] initWithImage:[self.imageButton imageForState:UIControlStateNormal]];

    //禁止掉...
    //viewController.transitioningDelegate = self;

    [self presentViewController:viewController animated:YES completion:nil];
}

以上代码来自 Github 仓库中的 Sample Project，我们吧中间的那一行 transitioningDelegate 给注释掉便可在 iOS6 运行了，其他功能不变，甚至不用改里面的代码，就是切换的动画没有了，会变成从下面一块黑色的 ViewController 平移上来，也就是普通的 present 动画，当然我们也可以稍微改加一行代码换换感觉：

viewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;

这是 ViewController 的 modalTransitionStyle 属性，有几个系统定好的动画供选择：

typedef NS_ENUM(NSInteger, UIModalTransitionStyle) {
    UIModalTransitionStyleCoverVertical = 0,
    UIModalTransitionStyleFlipHorizontal,
    UIModalTransitionStyleCrossDissolve,
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_3_2
    UIModalTransitionStylePartialCurl,
#endif
};

当然，既然能这样修改动画，那自己写动画也是可以的。

那么看到这个效果很适合我的场景，不过却是用在 WebView 中的点击图片，于是翻翻找找，得到下面一个解决方案：

-(void)addTapOnWebView
{
    UITapGestureRecognizer* singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
    [self.webView addGestureRecognizer:singleTap];
    singleTap.delegate = self;
    singleTap.cancelsTouchesInView = NO;
}

#pragma mark- TapGestureRecognizer

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    return YES;
}

-(void)handleSingleTap:(UITapGestureRecognizer *)sender
{
    CGPoint pt = [sender locationInView:self.webView];
    NSString *imgURL = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", pt.x, pt.y];
    NSString *urlToSave = [self.webView stringByEvaluatingJavaScriptFromString:imgURL];
    if (urlToSave.length > 0) {
        [self showImageURL:urlToSave point:pt];
    }
}

//呈现图片
-(void)showImageURL:(NSString *)url point:(CGPoint)point
{
    //弹出大图视图
}

首先添加个手势在 Webview 上，然后根据点下的坐标用 Js 获取到图片的 url，也就是图片 img 的 src 属性，然后传给 Vertigo 就完事儿。

项目地址：https://github.com/gonzalezreal/Vertigo

comments powered by Disqus