티스토리 뷰
Xcode(버전11.2.1)를 이용하여 웹 뷰(Web View) 앱을 만든다:)
'UIWebView' was deprecated in iOS 12.0: No longer supported; please adopt WKWebView...오류
WKWWebView로 다시 만들어봐야지..
1. 앱 실행 시 지정된 웹 페이지를 보여준다.
2. 액티비티 인디케이터 구현
3. Site1, Site2 버튼 구현(웹 페이지 지정)
4. 정지, 재로딩, 이전 페이지, 디음 페이지 버튼 구현
5. html 버튼 구현
6. file 버튼 구현
7. 문자열 자동 삽입 기능 구현
- 스토리보드 앱 화면 구성이다.
text field, button, web view, activity indicator view, toolbar, flexible space bar item 추가한다.
toolbar는 flexible space bar button item과 bar button item을 번갈아가면서 배치한다.
화면 구성의 toolbar item 아이콘 모양 수정은 위와 같은 방법으로 변경한다.
stop , refresh, rewind, fast forward 순서의 아이콘으로 변경한다.
동작할 때만 인디케이터가 보이고, 동작을 멈추면 보이지 않게 하기 위해 Hides When Stopped 항목을 체크한다.
- 아울렛 변수 추가
textfield name 'txtUrl'
webview name 'myWebView'
activityIndicatorview name 'myActivityIndcator'
- 액션 함수 추가
button name 'btnGotoUrl'
button name 'btnGoSite1'
button name 'btnGoSite2'
button name 'btnLoadHtmlString'
button name 'btnLoadHtmlFile'
BarButtonItem name 'btnStop'
BarButtonItem name 'btnReload'
BarButtonItem name 'btnGoBack'
BarButtonItem name 'btnForward'
아웃렛 변수, 액션 함수를 모두 추가한 ViewController.swift 화면
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1> HTML FILE </h1>
html File을 이용한 웹페이지<br>
<p><a href="https://moonibot.tistory.com">moonibot 블로그</a>로 이동</p>
</body>
</html>
File 버튼 구현하기 위해서 html 파일이 필요하다.
File 버튼에 사용될 html 파일을 생성하고, 위의 소스를 추가한다.
전체 소스 보기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
//
// ViewController.swift
// day191130_ Web
//
// Created by 무니 on 02/12/2019.
// Copyright © 2019 com.mooni. All rights reserved.
//
import UIKit
class ViewController: UIViewController, UIWebViewDelegate {
@IBOutlet var txtUrl: UITextField!
@IBOutlet var myWebView: UIWebView!
@IBOutlet var myActivityIndcator: UIActivityIndicatorView!
// url의 인수를 통해 웹 페이지의 주소를 전달받아 웹페이지를 보여줌
func loadWebPage(_ url: String) {
// url에 공백이나 한글이 포함되었있을 경우, 에러가 발생하니 url을 인코딩
let escapedString = url.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)
let myUrl = URL(string: escapedString!)
let myRequest = URLRequest(url: myUrl!)
myWebView.loadRequest(myRequest)
}
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
myWebView.delegate = self
loadWebPage("https://moonibot.tistory.com") // 앱 실행 시 초기 홈페이지를 불러옴
}
func webViewDidStartLoad(_ webView: UIWebView) {
// 웹 뷰가 시작될 때 인디케이터를 시작
myActivityIndcator.startAnimating()
}
func webViewDidFinishLoad(_ webView: UIWebView) {
// 웹 뷰가 종료될 때 인디케이터를 종료
myActivityIndcator.stopAnimating()
}
//"http://" 문자열이 없을 경우 자동으로 삽입
func checkUrl(_ url: String) -> String {
var strUrl = url
let flag = strUrl.hasPrefix("http://")
if !flag {
strUrl = "http://" + strUrl
}
return strUrl
}
// 텍스트 필드에 적힌 주소로 웹 뷰 로딩
@IBAction func btnGotoUrl(_ sender: UIButton) {
let myUrl = checkUrl(txtUrl.text!)
txtUrl.text = ""
loadWebPage(myUrl)
}
// Site1 버튼 클릭 시 moonibot.tistory.com/category/IT/swift으로 이동
@IBAction func btnGoSite1(_ sender: UIButton) {
loadWebPage("https://moonibot.tistory.com/category/IT/swift")
}
// Site2 버튼 클릭 시 moonibot.tistory.com/category/IT/database으로 이동
@IBAction func btnGoSite2(_ sender: UIButton) {
loadWebPage("https://moonibot.tistory.com/category/IT/database")
}
// HTML 코드를 변수에 저장하고 html 버튼을 클릭하면 HTML 문법에 맞게 작성된 문자열 변수를 웹 뷰로 나타냄
@IBAction func btnLoadHtmlString(_ sender: UIButton) {
let htmlString = "<h1> HTML String </h1><p> String 변수를 이용한 웹페이지 </p><p><a href=\"https://moonibot.tistory.com\">moonibot</a>으로 이동</p>"
myWebView.loadHTMLString(htmlString, baseURL: nil)
}
// htmlView.html을 웹 뷰로 나타냄
@IBAction func btnLoadHtmlFile(_ sender: UIButton) {
let myHtmlBundle = Bundle.main
let filePath = myHtmlBundle.path(forResource: "htmlView", ofType: "html")
loadWebPage(filePath!)
}
@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() // 다음 웹 페이지로 이동
}
}
|
cs |
html 파일을 불러올때 html 파일 url 중 공백으로 인해 오류가 발생해서 url를 인코딩 했다.
// url에 공백이나 한글이 포함되었있을 경우, 에러가 발생하니 url을 인코딩
let escapedString = url.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)
시뮬레이터 결과 화면
'IT > swift' 카테고리의 다른 글
| [iOS/swift] 페이지 컨트롤(Page Control) 갤러리 앱 만들기 (1) | 2019.12.12 |
|---|---|
| [iOS/swift] 맵 뷰(Map View) 지도 앱 만들기 MapKit, Segmented Control (1) | 2019.12.05 |
| [iOS/swift] 알람 시계 앱 만들기, 데이트 피커(Date Picker)와 얼럿(Alert) (2) | 2019.12.01 |
| [iOS/swift] 얼럿(Alert) 앱 만들기 경고 메세지 표시하기 (0) | 2019.11.29 |
| [iOS/swift] 이미지 피커 뷰(Picker View) 앱 컴포넌트 추가하기 (0) | 2019.11.28 |