看板 KnucklesNote
作者 標題 [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
![[圖]](http://i.imgur.com/tWEjUbN.png)
先將 Web View 的大小調整為跟頁面一樣大，
再點右下的「Add New Constraints」按鈕，設定上下左右的間距為 0
然後點「Add 4 Constraints」
![[圖]](http://i.imgur.com/UGMGkFR.png)
發現 Navigation Bar 的顏色變深了
因為當 Web View 加進一個有 Navigation Bar 的頁面時，
Web View 會自動在上方加上 Navigation Bar 的間距，
而 Navigation Bar 有設透明度所以顯示了 Web View 的背景色黑色
只要將 Web View 的背景色改為白色即可
![[圖]](http://i.imgur.com/knyEAXE.png)
使用 Assistant editor 自動加上 IBOutlet
要加上 IBOutlet，除了先手動加上程式碼
再到 storyboard 的連結檢視器拉到對應的元件外
也可以使用 Assistant editor 快速產生
先點一下 Web View 然後點右上角的 Assistant editor 按鈕 (兩個圈圈那個)
在 storyboard 的右邊就會顯示元件對應的類別程式碼 TextViewController
若位置太小可以再按最右邊的 Utilities 按鈕先隱藏右邊的 Utilities 視窗
![[圖]](http://i.imgur.com/qBUVs6W.png)
按著 Ctrl 將 Web View 拉到放成員變數的地方
![[圖]](http://i.imgur.com/gcnW88D.png)
輸入名稱後按 Connect
![[圖]](http://i.imgur.com/LzllYZn.png)
自動產生程式碼並設定好與 storyboard 元件的連結了
![[圖]](http://i.imgur.com/dhALCiy.png)
要恢復本來的視窗，點一下 Standard editor 與 Utilities 即可
![[圖]](http://i.imgur.com/RUhiALj.png)
編輯 TextViewController.swift
修改成員函數 viewDidLoad()
將之前加的 print(self.urlString) 改成
let url = URL(string: self.urlString)
let request = URLRequest(url: url!)
self.webView.loadRequest(request)
因為 url 取得的是一個可能為 nil 的 optional 變數let request = URLRequest(url: url!)
self.webView.loadRequest(request)
所以傳入 URLRequest() 前要在後面加個驚嘆號
代表確定這個變數不會是 nil 值
或者改用 if 取得一個不會是 nil 的變數也可以
if let url = URL(string: self.urlString) {
let request = URLRequest(url: url)
self.webView.loadRequest(request)
}
let request = URLRequest(url: url)
self.webView.loadRequest(request)
}
執行看看，點一下文章後，可以載入網頁內容了
![[圖]](http://i.imgur.com/ON6NQm6.png)
在載入網頁內容時顯示載入中圖示
如果想要在 webView 存取網路時在左上角顯示載入中的圖示
![[圖]](http://i.imgur.com/ZOB5NVX.png)
要先加上 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
}
UIApplication.shared.isNetworkActivityIndicatorVisible = true
}
func webViewDidFinishLoad(_ webView: UIWebView) {
UIApplication.shared.isNetworkActivityIndicatorVisible = false
}
當 webView 開始下載資料時，就會執行 webViewDidStartLoad()
下載完成時，就會執行 webViewFinishLoad()
在這兩個函數裡分別使用 UIApplication.shared.isNetworkActivityIndicatorVisible
來開啟及關閉載入中的圖示
加上瀏覽功能的按鈕
例如想要在右上角加上重新整理的按鈕
若 View Controller 裡沒有 Navigation Item 的話，要拉一個進來
![[圖]](http://i.imgur.com/vBPm8GV.png)
在 Navigation Item 的屬性檢視器，輸入 Title 為「閱讀文章」
![[圖]](http://i.imgur.com/nuPZIwO.png)
拉一個 Bar Button Item 到 Navigation Item 的右邊
![[圖]](http://i.imgur.com/Lush69u.png)
點一下按鈕，在屬性檢視器將 System Item 改為 Refresh
![[圖]](http://i.imgur.com/kPUERTp.png)
打開 Assistant editor 按著 Ctrl 將按鈕拉到程式碼的類別裡
![[圖]](http://i.imgur.com/Xla2QKY.png)
跳出的選單，Connection 改為 Action，名稱輸入 refresh，點 Connect
![[圖]](http://i.imgur.com/G35C5tq.png)
自動產生了一個點擊按鈕後會執行的成員函數 refresh(_:)
![[圖]](http://i.imgur.com/nMSWW5q.png)
切換回 Standard editor，修改成員函數 refresh(_:) 為
@IBAction func refresh(_ sender: Any) {
self.webView.reload()
}
self.webView.reload()
}
執行看看，閱讀文章時點右上角的 refresh 按鈕重新整理網頁
一樣的方法再加一個回上頁的按鈕
拉一個 Bar Buttom Item 到 refresh 按鈕的左邊
在屬性檢視器輸入 Title 為「回上頁」
取消勾選「Enabled」，一開始先顯示為灰色的不可點擊狀態
![[圖]](http://i.imgur.com/Uk4CIj7.png)
開啟 Assistant editor
對回上頁按鈕按著 ctrl 拉一個 @IBOulet 到程式碼中成員變數的地方
名稱輸入 goBackBtn
@IBOutlet weak var goBackBtn: UIBarButtonItem!
再對回上頁按鈕按著 ctrl 拉一個 @IBAction 到程式碼中
名稱輸入 goBack
修改產生的成員函數 goBack(_:) 為
@IBAction func goBack(_ sender: Any) {
self.webView.goBack()
}
self.webView.goBack()
}
切換回 standard editor
修改 webView 的 delegate 函數 webViewDidFinishLoad()，加上
if self.webView.canGoBack {
self.goBackBtn.isEnabled = true
} else {
self.goBackBtn.isEnabled = false
}
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
※ 看板: KnucklesNote 文章推薦值: 0 目前人氣: 0 累積人氣: 1972
回列表(←)
分享