[ios] ios 6: webView

이번 포스팅은 ios App 내부에서 url 주소를 호출하여 해당 웹사이트에 접속할 수 있게 해주는 WebView를 직접 간단한 웹브라우저를 하나 만들어 보면서 실습해보려고 한다.

 

ios 12 버전 이후로는 webView 라이브러리가 deprecated 됐기 때문에 WebKit 을 import 하여 WKWebView를 사용하여야 한다.

- 둘 다 구현하고 있는 메서드와 사용 방법은 동일하기 때문에 따로 문제가 될 건 없다.

 

바로 들어가보자.

---

우선, 기본적인 웹브라우저의 동작을 생각하여 스토리보드를 아래와 같이 작성했다.

텍스트 필드에 URL 을 입력하고, Go 버튼을 탭하면 해당 URL로 접속하며 WebView가 로드된다. 

 

WebView가 로드되는 동안 가운데 indicator가 돌면서 로딩 중이라는 것을 표현하도록 구현하려 한다.

 

또한 site1, 2 버튼으로 즐겨 찾는 페이지로 이동할 수 있으며 HTML 버튼은 텍스트필드에 html 태그를 직접 입력하여 페이지를 로드하도록 구현할 것이다.

 

File 버튼은 HTML 파일을 직접 APP 디렉토리에서 가져와 로드하는 기능이다.

 

하단은 툴바와 Item Bar Button으로 셋팅했으며, 여백을 균일하게 셋팅하기 위하여 fixed space bar button item을 아이템 사이에 삽입하였다.

---

import UIKit
import WebKit

class ViewController: UIViewController{
    
    @IBOutlet var urlField: UITextField!
    @IBOutlet var indicator: UIActivityIndicatorView!
    @IBOutlet var webView: WKWebView!
    
    func loadWebView(_ url: String) {
        let url = URL(string: url)!
        webView.load(URLRequest(url: url))
        webView.allowsBackForwardNavigationGestures = true
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        loadWebView("https://google.com/")
    }
    
}

 우선 textField, indicator, WKWebView를 @IBOutlet 변수로 선언하고, 앱을 실행하면 바로 구글로 접속하도록 코드를 작성했다.

 

이렇게만 작성하고 앱을 빌드하면, Web 접속에 대한 설정을 안해주었기 때문에 접속이 되지 않는다.

 

app > info 를 클릭한 뒤 아래와 같이 web 에 대한 설정을 추가해줘야 한다.

 

이제, 각 버튼들이 제 기능을 할 수 있도록 액션 함수들을 추가해주자.

import UIKit
import WebKit

class ViewController: UIViewController{
    
    @IBOutlet var urlField: UITextField!
    @IBOutlet var indicator: UIActivityIndicatorView!
    @IBOutlet var webView: WKWebView!
    
    func loadWebView(_ url: String) {
        let url = URL(string: url)!
        webView.load(URLRequest(url: url))
        webView.allowsBackForwardNavigationGestures = true
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        loadWebView("https://google.com/")
    }
    
    @IBAction func goAction(_ sender: UIButton) {
 
    }
    
    @IBAction func goSite1(_ sender: UIButton) {

    }
    
    @IBAction func goSite2(_ sender: UIButton) {

    }
    
    @IBAction func doHtml(_ sender: UIButton) {

    }
    
    @IBAction func goFile(_ sender: UIButton) {

    }
    
    @IBAction func doStop(_ sender: UIBarButtonItem) {
        webView.stopLoading()
    }

    @IBAction func doRefresh(_ sender: UIBarButtonItem) {
        webView.reload()
    }
    
    @IBAction func doPrevious(_ sender: UIBarButtonItem) {
        webView.goBack()
    }
    
    @IBAction func doNext(_ sender: UIBarButtonItem) {
        webView.goForward()
    }
    

}

 

Indicator를 사용하여 WebView의 로딩을 나타내기 위해서는 해당 WebView가 현재 로딩 중인지, 로딩이 끝이 나고 페이지를 띄웠는 지 혹은 도중에 에러가 발생했는 지를 알려줘야 한다.

 

