【iOS】仿知乎日報，RxSwift-Part2-詳情頁的搭建
阿新 • • 發佈：2019-01-09
前言
在上一篇，我們搭建了首頁。而這篇，我們將開始搭建話題詳情頁。
分析
還是先來看下演示gif
{
"body": "<div class=\"main-wrap content-wrap\">\n<div class=\"headline\">\n\n<div class=\"img-place-holder\"></div>\n\n\n\n</div>\n\n<div class=\"content-inner\">\n\n\n\n\n<div class=\"question\">\n 不難發現，返回的資料是返回HTML的Body內容，而CSS樣式則讀取css欄位。那麼主題內容需要我們“拼出”一個HTML格式的字串，然後用webView進行載入。而頭部的圖片(image)，文字(title)，圖片來源(image_source)需要我們自己佈局及載入。
要點解析
1、自定義WKWebView
按以上的分析，我們需要自定義一個WKWebView，頭部需要插入圖片，標題Label等元素，還要在該webView的頭部和底部新增上下載入的提示語。由於我們在WKWebView的底部新增提示語“載入下一篇”，所以我們需要獲得該webview的contentSize。
由於WKWebView不能通過scrollView.contentSize直接獲取內容告訴，所以在webView載入完畢時，呼叫了js語句，獲取其內容高度：
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
webView.evaluateJavaScript("document.body.scrollHeight") { (result, error) in
if let height = result as? CGFloat {
self.nextLabel.frame.origin.y = height + 50
}
}
}2、拼接HTML
上面也說了，介面返回的只有HTML的Body內容，以及CSS連線，所以我們需要額外新增等元素，使之合乎規範。
具體拼接方式如下：
/// 載入HTML網頁
fileprivate func loadHTML(model: MPStoryDetailModel) {
guard let css = model.css, let body = model.body else {
return
}
var html = "<html>"
html += "<head>"
css.forEach { html += "<link rel=\"stylesheet\" href=\($0)>" }
html += "<style>img{max-width:320px !important;}</style>"
html += "<body>"
html += body
html += "</body>"
html += "</head>"
html += "</html>"
self.loadHTMLString(html, baseURL: nil)
}3、內容自適應
WKWebView的內容自適應比UIWebView稍微麻煩一點，我是在WKWebView建立時，設定了js語句
init() {
// 設定內容自適應
let js = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);"
let wkUserScript = WKUserScript(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
let config = WKWebViewConfiguration()
let wkUControl = WKUserContentController()
wkUControl.addUserScript(wkUserScript)
config.userContentController = wkUControl
super.init(frame: CGRect.zero, configuration: config)
}4、上下載入文章
原理：載入上一篇或下一篇文章只需要監聽scrollView的滾動，判斷載入上一篇還是下一篇，那麼，我們就要在拖拽結束的時候進行監聽。而動畫效果，需要兩個輔助的動畫View實現，一個是在頂部的TopAnimatedView，一個是在底部的BottomAnimatedView。佈局如下圖：
拿載入上一篇的效果進行說明，其動畫效果是，topAnimatedView向下移動，動畫結束後還原，再重新載入webView即可。
因此，轉化為對應的程式碼就是
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
if scrollView.contentOffset.y <= -75 && index != 0{
webView.startLoading()
UIView.animate(withDuration: 0.3, animations: {
self.topAnimatedView.transform = CGAffineTransform.init(translationX: 0, y: (screenH + 20))
}, completion: { (state) in
if state {
self.topAnimatedView.transform = CGAffineTransform.identity
// 載入上一篇文章
self.didSetIndex(self.index - 1)
self.loadData()
}
})
}
}