[ IOS ] 웹 앱 만들기 - 웹 뷰 (Web View), 툴바 (Toolbar), 액티비티 인디케이터 (Activity Indicator)

공부한 내용을 정리한 글입니다.

 

문제

웹 뷰에 HTML 파일을 읽어 디스플레이하고 자신의 블로그 링크를 걸어 클릭시 이동하게 만들어보자. 그리고 URL 검색 기능을 만들어 버튼 클릭 시 웹 뷰에 해당 웹 페이지가 뜨도록 구현하라. 더하여 툴바에 정지, 새로 고침, 이전 페이지 이동, 다음 페이지 이동 버튼을 구현하여 웹 페이지 관련 도구를 제공하라.

 

 

구현 순서

1. 레이아웃 구성
2. 아울렛 변수와 액션 함수 생성
3. 앱 시작 화면 초기화 - HTML 파일로 웹 페이지 생성
4. url 입력 기능 구현
5. 툴바 버튼 기능 구현
6. 액티비티 인디케이터 구현

 

최종 결과

 

 

 

 

 

 

 

 

---

1. 레이아웃 구성

 

 

 

1.1 웹 뷰 Web View

: 웹 콘텐츠를 뷰(view) 형태로 보여 주는 앱. HTML로 작성된 홈페이지를 표시할 수 있다.  

 

WebKit View

Displays embedded web content and enables content navigation.

포함된 웹 콘텐츠를 보여주고 콘텐츠 탐색을 활성화한다.

 

WebKit View의 아울렛 변수 생성 시 WKWebView 타입으로 선언한다. WKEwbView는 WebKit를 import 해야 사용할 수 있다.

 

 

WKWebView 클래스

An object that displays interactive web content, such as for an in-app browser.

인앱 브라우저와 같이 대화형의 웹 콘텐츠를 표시하는 객체

 

 

---

 

 

 

1.2 툴바 Toolbar

 

Toolbar

displays a horizontal bar of buttons
Provides a mechanism for displaying a toolbar at the bottom of the screen and supports the display and selection of toolbar items (instances of UIToolbarItem). You can use UIToolbarDelegate to specify custom views for toolbar items.

버튼이 있는 수평 바.

화면 아래에 툴바를 보여주기 위한 메커니즘을 제공한다. 그리고 툴바 아이템의 표시와 선택을 지원한다. UIToolbarDelegate를 사용하여 툴바 아이템에 대한 커스텀 뷰를 지정할 수 있다.

 

 

용도

툴바에는 툴바 아이템이라고 하는  한 개 이상의 버튼이 있는데, 이 버튼은 보통 화면의 현재 내용과 관련된 도구를 제공한다.

바 버튼 아이템은 툴바나 내비게이션 바에 배치하기 위해 특화된 버튼이므로 버튼과 동일하게 동작한다.

System Item 속성을 통해 기능에 맞게 아이콘을 변경할 수 있다.

 

예) 정지(Stop), 새로 고침(Refresh), 되감기(Rewind), 앞으로 감기(FastFoward)

 

 

플렉서블 스페이스 바 버튼 아이템  Flexible Space Bar Button Item

툴바의 공간을 같은 간격으로 나눠 바 버튼 아이템을 배치할 때 사용한다.

Flexible

Item

Flexible

Item

Flexible

Item

Flexible

Item

Flexible

 

 

 

 

 

---

 

 

1.4 액티비티 인디케이터 뷰

 

액티비티 인디케이터 뷰 Activity Indicator View

A view that shows that a task is in progress.

일의 진행 정도를 보여주는 뷰. 즉 로딩을 표시해주는 뷰

Hides When Stopped 속성을 true로 하여 동작을 멈추면 액티비티 인디케이터 뷰가 보이지 않도록 한다.

 

 

 

 

 

---

2. 아울렛 변수와 액션 함수 생성

• 아울렛 변수: 객체의 값을 이용하거나 속성을 제어해야 할 때 생성. 예) 텍스트 필드의 text를 받아올 때 text 속성 사용
• 액션 함수: 객체가 선택되었을 때 어떤 동작을 수행해야 한다면 생성

 

import UIKit
import WebKit

class WebMissionViewController: UIViewController {
    @IBOutlet var txtUrl: UITextField! 
    @IBOutlet var myWebView: WKWebView!
    @IBOutlet var MyActivityIndicator: UIActivityIndicatorView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func btnGotoUrl(_ sender: UIButton) {
    }
    
    @IBAction func btnBarStop(_ sender: UIBarButtonItem) {
    }
    
