看板 KnucklesNote
作者 Knuckles (站長 那克斯)
標題 [Xcode][Swift3] 使用 WebView 顯示網頁內容
時間 2017-03-13 Mon. 15:58:07
延續上一篇
[Xcode][Swift3] 點擊列表開啟並傳送資料至新的頁面 - KnucklesNote板 - Disp BBS
開了一個空白的 View Controller
並傳送一個網址過來
使用 Web View 將網頁顯示出來
從右下的 Object library 拉一個 Web View 到 View Controller
先將 Web View 的大小調整為跟頁面一樣大，
再點右下的「Add New Constraints」按鈕，設定上下左右的間距為 0
然後點「Add 4 Constraints」
發現 Navigation Bar 的顏色變深了
因為當 Web View 加進一個有 Navigation Bar 的頁面時，
Web View 會自動在上方加上 Navigation Bar 的間距，
而 Navigation Bar 有設透明度所以顯示了 Web View 的背景色黑色
只要將 Web View 的背景色改為白色即可
使用 Assistant editor 自動加上 IBOutlet
要加上 IBOutlet，除了先手動加上程式碼
再到 storyboard 的連結檢視器拉到對應的元件外
也可以使用 Assistant editor 快速產生
先點一下 Web View 然後點右上角的 Assistant editor 按鈕 (兩個圈圈那個)
在 storyboard 的右邊就會顯示元件對應的類別程式碼 TextViewController
若位置太小可以再按最右邊的 Utilities 按鈕先隱藏右邊的 Utilities 視窗
按著 Ctrl 將 Web View 拉到放成員變數的地方
輸入名稱後按 Connect
自動產生程式碼並設定好與 storyboard 元件的連結了
要恢復本來的視窗，點一下 Standard editor 與 Utilities 即可
編輯 TextViewController.swift
修改成員函數 viewDidLoad()
將之前加的 print(self.urlString) 改成
let url = URL(string: self.urlString)
let request = URLRequest(url: url!)
self.webView.loadRequest(request)
因為 url 取得的是一個可能為 nil 的 optional 變數
所以傳入 URLRequest() 前要在後面加個驚嘆號
代表確定這個變數不會是 nil 值
或者改用 if 取得一個不會是 nil 的變數也可以
if let url = URL(string: self.urlString) {
let request = URLRequest(url: url)
self.webView.loadRequest(request)
}
執行看看，點一下文章後，可以載入網頁內容了
在載入網頁內容時顯示載入中圖示
如果想要在 webView 存取網路時在左上角顯示載入中的圖示
要先加上 webView 的 delegate 函數
delegate 函數是一種將成員函數委任給另一個類別來寫的函數
例如 webView 載入檔案時會呼叫自己的 delegate 函數，
但函數內容是寫在別的類別 TextViewController 裡
修改 class TextViewController: UIViewController { 為
class TextViewController: UIViewController, UIWebViewDelegate {
讓 TextViewController 繼承 UIWebViewDelegate
在成員函數 viewDidLoad() 中加上
self.webView.delegate = self
讓 WebView 的成員變數 delegate 指向類別 TextViewController
加上兩個 webView 的 delegate 函數
func webViewDidStartLoad(_ webView: UIWebView) {
UIApplication.shared.isNetworkActivityIndicatorVisible = true
}
func webViewDidFinishLoad(_ webView: UIWebView) {
UIApplication.shared.isNetworkActivityIndicatorVisible = false
}
當 webView 開始下載資料時，就會執行 webViewDidStartLoad()
下載完成時，就會執行 webViewFinishLoad()
在這兩個函數裡分別使用 UIApplication.shared.isNetworkActivityIndicatorVisible
來開啟及關閉載入中的圖示
加上瀏覽功能的按鈕
例如想要在右上角加上重新整理的按鈕
若 View Controller 裡沒有 Navigation Item 的話，要拉一個進來
在 Navigation Item 的屬性檢視器，輸入 Title 為「閱讀文章」
拉一個 Bar Button Item 到 Navigation Item 的右邊
點一下按鈕，在屬性檢視器將 System Item 改為 Refresh
打開 Assistant editor 按著 Ctrl 將按鈕拉到程式碼的類別裡
跳出的選單，Connection 改為 Action，名稱輸入 refresh，點 Connect
自動產生了一個點擊按鈕後會執行的成員函數 refresh(_:)
切換回 Standard editor，修改成員函數 refresh(_:) 為
@IBAction func refresh(_ sender: Any) {
self.webView.reload()
}
執行看看，閱讀文章時點右上角的 refresh 按鈕重新整理網頁
一樣的方法再加一個回上頁的按鈕
拉一個 Bar Buttom Item 到 refresh 按鈕的左邊
在屬性檢視器輸入 Title 為「回上頁」
取消勾選「Enabled」，一開始先顯示為灰色的不可點擊狀態
開啟 Assistant editor
對回上頁按鈕按著 ctrl 拉一個 @IBOulet 到程式碼中成員變數的地方
名稱輸入 goBackBtn
@IBOutlet weak var goBackBtn: UIBarButtonItem!
再對回上頁按鈕按著 ctrl 拉一個 @IBAction 到程式碼中
名稱輸入 goBack
修改產生的成員函數 goBack(_:) 為
@IBAction func goBack(_ sender: Any) {
self.webView.goBack()
}
切換回 standard editor
修改 webView 的 delegate 函數 webViewDidFinishLoad()，加上
if self.webView.canGoBack {
self.goBackBtn.isEnabled = true
} else {
self.goBackBtn.isEnabled = false
}
執行看看，進閱讀文章後，回上頁按鈕是灰色的不能點
在網頁中點擊超連結後，就會變成藍色的可以點
點了後會回到上一頁
參考
http://sourcefreeze.com/uiwebview-example-using-swift-in-ios/
--
--
※ 作者: Knuckles 時間: 2017-03-13 15:58:07
※ 編輯: Knuckles 時間: 2017-03-19 11:43:25