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>과 같은 모습이다.
<사진 2>와 같이 다운로드한 아이콘들을 탐색기에서 끌어다가 Xcode의 Outline View로 놓으면 <사진 3>과 같은 모습이다. 우측 Set Viewer를 보면 추가한 아이콘들이 1x로 표시되는데 <사진 4>와 같이 아이콘을 Drag&Drop으로 2x 또는 3x로 이동할 수 있다.
이제 스토리보드를 열어서 각각의 버튼에 아이콘을 설정해보자. <사진 5>와 Back버튼을 선택하면 우측 Attribute inspector > Bar Item > Image 항목의 드롭다운 목록을 열어보면 이전에 추가한 아이콘들이 보인다. Back버튼으로 사용할 아이콘을 선택하고 나머지 Forward, Reload, Home버튼도 동일한 방법으로 아이콘을 설정해준다. 정상적으로 아이콘설정을 마쳤다면 <사진 6>과 같은 모습이다.
이제 디바이스 또는 에뮬레이터로 실행해보자.
<사진 7>은 완성된 앱을 에뮬레이터로 실행한 모습이다. <사진 8>의 Safari App과 비슷한 모습인데 버튼의 라벨과 아이콘의 기본 색상은 보이것처럼 파란색인데 다른 색상으로 바꾸길 원한다면 Attribute inspector > Bar Button Item > Tint 항목에서 변경할 수 있다.
이제 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>
이제 디바이스 또는 에뮬레이터로 실행해보자.
<사진 7>은 완성된 앱을 에뮬레이터로 실행한 모습이다. <사진 8>의 Safari App과 비슷한 모습인데 버튼의 라벨과 아이콘의 기본 색상은 보이것처럼 파란색인데 다른 색상으로 바꾸길 원한다면 Attribute inspector > Bar Button Item > Tint 항목에서 변경할 수 있다.
<사진 7>
<사진 8>
안녕하세요. 이전 포스팅이랑 이번포스팅을보고 잘 따라하고 있습니다.
답글삭제비슷하긴한데 제가 해보고 싶은건 살짝 다른데요. 구현이 가능한것인지 혹은 안되는것인지 궁금합니다.
혹은 구현이 된다면 어떠한 방법으로 구현이 될수 있을지 포스팅 혹은 조언을 받을수 있을까요?
-----
제가 궁금한건... 포스팅처럼 일단 웹뷰까지는 띄웠습니다.
그상태에서 탑이나 하단에 바가 생기는게 아니구요.
그 웹뷰위에 버튼하나를 띄워서(웹뷰디자인상 빈공간에)
그 버튼을 누르면 앱의 빈페이지(네이티브용)를 하나 띄우고 싶습니다.
포스팅은 일단 웹뷰위에 고정으로 영역을 차지하고 있어서
제가 원하는것은 웹뷰위에 오른쪽 구석에 버튼하나를 웹뷰가 스크롤되어도 고정해 놓고 사용하고 싶은데 가능할까요?