iOS仿今日头条新闻详情的图片点击浏览

效果

思路:

1. webview加载url,js交互图片插入点击事件、获取图片数组和图片宽高比数组.

2.点击webview上的图片,计算图片在Windows上的位置,添加UIImageView到Windows上然后动画全屏显示,动画结束后使用三方的图片浏览

3.当三方的图片浏览消失后,判断浏览的最后一张图片是否是第一次点击的图片,如果是动画返回原来的位置后移除,不是动画透明消失后移除


1.插入js代码,给图片添加点击事件

    [webViewstringByEvaluatingJavaScriptFromString:@"\

     function assignImageClickAction(){\

     var imgs=document.getElementsByTagName('img');\

     var length=imgs.length;\

     for(var i=0; i < length;i++){\

     img=imgs[i];\

     if(\"ad\" ==img.getAttribute(\"flag\")){\

     var parent = this.parentNode;\

     if(parent.nodeName.toLowerCase() != \"a\")\

     return;\

     }\

     img.onclick=function(){\

     getImage(this.src,this.getBoundingClientRect().top,this.clientWidth/this.clientHeight );\

     }\

     }\

     };\

     assignImageClickAction();"];

    //插入js代码,获取所有图片宽高比

    id object = [webView stringByEvaluatingJavaScriptFromString:@"\

                 function getImages(){\

                 var objs = document.getElementsByTagName(\"img\");\

                 var imgScr = '';\

                 for(var i=0;i

                 if(i === objs.length-1) \

                 imgScr = imgScr + objs[i].src;\

                 else\

                 imgScr = imgScr + objs[i].src + '+';\

                 };\

                 return imgScr;\

                 };\

                 getImages();" ] ;

    self.imageArray = [NSMutableArray arrayWithArray:[object componentsSeparatedByString:@"+"]];


    //插入js代码,获取所有图片

    id object1 = [webView stringByEvaluatingJavaScriptFromString:@"\

                 function getImages(){\

                 var objs = document.getElementsByTagName(\"img\");\

                 var imgScr = '';\

                 for(var i=0;i

                 if(i === objs.length-1) \

                 imgScr = imgScr + objs[i].clientWidth/objs[i].clientHeight;\

                 else\

                 imgScr = imgScr + objs[i].clientWidth/objs[i].clientHeight + '+';\

                 };\

                 return imgScr;\

                 };\

                 getImages();" ] ;

    self.WHArray = [NSMutableArray arrayWithArray:[object1 componentsSeparatedByString:@"+"]];


2.计算位置、显示图片浏览

 __weak typeof(self) weakSelf = self;

    self.context[@"getImage"] = ^(){

        NSArray*args = [JSContextcurrentArguments];

        dispatch_async(dispatch_get_main_queue(), ^{

           weakSelf.bigImage_url= [NSStringstringWithFormat:@"%@",args[0]];

            CGFloat y = [[NSStringstringWithFormat:@"%@",args[1]]floatValue]+self.commentariesTableView.y-self->consetY+Navigation_height;

            CGFloath = (WIDTH-30)/[[NSStringstringWithFormat:@"%@",args[2]]floatValue];

            weakSelf.bigImage_rect=CGRectMake(15, y,WIDTH-30, h);

            weakSelf.bigImageView= [[UIImageViewalloc]initWithFrame:weakSelf.bigImage_rect];

            [weakSelf.bigImageViewsd_setImageWithURL:[NSURLURLWithString:weakSelf.bigImage_url]];

            [WINDOWS_ViewaddSubview:weakSelf.bigImageView];

            CGFloath1 =WIDTH/[[NSStringstringWithFormat:@"%@",args[2]]floatValue];

            [UIView animateWithDuration:0.5 animations:^{

                weakSelf.bigImageView.frame=CGRectMake(0, (HEIGHT- h1)/2,WIDTH, h1);

            }completion:^(BOOLfinished) {

                weakSelf.view.userInteractionEnabled=YES;

                HZPhotoBrowser*browserVc = [[HZPhotoBrowseralloc]init];

                browserVc.imageCount= weakSelf.imageArray.count;// 图片总数

                browserVc.currentImageIndex= [weakSelf.imageArrayindexOfObject:weakSelf.bigImage_url];//当前点击的图片

                browserVc.delegate= weakSelf;

                [browserVcshow];

            }];

        });

    };


3.移除

//图片浏览移除后 imageview消失移除

- (void)dismissViewControllerIndex:(NSInteger)tag {

    if (tag == [self.imageArray indexOfObject:self.bigImage_url]) {

        [UIView animateWithDuration:0.5 animations:^{

            self.bigImageView.frame = self.bigImage_rect;

        }completion:^(BOOLfinished) {

            [self.bigImageView removeFromSuperview];

        }];

    }else{

        [UIView animateWithDuration:0.5 animations:^{

            self.bigImageView.alpha=0;

        }completion:^(BOOLfinished) {

            [self.bigImageView removeFromSuperview];

        }];

    }

}

//图片浏览滑动后imageview的位置修改

- (void)didScrollviewCurrentIndex:(NSInteger)index {

    CGFloatw =WIDTH;

    CGFloath = w/[self.WHArray[index]floatValue];

    CGFloatx =0;

    CGFloaty = (HEIGHT- h)/2;

    [self.bigImageView sd_setImageWithURL:[NSURL URLWithString:self.imageArray[index]]];

    self.bigImageView.frame=CGRectMake(x, y, w, h);

}

你可能感兴趣的:(iOS仿今日头条新闻详情的图片点击浏览)