Do it! 스위프트로 아이폰 앱 만들기
07장 웹 뷰로 간단한 웹 브라우저 만들기
📱 실행 화면 📱
💻 Step 1. 필요한 객체 배치하기
URL 입력 시에 필요한 텍스트 필드 배치하기
입력 받은 URL로 홈페이지 이동을 위한 Go 버튼 배치하기
Site1, Site2, HTML, File 각 버튼 배치하기
Web View 배치하기
Tool Bar 배치하기
Tool Bar 안에 Bar Button Item 4개와 Flexible Space Bar Button Item 5개를 번갈아 배치하기
💻 Step 2. Tool Bar 의 바 버튼 아이콘 변경하기
각 바 버튼을 더블 클릭해서 Attributes inspector 의 System Item 변경하기
왼쪽부터 Stop, Refresh, Rewind, Fast Forward
💻 Step 3. Activity Indicator View 배치하기
로딩을 표시하기 위한 Activity Indicator View 를 화면 가운데에 배치하기
💻 Step 4. Outlet 변수, Action 함수 추가하기
Text Field, Web View, Activity Indicator View 에 대한 아웃렛 변수 추가하기
Button 5개와 Tool Bar 내의 Bar Button Item 4개에 대한 액션 함수 추가하기
import WebKit 추가하기 (WKWebView 를 사용하기 위해)
💻 Step 5. 앱 실행 시 지정된 페이지 보여주기
func loadWebPage(_ url: String) {
let myUrl = URL(string: url)
let myRequest = URLRequest(url: myUrl!)
myWebView.load(myRequest)
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
loadWebPage("http://m.naver.com")
}- 웹페이지를 불러오는 함수 작성하기
- 뷰가 로드되었을 때 기본 웹 페이지 주소 불러오기
- Information Property List 에 App Transport Security Settings 추가하기
- App Transport Security Settings 에 Allow Arbitrary Loads 추가하기
- Allow Arbitrary Loads 의 Value 를 YES 로 설정하기
💻 Step 5. 액티비티 인디케이터 구현하기
class ViewController: UIViewController, WKNavigationDelegate {- WKNavigationDelegate 상속하기
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//추가 코드
myWebView.navigationDelegate = self
loadWebPage("http://m.naver.com")
}- navigationDelegate 를 뷰 컨트롤러(self)로 설정하기
- 페이지 로딩 상태 같은 이벤트를 뷰 컨트롤러가 감지하고 처리할 수 있게 된다.
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
myActivityIndicator.startAnimating()
myActivityIndicator.isHidden = false
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
myActivityIndicator.stopAnimating()
myActivityIndicator.isHidden = true
}
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
myActivityIndicator.stopAnimating()
myActivityIndicator.isHidden = true
}- webView(didCommit) : 페이지 로딩 중에 호출되는 메소드로 인디케이터를 실행하고 화면에 나타나게 한다.
- webView(didFinish), webView(didFail) : 페이지 로딩이 끝났거나 실패했을 경우에는 인디케이터를 중단하고 화면에서 숨긴다.
💻 Step 6. 각 버튼 기능 구현하기
func checkUrl(_ url: String) -> String {
var strUrl = url
if !strUrl.hasPrefix("http://") { strUrl = "http://" + strUrl }
return strUrl
}
@IBAction func btnGotoUrl(_ sender: UIButton) {
loadWebPage(checkUrl(txtUrl.text!))
txtUrl.text = ""
}- checkUrl : 텍스트 필드에 입력된 주소에 "http://" 가 있는지 확인하고 없으면 앞에 추가해주기
- 텍스트 필드에 입력된 주소 웹 뷰 불러오기
@IBAction func btnGoSite1(_ sender: UIButton) {
loadWebPage("https://www.youtube.com/")
}
@IBAction func btnGoSite2(_ sender: UIButton) {
loadWebPage("https://velog.io/")
}- Site1 은 유튜브, Site2 는 벨로그 불러오기
@IBAction func btnLoadHtmlString(_ sender: UIButton) {
let htmlString = "<h1> HTML String </h1><p> String 변수를 이용한 웹 페이지 </p><p><a href=\"https://www.youtube.com\">YouTube</a>으로 이동</p>"
myWebView.loadHTMLString(htmlString, baseURL: nil)
}
@IBAction func btnLoadHtmlFile(_ sender: UIButton) {
let filePath = Bundle.main.path(forResource: "htmlView", ofType: "html")
let myUrl = URL(fileURLWithPath: filePath!)
let myRequest = URLRequest(url: myUrl)
myWebView.load(myRequest)
}<!--htmlView.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1> HTML FILE </h1>
html File을 이용한 웹페이지<br>
<p><a href="https://velog.io">velog</a>로 이동</p>
</body>
</html>
- HTML 코드를 웹 뷰에 나타내기
- HTML 파일을 웹 뷰에 나타내기
@IBAction func btnStop(_ sender: UIBarButtonItem) {
myWebView.stopLoading()
}
@IBAction func btnReload(_ sender: UIBarButtonItem) {
myWebView.reload()
}
@IBAction func btnGoBack(_ sender: UIBarButtonItem) {
myWebView.goBack()
}
@IBAction func btnGoForward(_ sender: UIBarButtonItem) {
myWebView.goForward()
}- 로딩 중지, 새로고침, 이전 페이지, 다음 페이지 구현하기
💻 Final Step. ViewController.swift 전체 소스 코드
import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
@IBOutlet var txtUrl: UITextField!
@IBOutlet var myWebView: WKWebView!
@IBOutlet var myActivityIndicator: UIActivityIndicatorView!
func loadWebPage(_ url: String) {
let myUrl = URL(string: url)
let myRequest = URLRequest(url: myUrl!)
myWebView.load(myRequest)
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
myWebView.navigationDelegate = self
loadWebPage("http://m.naver.com")
}
func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
myActivityIndicator.startAnimating()
myActivityIndicator.isHidden = false
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
myActivityIndicator.stopAnimating()
myActivityIndicator.isHidden = true
}
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
myActivityIndicator.stopAnimating()
myActivityIndicator.isHidden = true
}
func checkUrl(_ url: String) -> String {
var strUrl = url
if !strUrl.hasPrefix("http://") { strUrl = "http://" + strUrl }
return strUrl
}
@IBAction func btnGotoUrl(_ sender: UIButton) {
loadWebPage(checkUrl(txtUrl.text!))
txtUrl.text = ""
}
@IBAction func btnGoSite1(_ sender: UIButton) {
loadWebPage("https://www.youtube.com/")
}
@IBAction func btnGoSite2(_ sender: UIButton) {
loadWebPage("https://velog.io/")
}
@IBAction func btnLoadHtmlString(_ sender: UIButton) {
let htmlString = "<h1> HTML String </h1><p> String 변수를 이용한 웹 페이지 </p><p><a href=\"https://www.youtube.com\">YouTube</a>으로 이동</p>"
myWebView.loadHTMLString(htmlString, baseURL: nil)
}
@IBAction func btnLoadHtmlFile(_ sender: UIButton) {
let filePath = Bundle.main.path(forResource: "htmlView", ofType: "html")
let myUrl = URL(fileURLWithPath: filePath!)
let myRequest = URLRequest(url: myUrl)
myWebView.load(myRequest)
}
@IBAction func btnStop(_ sender: UIBarButtonItem) {
myWebView.stopLoading()
}
@IBAction func btnReload(_ sender: UIBarButtonItem) {
myWebView.reload()
}
@IBAction func btnGoBack(_ sender: UIBarButtonItem) {
myWebView.goBack()
}
@IBAction func btnGoForward(_ sender: UIBarButtonItem) {
myWebView.goForward()
}
}
언젠간 iOS 개발자가 되겠지