    @IBAction func btnBarReload(_ sender: UIBarButtonItem) {
    }
    
    @IBAction func btnBarGoBack(_ sender: UIBarButtonItem) {
    }
    
    @IBAction func btnBarGoForward(_ sender: UIBarButtonItem) {
    }
}

 

 

 

 

 

 

 

---

3. 앱 시작 화면 초기화 - HTML 파일로 웹 페이지 생성

 

3.1 Info.plist 파일 수정하기

Information property list의 약자이며, 키-값 쌍의 정보가 저장되어있다. 여러 항목들과 관련된 리소스 설정이 들어있다.

웹 뷰에 웹 페이지가 로드되게 하려면 설정을 추가해야 한다.

 

1. Information Property List에 App Transport Security Settings을 추가한다.
2. App Transport Security Settings에 AllowArbitrary Loads(임의 로드 허용)를 추가한다.
3. AllowArbitrary Loads의 값을 Yes로 바꾼다. 즉, 임의로 웹 페이지를 로드하는 것을 허용한다는 의미이다.

 

 

---

 

 

 

3.2 loadWebPage 함수 구현

:웹 뷰에 웹페이지를 보여 주기 위한 함수

 

//웹 뷰에 웹 페이지를 로드하기 위한 함수
    func loadWebPage(_ url: String) {
        let myUrl = URL(string: url)
        let myRequest = URLRequest(url: myUrl!)
        myWebView.load(myRequest)
    }

 

URL

A value that identifies the location of a resource, such as an item on a remote server or the path to a local file

로컬 파일의 경로 또는 원격 서버에 대한 아이템같이 리소스의 위치를 식별하는 값

 

 

 

URLRequest

A value that identifies the location of a resource, such as an item on a remote server or the path to a local file

프로토콜 또는 URL scheme의 독립적인 URL 로드 요청

 

 

 

WKWebView.load(_ request: URLRequest)

Loads the web content referenced by the specified URL request object and navigates to it.

지정된 URL 요청 객체에서 참조된 웹 콘텐츠를 로드하고, 해당 객체로 이동한다.

 

 

---

 

 

3.3 HTML 파일 생성

HTML 문법에 맞게 작성된 파일을 웹 뷰에 나타낼 수 있다.

 

1. File/New/File... 선택
2. Other의 Empty 선택
3. 파일명.html 생성
4. 생성된 파일에 HTML 문법에 맞도록 코드 작성

<html>
    <head>
        <meta charset = "utf-8">
    </head>
    <body>
        <h1> HTML 파일 </h1>
        html 파일을 이용한 웹 페이지<br>
        <p>나의 블로그 <a href="https://88yhtserof.tistory.com">88yhtserof</a>로 이동</p>
    </body>
</html>

 

 

---

 

 

 

3.4 웹 뷰에 HTML 파일로 작성한 웹 페이지 뜨게 하기

override func viewDidLoad() {
        super.viewDidLoad()
        
        //초기 화면 설정
        let filePath = Bundle.main.path(forResource: "htmlView", ofType: "html")
        let fileUrl = URL(fileURLWithPath: filePath!)
        let fileRequest = URLRequest(url: fileUrl)
        myWebView.load(fileRequest)
    }

 

 

 

 

 

 

 

 

 

 

 

---

4. URL 입력 기능 구현

텍스트 필드에 주소를 입력하고 'Go' 버튼을 클릭하면 웹 뷰에 해당 주소 웹 페이지가 뜨도록 구현한다.

접두사로 프로토콜, 즉 'https://'가 있는지 확인하고 없으면 붙여서 웹 페이지를 로드한다.

 

//주소의 프로토콜 여부를 확인하는 함수
    func checkUrl(_ url: String) -> String {
        var strUrl:String = url
        let flag = strUrl.hasPrefix("https://")
        
        if !flag {
            strUrl = "https://" + strUrl
        }
        return strUrl
    }
    
    @IBAction func btnGotoUrl(_ sender: UIButton) {
        let myUrl = checkUrl(txtUrl.text!)
        txtUrl.text = ""
        
        loadWebPage(myUrl)
    }

 

 

 

 

 

 

 

---

5. 툴바 아이템 버튼 구현하기 - 정지, 재로딩, 이전 페이지, 다음 페이지

	@IBAction func btnBarStop(_ sender: UIBarButtonItem) {
        myWebView.stopLoading()
    }
    
    @IBAction func btnBarReload(_ sender: UIBarButtonItem) {
        myWebView.reload()
    }
    
    @IBAction func btnBarGoBack(_ sender: UIBarButtonItem) {
        myWebView.goBack()
    }
    
    @IBAction func btnBarGoForward(_ sender: UIBarButtonItem) {
        myWebView.goForward()
    }

 

