加載網(wǎng)頁時呜袁，有時候產(chǎn)品經(jīng)理會提出一個需求：點擊界面的圖片，可以進行查看大圖操作藤乙。可是猜揪，我之前一直覺得這是需要和前端同事合作才能完成。最近自己利用網(wǎng)上公布的知乎日報API坛梁，自己模擬現(xiàn)在的知乎日報APP去寫了首頁和詳情頁面而姐。ZhiHURiBaodemo地址。
其中詳情頁面需要支持點擊圖片查看大圖功能划咐，這個實現(xiàn)困擾了我一段時間拴念，我想了很多種方案，自己一個人折騰了好幾天褐缠，現(xiàn)在目前最好的方案出來了政鼠，那就是 UIWebView+AppFrame 使用的demo地址.
其中實現(xiàn)的原理是：給 UIWebView 添加 tap手勢 ，利用手勢的代理方法
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
可以獲取到手指點擊觸點在界面的位置送丰，再使用 JS 可以獲取到該點顯示的元素缔俄，這樣就可以獲取到 img 標簽弛秋，拿到圖片的地址器躏。但是，這個方法是只要有手勢就會響應(yīng)蟹略，也就是說登失，只要你的手指在界面上面移動就會觸發(fā)，如果說挖炬，這個時候你就將拿到的圖片地址用來顯示揽浙，就會出現(xiàn)在滑動的過程中展示大圖，這個效果肯定是不符合交互過程的。那么使用這個方法我們能夠做什么呢馅巷？明顯的是膛虫，我們可以拿到圖片的鏈接，但是這個方法調(diào)用的頻率很高钓猬，這里需要過濾
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
if ([gestureRecognizer isKindOfClass:[UITapGestureRecognizer class]]) {
if (gestureRecognizer == self.af_customTap) {
CGPoint touchPoint = [touch locationInView:self];
NSString *imgURL = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", touchPoint.x, touchPoint.y];
NSString *URLString = [self stringByEvaluatingJavaScriptFromString:imgURL];
self.af_isClickImage = @(NO);
if (URLString && URLString.length > 0) {
self.af_isClickImage = @(YES);
self.af_imageString = URLString;
}
}
}
return YES;
}
這個過濾可以做到拿到最近的圖片的地址稍刀，簡單來說就是拿到我們想要顯示的圖片的地址，那么現(xiàn)在的問題就是顯示圖片的時機敞曹。這個方法的任務(wù)已經(jīng)完成了账月，所以我就再次去 UIGestureRecognizerDelegate 找有有關(guān)的代理方法，發(fā)現(xiàn)只有在這個
-(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer;
方法中做文章了澳迫，沒錯就是在這個方法中實現(xiàn)回調(diào)局齿。具體的代碼也十分簡單，注意這里我們返回的是 NO 因為我們使用這個手勢橄登，實質(zhì)上面是獲取手指在界面上面滑動獲取位置抓歼，并不是需要添加手勢事件。
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer{
if (gestureRecognizer == self.af_customTap) {
if (self.af_imageString && [self.af_isClickImage boolValue]) {
!self.af_clickImage ? : self.af_clickImage(self.af_imageString);
self.af_imageString = nil;
}
return NO; /// 這里返回 NO 不需要響應(yīng)手勢
}
return YES;
}
現(xiàn)在我們看看頭文件的內(nèi)容：
/// 點擊圖片回調(diào) 返回被點擊圖片的地址字符串
-(void)af_didClickImageCall:(void(^)(NSString* URLString)) clickImage;
就是需要的獲取 webView 中的圖片時示绊，使用這個方法锭部，回調(diào)的 Block 會將對應(yīng)的圖片地址給你。這個回調(diào)方法中寫展示大圖的邏輯面褐；整個比較詳細的使用可以看我的項目.
存在的不足：實現(xiàn)上面是添加了一個 tap手勢（這個手勢不會影響 webView 原有手勢的響應(yīng)）拌禾，但是，對于 web 頁面的所有圖片都會有回調(diào)展哭，可能在某些使用場景下需要過濾一些圖片湃窍，例如頭像之類的小圖片。這個還需要使用者自己修改相關(guān)的 JS 代碼匪傍，過濾網(wǎng)頁的某些圖片標簽您市。或者役衡，拿到圖片地址之后做相應(yīng)的過濾操作茵休。
參考博客：地址