그러기 위하여 아래와 같이 WKNavigationDelegate를 추가한 뒤, viewController 객체 자체가 해당 WebView 위임자를 위임 받도록 코드를 작성해야 한다.

class ViewController: UIViewController, WKNavigationDelegate{
    
   ...
   
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        webView.navigationDelegate = self
        loadWebView("https://google.com/")
    }
    
    ...
    
}

 

다음으로 WKNavigationDelegate 프로토콜이 구현하고 있는 webView 메서드들을 사용하여 각각 로딩 중, 로드 완료, 에러 발생에 대한 동작들을 재정의 해준다.

 // WKNavigationDelegate 구현함수, webLoad가 실행되고 주소창 입력이 끝난 뒤 동작
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
    indicator.startAnimating()
    indicator.isHidden = false
}

// WKNavigationDelegate 구현함수, webLoad가 실행되고 로드가 완전히 끝난 뒤 동작
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    indicator.stopAnimating()
    indicator.isHidden = true
}

// WKNavigationDelegate 구현함수, webLoad가 로드되는 도중 에러가 발생했을 때 동작
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
    indicator.stopAnimating()
    indicator.isHidden = true
}

 

마지막으로 http:// 를 자동으로 붙여줄 함수와 나머지 버튼에 대한 동작을 아래와 같이 작성하면 끝이다.

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate{
    
    @IBOutlet var urlField: UITextField!
    @IBOutlet var indicator: UIActivityIndicatorView!
    @IBOutlet var webView: WKWebView!
    
    func loadWebView(_ url: String) {
        let url = URL(string: url)!
        webView.load(URLRequest(url: url))
        webView.allowsBackForwardNavigationGestures = true
    }
    
    // WKNavigationDelegate 구현함수, webLoad가 실행되고 주소창 입력이 끝난 뒤 동작
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        indicator.startAnimating()
        indicator.isHidden = false
    }
    
    // WKNavigationDelegate 구현함수, webLoad가 실행되고 로드가 완전히 끝난 뒤 동작
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        indicator.stopAnimating()
        indicator.isHidden = true
    }
    
    // WKNavigationDelegate 구현함수, webLoad가 로드되는 도중 에러가 발생했을 때 동작
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        indicator.stopAnimating()
        indicator.isHidden = true
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        webView.navigationDelegate = self
        loadWebView("https://google.com/")
    }
    
    func checkUrl(_ url: String) -> String {
        var strUrl = url
        let flag = strUrl.hasPrefix("http://")
        if !flag {
            strUrl = "http://" + strUrl
        }
        
        return strUrl
    }
    
    @IBAction func goAction(_ sender: UIButton) {
        let myUrl = checkUrl(urlField.text!)
        urlField.text = " "
        loadWebView(myUrl)	
    }
    
    @IBAction func goSite1(_ sender: UIButton) {
        loadWebView("https://til-choonham.tistory.com/")
    }
    
    @IBAction func goSite2(_ sender: UIButton) {
        loadWebView("https://youtube.com/")
    }
    
    @IBAction func doHtml(_ sender: UIButton) {
        let htmlString: String = urlField.text ?? ""
        webView.loadHTMLString(htmlString, baseURL: nil)
    }
    
    @IBAction func goFile(_ sender: UIButton) {
        let filePath = Bundle.main.path(forResource: "htmlView", ofType: "html")
        let myUrl = URL(fileURLWithPath: filePath!)
        let myRequest = URLRequest(url: myUrl)
        webView.load(myRequest)
    }
    
    @IBAction func doStop(_ sender: UIBarButtonItem) {
        webView.stopLoading()
    }

    @IBAction func doRefresh(_ sender: UIBarButtonItem) {
        webView.reload()
    }
    
    @IBAction func doPrevious(_ sender: UIBarButtonItem) {
        webView.goBack()
    }
    
    @IBAction func doNext(_ sender: UIBarButtonItem) {
        webView.goForward()
    }
    

}

---

 

 

 

끝!!