라벨이 Bottom Bar인 게시물 표시

iOS WebView Bottom Navigation Icon 적용

이미지
지난 포스트 에서 iOS Navigation Controller를 이용해서 WebView에  Bottom Navigation을 구현해보았다. 하지만 버튼이 사파리의 그것과 달리 텍스트로 보여지는데 텍스트 대신 아이콘으로 변경해보자. 우선 아이콘을 준비해야 하는데 Icons8 사이트에서 4 가지 버튼(Back, Forward, Reload, Home)에 맞는 아이콘을 다운받도록 하자. icons8.com에서 다운받는 방법은  https://icsdd.blogspot.com/2018/05/blog-post_24.html  참조. 필자가 다운받은 아이콘은 다음과 같다. 이제 Xcode를 실행하고 지난 포스트에서 만든 프로젝트를 열고 좌측 Project navigator의 Assets.xcassets를 선택한다. <사진 1>과 같은 모습이다. <사진 1> <사진 2> <사진 3> <사진 4> <사진 2>와 같이 다운로드한 아이콘들을 탐색기에서 끌어다가 Xcode의 Outline View로 놓으면 <사진 3>과 같은 모습이다. 우측 Set Viewer를 보면 추가한 아이콘들이 1x로 표시되는데 <사진 4>와 같이 아이콘을 Drag&Drop으로 2x 또는 3x로 이동할 수 있다. <사진 5> <사진 6> 이제 스토리보드를 열어서 각각의 버튼에 아이콘을 설정해보자. <사진 5>와 Back버튼을 선택하면 우측 Attribute inspector > Bar Item > Image 항목의 드롭다운 목록을 열어보면 이전에 추가한 아이콘들이 보인다. Back버튼으로 사용할 아이콘을 선택하고 나머지 Forward, Reload, Home버튼도 동일한 방법으로 아이콘을 설정해준다. 정상적으로 아이콘설정을 ...

iOS WebView Bottom Navigation 구현

이미지
iOS UIWebView를 이용해서 웹앱을 만들고 Safari처럼 하단에 네비게이션 기능을 구현해 보자. Navigation Controller의 Bottom Bar를 이용해서 뒤로가기, 앞으로가기, 새로고침, 홈으로 가기  4개의 기능을 만든다. 특히 아이폰은 안드로이폰에서 제공하는 뒤로가기 버튼이 없기 때문에 웹앱의 경우 사용자들이 불편함을 많이 호소하는데 뒤로가기 뿐만 아니라 일반적으로 브라우저에서 제공하는 앞으로가기, 새로고침, 홈으로 가기 기능을 추가한다면 사용자들이 더 편리하게 앱을 사용할 수 있을것 같다. 우선 Xcode > File > New > Project... 로 <사진 1>과 같이 Single View App으로 프로젝트를 하나 생성한다. <사진 1> <사진 2> <사진 2>는 스토리보드 화면이다. 우측 유틸리티 영역의 하단 필터바에서 webview로 검색을 하면 화면과 같이 2개의 웹뷰가 나타난다. 하나는 Web View이고 다른 하나는 Webkit View이다. 보이는 바와 같이 Web View는 deprecated 라고 표시된다. 예전부터 사용되어 오던 UIWebView인데 더 이상 사용되지 않는다. 좀 더 개선된 Webkit View를 Drag&Drop으로 View영역에 넣고 레이아웃을 적당히 설정한다. 우측 상단의 Assistant Editor를 열어서  ViewController.swift파일을 열고 CTRL키를 누른채 Web View를 마우스로 끌어다가 놓으면 <사진 3>과 같이 다이얼로그창이 열린다. Name을 webView로 입력하고 Connect버튼을 누르면 변수가 자동으로 생성된다. <사진 3> <사진 4>와 같이 ViewController에 WebKit을 import하고 viewDidLoad함수에 웹뷰 초기설정을 해준다....