起因
對于展示新聞詳情界面,一開始試過UIWebView、UITextView,
UITextView感覺不夠強大,不過是可以展示的
UIWebView在網上搜索一番之后,蘋果逐漸在淘汰它,缺點很多,所以我也沒用它了,雖然能正常實現功能
所以最后決定用WKWebView
過程
問題 1:圖片大小和字體大小
解決:這可以通過注入js代碼來顯示,經過幾番周折是能很好的實現
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta); var imgs = document.getElementsByTagName('img');for (var i in imgs){imgs[i].style.maxWidth='100%';imgs[i].style.height='auto';}";
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 1) configuration:wkWebConfig];
問題 2:GIF動圖
出現這個問題可把我折磨得夠嗆,我估摸著有一個星期
先說說界面構架吧:
- 一個空的 UIViewController
- 一個全局 CGFloat webViewHeight(通過WKWebView的內容高度得到)
- 在上面添加一個 UITableView:有3個section
- 第一個section只有一個cell,展示新聞的標題、來源、作者
- 第二個section只有一個cell,展示新聞的主要內容,這個cell里加入了一個UIScrollView,UIScrollView里面加入了WKWebView,WKWebView里展示新聞的內容
- 第三個section的cell是動態的,是用來顯示評論內容
最后就是UIViewController的底部添加一個輸入框用來評論
WKWebView 內容的展示是通過KVO來實現的
問題:
當新聞內容有GIF動圖的時候,界面無法滑動,不是固定死的那種無法滑動,而是不聽話的無法滑動或者說劃不動,GIF一直在閃(在此時我是奔潰的,查詢了關于WKWebView和HTML的資料,都無法解決)
解決:
然后我就使勁上下滑動,就不信滑不上去(事實證明,通過這樣的測試可以發現很多問題,并且也逐漸找到了問題的原因,讓真相浮出水面)
點擊 Debug View Hierarchy 后
看見section0 的cell 有覆蓋現象,加幾句代碼輕松解決
UITableViewCell *defaultCell = [tableView dequeueReusableCellWithIdentifier:@"DefaultCell"];
if (defaultCell == nil){
defaultCell = [tableView dequeueReusableCellWithIdentifier:@"DefaultCell" forIndexPath:indexPath];
}else {
while ([defaultCell.contentView.subviews lastObject]!= nil) {
[(UIView *)[defaultCell.contentView.subviews lastObject] removeFromSuperview];
}
}
問題:
然后我對比了正常img的新聞和GIF的新聞,發現:正常img的新聞加載完之后kvo調用之后會自己停下來,但是GIF的新聞一直在調用kvo是根本停不下來啊!
解決:
雖然不能確定就是GIF圖片造成它的內容一直變動,但最后我還是換成了在 didFinishNavigation 方法里獲取高度 刷新界面
[webView evaluateJavaScript:@"Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight)"
completionHandler:^(id _Nullable result, NSError * _Nullable error) {
if (!error) {
NSNumber *height = result;
self.webViewHeight = [height floatValue] + 30;
webView.frame = CGRectMake(0, 0, self.view.frame.size.width, [height floatValue]);
self.scrollView.frame = CGRectMake(0, 0, self.view.frame.size.width, [height floatValue]);
self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width, [height floatValue]);
[self.tableView reloadRowsAtIndexPaths:[NSArray arrayWithObjects:[NSIndexPath indexPathForRow:0 inSection:1], nil]withRowAnimation:UITableViewRowAnimationNone];
}
}];
問題:
沒錯,我成功了,但也不是很舒服
原因是,section2的cell在第一次向上滑動的時候是對于自身滑動的,不是對于tableView滑動的,現象就是新聞標題那個cell不動,但撒手之后再次滑動就是跟著tableView滑動,我覺得這不科學
解決:
加了兩句代碼:
WebView.scrollView.scrollEnabled = NO;
self.scrollView.scrollEnabled = NO;
這下子就舒服了,我想應該還會有更好的展示方式或是解決方法,知識的道路上不斷探索吧!