加載網頁時,有時候產品經理會提出一個需求:點擊界面的圖片,可以進行查看大圖操作。下面說下我的實現思路:
給 UIWebView 添加 tap手勢 ,利用手勢的代理方法
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch可以獲取到手指點擊觸點在界面的位置,再使用
JS可以獲取到該點顯示的元素,這樣就可以獲取到img標簽,拿到圖片的地址。但是,這個方法是只要有手勢就會響應,也就是說,只要你的手指在界面上面移動就會觸發,如果說,這個時候你就將拿到的圖片地址用來顯示,就會出現在滑動的過程中展示大圖,這個效果肯定是不符合交互過程的。那么使用這個方法我們能夠做什么呢?明顯的是,我們可以拿到圖片的鏈接,但是這個方法調用的頻率很高,這里需要過濾-(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;}這個過濾可以做到拿到最近的圖片的地址,簡單來說就是拿到我們想要顯示的圖片的地址,那么現在的問題就是顯示圖片的時機。這個方法的任務已經完成了,所以我就再次去
UIGestureRecognizerDelegate找有有關的代理方法,發現只有在這個-(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer;
方法中做文章了,沒錯就是在這個方法中實現回調。具體的代碼也十分簡單,注意這里我們返回的是 NO 因為我們使用這個手勢,實質上面是獲取手指在界面上面滑動獲取位置,并不是需要添加手勢事件。
- (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 不需要響應手勢 } return YES;}現在我們看看頭文件的內容:/// 點擊圖片回調 返回被點擊圖片的地址字符串-(void)af_didClickImageCall:(void(^)(NSString* URLString)) clickImage;就是需要的獲取
webView中的圖片時,使用這個方法,回調的Block會將對應的圖片地址給你。這個回調方法中寫展示大圖的邏輯;完整的代碼我會上傳我的github,前面的博客中有地址,大家也可以聯系我,直接發給你。微博:哈嘍ExpecT、QQ:1156154406、微信:hmh5896...存在的不足:實現上面是添加了一個
tap手勢(這個手勢不會影響webView原有手勢的響應),但是,對于web頁面的所有圖片都會有回調,可能在某些使用場景下需要過濾一些圖片,例如頭像之類的小圖片。這個還需要使用者自己修改相關的JS代碼,過濾網頁的某些圖片標簽?;蛘?,拿到圖片地址之后做相應的過濾操作。
新聞熱點
疑難解答