[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