iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 15
1
Software Development

Swift零基礎實作旅遊景點app系列 第 15

Swift從零開始-Day15: UIWebView及下載圖片基礎學習

1. 概念

  • 先找到網址
  • 轉成url
  • url request
  • WebView去讀取request

2. 建立方法:

  • 先把UIWebView拉進介面中進行連結,這邊命名成myWebView。
  • 接著進行上述的步驟,即可讓網頁顯示在畫面上,程式碼如下:
override func viewDidLoad() {
        super.viewDidLoad()
        if let url = URL(string: "https://www.apple.com"){
            let request = URLRequest(url: url)
            myWebView.loadRequest(request)
        }   
    }

PS:

  1. 如果要連接apple以外的網址,還必須去info.plist設定。
    加入App Transport Security Settings -> Allow Arbitrary Loads -> Yes
    [image:F1D11464-8363-4BD9-A384-72833B13FD88-2203-00000BFDE3493842/螢幕快照 2018-01-02 下午2.13.09.png]
  2. 增加activityIndicator:把activityIndicator拉到介面中,命名為myActivityIndicator,並在屬性版中勾選Hides when stopped(停止轉動時會隱藏起來),設定在載入網頁時要顯示,載好網頁後消失。要得知UIWebView的狀態,讓ViewController遵守UIWebViewDelegate,並實作兩個方法。
func webViewDidStartLoad(_ webView: UIWebView) {
        myActivityIndicator.startAnimating()
    }
    
    func webViewDidFinishLoad(_ webView: UIWebView) {
        myActivityIndicator.stopAnimating()
    }
  1. 所有跟畫面有關的工作都在main queue處理:因為處理畫面的更新,所以不可以放同步(sync)的工作,要不然會產生看起來畫面可能卡住的情況。
  2. 共時佇列處理跟畫面無關的工作,所以可以放同步或非同步的工作。

3. 下載圖片的方法

3-1. 利用Data(contentOf: URL)

  • 找到網址 -> 轉成url -> 用Data class -> 最後讓imageView顯示。
    程式碼如下:
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var myImageView: UIImageView!
    
    var session:URLSession?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //存入圖片網址
        let imageAddress = "https://cdn1.macworld.co.uk/cmsdata/features/3523633/swift_3_thumb800.jpg"
        //產生url
        if let imageUrl = URL(string: imageAddress){
            DispatchQueue.global().async {
                do{
                    //利用Data來產生下載內容
                    let imageData = try Data(contentsOf: imageUrl)
                    let downLoadImage = UIImage(data: imageData)
                     DispatchQueue.main.async {
                        self.myImageView.image = downLoadImage
                    }
                }catch{
                    print(error.localizedDescription)
                }
            }
        }
}
override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}
} 

說明:
一開始先將圖片網址轉成url,之後為了避免在下載時畫面卡住,所以把網路下載的部分寫在共時佇列中,把imageView要顯示畫面寫在主佇列中。

3-2. 利用URLSession下載

  • 實體化URLSession這個class -> 再呼叫dataTask方法 -> 接著用resume方法。
  • 用URLSession去連網預設就是在共時佇列中下載,不用再額外設定。
 //要用URLSession來下載圖片
    var session:URLSession?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //存入圖片網址
        let imageAddress = "https://cdn1.macworld.co.uk/cmsdata/features/3523633/swift_3_thumb800.jpg"

        session = URLSession(configuration: .default)
        if let imageUrl = URL(string: imageAddress){
            let task = session?.dataTask(with: imageUrl, /*下載完後要做的事*/ completionHandler: { (data, response, error) in
                if error != nil{
                    print(error?.localizedDescription)
                    return
            }
                if let loadedData = data{
                    let loadedImage = UIImage(data: loadedData)
                    DispatchQueue.main.async {
                        self.myImageView.image = loadedImage
                    }
                    }
              })
task?.resume()
            }

上一篇
Swift從零開始-Day14:旅遊App-Part II
下一篇
Swift從零開始-Day16: UIWebView及下載圖片基礎學習(2)
系列文
Swift零基礎實作旅遊景點app30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言