[iOS] 애플리케이션 개발 프로젝트(7)

Let's TECH🧐·2021년 3월 27일

iOS mobile

iOS 애플리케이션 개발 프로젝트

목록 보기

7/7

그동안 꾸준히 프로젝트를 진행했지만 블로깅을 미처 하지 못했다.
그래서 오늘은 지금까지 진행했던 과정을 돌이켜보며, 이번 주에 진행했던 미팅에서는 어떤 부분을 구현했는지 블로깅하려 한다.

구현한 기능

A. 탭(TabBarController) 추가

iOS 애플리케이션 개발 6주차 블로깅부터 지금까지 추가적으로 구현한 기능은 바로 탭(TabBarController)을 추가한 것이다.
TabBarController는 화면 아래 탭을 이용해 화면의 전환을 편리하게 해주는 기능을 한다. 우리가 만들고 있는 어플에서는 HTML 페이지를 각각의 탭에 연결해 페이지 간 이동을 편리하게 하기 위해 TabBarController를 이용했다.

B. 앞으로/뒤로 가기 버튼 추가

먼저 스토리보드를 이용해 앞으로/뒤로 가기 버튼을 추가하는 작업을 진행하였고, 그 후에는 스토리보드가 아닌 코드를 사용해 뒤로 가기 버튼을 추가하는 과정을 진행하였다.

국비지원 과정을 시작하게 되면서 iOS 개발 프로젝트에 할애할 수 있는 시간이 많이 줄어들었지만, 그래도 매주 1회씩 조장님과 미팅을 진행하며 아주 조금씩이라도 꾸준히 진도를 나가고 있다😂
오늘은 네비게이션바 제목을 HTML 파일의 제목과 일치시키는 법을 알아보았다.

네비게이션바 제목을 HTML 파일의 제목과 일치시키기

HTML 파일의 내용을 수정하거나 앱의 기능을 수정하다보면 아래와 같이 네비게이션바 제목과 HTML 페이지의 제목이 일치하지 않는 경우가 생긴다.

이 문제를 해결하기 위해 HTML 페이지의 제목을 자동으로 네비게이션바의 제목으로 설정하는 코드를 추가해보자.

WebViewController1~6.swift 파일에 아래 코드를 추가한다.

webView.evaluateJavaScript("document.title") {
            (result, error) -> Void in
            self.navigationItem.title = result as? String
}

앱을 실행한 후 HTML 파일 제목이 표시되는지 확인한다.
앱을 실행한 상태에서 이미지를 클릭했을 때, 네비게이션바의 제목에 이미지의 파일 이름이 표시되는지 확인한다. 이미지 클릭 시 이미지의 파일명이 아닌 탭의 제목이 표시되도록 수정해보자.
1번에서 추가한 코드를 다음 코드로 변경한다.

if !(webView.canGoBack) { // 뒤로 갈 수 없는 경우만 페이지 타이틀을 네비게이션 타이틀로 지정
		webView.evaluateJavaScript("document.title") {
		    (result, error) -> Void in
         self.navigationItem.title = result as? String
    }
} // 뒤로 갈 수 있는 경우(이미지를 보고 있는 경우) 네비게이션 타이틀이 업데이트되지 않기 때문에 이전 페이지 타이틀이 그대로 표시된다.

위 코드를 WebViewController2~6.swift에 모두 적용한다.
앱을 실행해 확인한다.

오늘은 네비게이션바 제목을 HTML 파일의 제목과 일치시키는 작업을 진행했다.
항상 느끼는 거지만 조장님이 작성한 가이드를 보고 그대로 따라하는 것인데도 이곳 저곳에서 에러가 많이 발생한다. 다음 블로깅부터는 가이드를 따라하면서 발생한 에러와 에러 해결방법에 대해서도 같이 작성을 해봐야겠다. 그래서 이 블로깅이 더욱 많은 사람들에게 도움이 되는 글이 됐으면 좋겠다👍

Let's TECH🧐

Minju's Tech Blog

이전 포스트

[iOS] 애플리케이션 개발 프로젝트(7)