顯示廣告
隱藏 ✕
回列表(←)
Disp BBS guest 註冊 登入(i) 線上人數: 575
首頁(home) 上頁(↑) 下頁(↓) 末頁(end)
看板 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
※ 看板: KnucklesNote　文章推薦值: 0 目前人氣: 0 累積人氣: 1972　
分享網址: 複製 已複製
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