메서드 명	설명
stopLoading()	Stops loading all resources on the current page. 현재 페이지의 모든 리소스 로딩을 중단한다.
reload()	Reloads the current webpage. 현재 페이지를 재로딩한다. (웹 페이지 새로고침)
goBack()	Navigates to the back item in the back-forward list. 앞, 뒤 목록 중 뒤 항목으로 이동한다.(이전 웹 페이지로 이동)
goForward()	Navigates to the forward item in the back-forward list. 앞, 뒤 목록 중 앞 항목으로 이동한다. (다음 웹 페이지로 이동)

 

 

 

 

 

 

 

 

 

 

 

---

6. 액티비티 인디케이터 구현

액티비티 인디케이터 Activity Indicator

: 앱이 동작 중임을 사용자에게 보여 준다. 델리게이트 메서드를 사용해서 로딩, 완료, 실패에 대한 동작을 구현할 수 있습니다.

 

델리게이트란?

https://88yhtserof.tistory.com/23

[ IOS ] 피커 뷰 만들기 ( 프로토콜, 델리게이트 메서드 )

 

 

 

 

WKNavigationDelegate 프로토콜

Methods for accepting or rejecting navigation changes, and for tracking the progress of navigation requests.
Implement the methods of the WKNavigationDelegate protocol in the object you use to coordinate changes in your web view’s main frame
For example, you might use these methods to restrict navigation from specific links within your content. You might also use them to track the progress of requests, and to respond to errors and authentication challenges.

이동 변화를 수락 또는 거부하고, 이동 요청의 진행 사항을 추적하는 메서드

웹 뷰의 메인 프레임의 변화를 조정하는데 사용하는 객체에 WKNavigationDelegate 프로토콜의 메서드를 구현한다.

예를 들어, 지정된 링크로 이동을 제한하는 메서드를 사용할 수도 있다. 또 요청의 진행 상항을 추적하는 메서드를 사용하고 있고, 오류 및 인증 문제에 응답할 수도 있다.

 

 

didCommit를 인수로 갖는 델리게이트 메서드

Tells the delegate that the web view has started to receive content for the main frame.

웹 뷰가 메인 프레임에 대한 콘텐츠를 수신하기 시작했다는 것을 델리게이트에게 알린다.

로딩 중인지 확인하는 메서드

 

//didCommit을 인수로 갖는 메서드
    //로딩 중인지 확인하는 델리게이트 메서드
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        MyActivityIndicator.startAnimating()
        MyActivityIndicator.isHidden = false
    }

navigation

The navigation object that uniquely identifies the load request. 로드 요청을 고유하게 식별하는 탐색 객체

 

 

 

 

didFinish를 인수로 갖는 델리게이트 메서드

Tells the delegate that navigation is complete.

탐색이 완료되었음을 델리게이트에게 알린다.

로딩이 완료되었을 때 동작하는 메서드

 

//didFinish를 인수로 갖는 메서드
    //로딩이 끝났음을 알리는 델리게이트 메서드
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        MyActivityIndicator.stopAnimating()
        MyActivityIndicator.isHidden = true
    }

navigation

The navigation object that finished. 완료된 탐색 객체

 

 

 

didFail과 withError을 인수로 갖는 델리게이트 메서드

Tells the delegate that an error occurred during navigation.

탐색하는 동안 오류가 발생했다는 것을 델리게이트에게 알린다.

로딩 중 오류가 발생했을 때 동작하는 메서드

 

    //didFail과 withError을 인수로 갖는 델리게이트 메서드
    //로딩 중 오류가 발생했음을 알리는 델리게이트 메서드
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        MyActivityIndicator.stopAnimating()
        MyActivityIndicator.isHidden = true
    }

 

navigation	The navigation object for the operation. This object corresponds to a WKNavigationobject that WebKit returned when the load operation began. You use it to track the progress of that operation.  작업에 대한 탐색 객체. 이 객체는 WebKit이 로딩 작업을 시작할 때 반환했던 WKNavigationobject에 해당한다. 작업의 진행상황을 추적할 때 이 객체를 사용한다.
error	The error that occurred. 발생한 오류

 

 

 

 

 

 

 

 

 

Do It! 스위프트로 아이폰 앱 만들기 개정 5판
SWIFT 문서