开始用Swift开发iOS 10 - 21 使用WKWebView和SFSafariViewController

上一篇开始用Swift开发iOS 10 - 20 使用Tab Bar Controller 和 拆分Storyboard学习了工具栏和Storyboard的拆分，这一篇学习怎么在app中显示网页内容。由于原书中使用了的网站在国内不好访问，我就用了我的、博客、Github代替。

设计about view

• 下载图片拖进Assets.xcasset。

• 打开about.storyboard，拖进一个Image View到table view header，height为190，image为about-logo，content mode为Aspect fit。选择table view cell，identifier为Cell，style为Basic。

• 新建AboutTableViewController继承至UITableViewController，关联about中的table view controller。

• 在AboutTableViewController，添加：

    var sectionTitles = ["Leave Feedback", "Follow Us"]
    var sectionContent = [["Rate us on App Store", "Tell us your feedback"], ["Jianshu", "Blog", "Github"]]
    var links = ["http://www.jianshu.com/u/efce1a2a95ab", "http://andyron.com", "https://github.com/andyRon"]
  

table view的相关代理协议方法实现，这次使用俩个section，tableView(_:titleForHeaderInSection:)是获取section的title方法。

    override func numberOfSections(in tableView: UITableView) -> Int {
        return sectionTitles.count
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return sectionContent[section].count
    }

    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sectionTitles[section]
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
        
        cell.textLabel?.text = sectionContent[indexPath.section][indexPath.row]
        
        return cell
    }

• 移除Tableview下面分割线，在viewDidLoad中添加：

  tableView.tableFooterView = UIView(frame: CGRect.zero)
  

用Mobile Safari打开Web

可直接给出网址，通过Mobile Safari打开网站，UIApplication.shared.open(_:options:completionHandler:)。

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        switch indexPath.section {
        case 0:
            if indexPath.row == 0 {
                if let url = URL(string: "http://www.apple.com/itunes/charts/paid-apps/") {
                    UIApplication.shared.open(url, options: [:], completionHandler: nil)
                }
            }
        default:
            break
        }
        // 取消被选中状态
        tableView.deselectRow(at: indexPath, animated: false)
    }

使用WKWebView载入Web

使用使用WKWebView载入Web的例子

if let url = URL(string: "http://andyron.com") {
    let request = URLRequest(url: url)
    webView.load(request)
}

直接载入本地html文件的例子：

let url = URL(fileURLWithPath: "about.html")
let request = URLRequest(url: url)
webView.load(request)

• 在about.storyboard中拖进一个新的View Controller，用来展示Web内容。使用ctrl-drag建立Show类型的segue，identifier为 showWebView。

• 新建WebViewController继承至UIViewController，关联上面的用来显示Web内容的View Controller。
• 在WebViewController.swift中添加import WebKit，变量var webView: WKWebView!。
• 更新 viewDidLoad：

    override func viewDidLoad() {
        super.viewDidLoad()

        if let url = URL(string: "http://andyron.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    
    }

• 添加loadView，这个方法会在viewDidLoad之前调用创建WKWebView。

override func loadView() {
    webView = WKWebView()
    view = webView
}

• 更新AboutTableViewController中的tableView(_didSelectRowAtIndexPath:)：

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        switch indexPath.section {
        case 0:
            if indexPath.row == 0 {
                if let url = URL(string: "http://www.apple.com/itunes/charts/paid-apps/") {
                    UIApplication.shared.open(url, options: [:], completionHandler: nil)
                }
            } else if indexPath.row == 1 {
                performSegue(withIdentifier: "showWebView", sender: self)
    
            }     
        default:
            break
        }
        // 取消被选中状态
        tableView.deselectRow(at: indexPath, animated: false)
    }

• 由于自从iOS 9之后，出于安全考虑，默认只能访问HTTPS的网站，如果需要访问HTTP的网站，就需要在plist文件中添加许可：

使用SFSafariViewController载入Web

在AboutTableViewController.swift中加入import SafariServices，然后更新tableView(_didSelectRowAtIndexPath:)，只用通过url创建一个SFSafariViewController对象，然后使用present方法展示就可以了。

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
        switch indexPath.section {
        case 0:
            if indexPath.row == 0 {
                if let url = URL(string: "http://www.apple.com/itunes/charts/paid-apps/") {
                    UIApplication.shared.open(url, options: [:], completionHandler: nil)
                }
            } else if indexPath.row == 1 {
                performSegue(withIdentifier: "showWebView", sender: self)
    
            }
        case 1:
            if let url = URL(string: links[indexPath.row]) {
                let safariController = SFSafariViewController(url: url)
                present(safariController, animated: true, completion: nil)
            }
        default:
            break
        }
        // 取消被选中状态
        tableView.deselectRow(at: indexPath, animated: false)
    }

代码

Beginning-iOS-Programming-with-Swift

说明

此文是学习appcode网站出的一本书 《Beginning iOS 10 Programming with Swift》 的一篇记录

系列文章目录

• 开始用Swift开发iOS 10 - 1 前言
• 开始用Swift开发iOS 10 - 2 Hello World！第一个Swift APP
• 开始用Swift开发iOS 10 - 3 介绍Auto Layout
• 开始用Swift开发iOS 10 - 4 用Stack View设计UI
• [开始用Swift开发iOS 10 - 5 原型的介绍]
• 开始用Swift开发iOS 10 - 6 创建简单的Table Based App
• 开始用Swift开发iOS 10 - 7 定制Table Views
• 开始用Swift开发iOS 10 - 8 Table View和UIAlertController的交互
• 开始用Swift开发iOS 10 - 9 Table Row的删除, UITableViewRowAction和UIActivityViewController的使用
• 开始用Swift开发iOS 10 - 10 Navigation Controller的介绍和Segue
• 开始用Swift开发iOS 10 - 11 面向对象编程介绍
• 开始用Swift开发iOS 10 - 12 丰富Detail View和定制化Navigation Bar
• 开始用Swift开发iOS 10 - 13 Self Sizing Cells and Dynamic Type
• 开始用Swift开发iOS 10 - 14 基础动画，模糊效果和Unwind Segue
• 开始用Swift开发iOS 10 - 15 使用地图
• 开始用Swift开发iOS 10 - 16 介绍静态Table Views，UIImagePickerController和NSLayoutConstraint
• 开始用Swift开发iOS 10 - 17 使用Core Data