[iOS] xib 하단바, 하단버튼 붙이는 방법

xib 에 웹뷰(WebView) 가 주어져 있을 때, 해당 웹뷰 하단에 버튼을 붙이는 방법.

정확히 표현하면 xib 파일에 하단바를 붙이고 그 안에 버튼을 추가하는 방법.

1. xib 에 웹뷰(WebView) 를 추가한 상태에서 시작한다.

2. Xcode 상단메뉴의 [View] – [Show Library] 메뉴를 클릭한다.

3. [Toolbar] 를 선택한다.

4. xib 좌측 목록에 Toolbar 가 추가되었으나 보이지는 않는다. 뒤에 가려져 있어서 그렇다.

5. 좌측 목록의 Toolbar 를 WebView 아래로 붙이면 우측 화면에 표시된다.

우측 화면에서 마우스 드래그앤드랍으로 Toolbar 를 하단에 딱 맞게 이동시키고, 가로 길이를 딱 맞도록 조절한다.

Item 이라는 글자가 보일텐데, 이것은 미리 추가되어 있는 Bar Button Item 이다.

여기까지 됐으면 앱을 한 번 디버그 모드로 실행해본다.

아이폰을 가로/세로 전환해도 화면 하단에 버튼 바가 붙어있어야 한다.

6. 다시 Xcode 상단메뉴의 [View] – [Show Library] 메뉴를 클릭해서, (1) Bar Button Item 과 (2) Flexible Space Bar Button Item 을 번갈아 추가한다.

버튼을 4개로 만들어보자.

현재 Bar Button Item 이 1개 미리 들어있으므로, (2) – (1) – (2) – (1) – (2) – (1) 순으로 추가하면 될 것이다.

추가순서가 헷갈린다면 일단 추가해놓고 왼쪽 목록에서 드래그앤드랍을 통해 추후 순서를 조정할 수 있다.

7. xib 좌측 목록이 아래와 같이 나오면 된다.

8. 첫번째 Item (=첫번째 Bar Button Item) 을 선택하고 텍스트를 이미지로 변경해보자.

우측 속성탭(Attributes inspector 라고 부름)의 Title 값을 지우자. (Item => 빈값)

이어서 Image 를 선택해야 하는데, 확장자가 표시되어 있는 이미지 (ex : button_back.png) 를 선택하면 잘 추가된 것처럼 보여도 나중에 앱을 실행하면 이미지가 표시되지 않는다.

Image Set 에 해당하는 항목들을 선택해야 한다. Image Set 이란 xcassets 파일에서 확인할 수 있다.

9. 기존에 원하는 이미지가 없다면 이미지를 추가해보자.

xcassets 파일 (ex : Resources 폴더의 Images.xcassets 파일) 을 더블클릭해서 열자.

10. 좌측 목록 위에서 마우스 우클릭해서 [Image Set] 버튼을 클릭하면 새로 Image Set 을 만들 수 있다.

이후 좌측목록으로부터 이미지를 화면 빈칸(이미지 슬롯)에 드래그앤드랍하면 된다.

참고로 이미지 크기는 가로 60px 세로 60px 크기로 만들었다.

11. 앱 실행 시 이미지가 앱에서 표시되지 않고 단색(ex : 파란색)으로 표시되는 경우가 있다.

해당 Image Set 을 선택하고 우측 속성탭(Attributes inspector)의 Render As 값을 [Original Image] 로 변경하고 앱을 다시 실행하면 된다.

12. xib 파일의 Bar Button Item 에 이미지를 적용한 (Image Set 을 적용한) 모습이다.

마우스 우클릭하면 Sent Actions – selector 라는 메뉴가 보인다.

13. Bar Button Item 를 선택하고 마우스 우클릭해서 Sent Actions – selector 의 우측 끝의 점을 클릭한다.

해당 점을 클릭한채로 화면 중앙의 웹뷰(WebView) 로 마우스 드래그를 하면 아래 그림처럼 파란색 선이 표시된다.

14. Bar Button Item 의 selector 와 웹뷰(WebView) 가 파란색 선으로 이어진 상태에서 마우스를 떼면, [goBack], [goForward], [reload], [stopLoading] 이 표시된다. [goBack] 을 선택하자.

이제 해당 버튼을 클릭하면 웹뷰(WebView)의 뒤로가기(goBack) 기능이 실행되도록 연결되었다.

웹뷰의 뒤로가기, 앞으로가기, 새로고침, 중지 등의 명령을 이와 같이 버튼에 매핑시킬 수 있다.

15. 자연스러운 이미지 처리를 위해 버튼바를 검은색으로 바꿔보도록 한다.

화면의 Toolbar 객체를 선택하고 우측 속성탭(Attributes inspector)의 style 을 [Black] 으로 선택, Translucent 체크박스를 체크 해제한다.

Translucent 체크박스가 체크되어 있으면 반투명이 된다.

16. 버튼 클릭시 이벤트를 웹뷰(WebView)의 메서드가 아니라 직접 만든 메서드에 매핑하고 싶은 경우.

우측 화면 추가(Add Editor on Right) 버튼을 클릭해서 창을 2개로 나눈다.

이후 좌측 창에는 xib 파일을, 우측 창에는 헤더 파일(확장자 h)을 연다. (ex : 좌측은 MainView.xib 를 열고, 우측은 MainView.h 파일을 열기)

이후 xib 화면에서 버튼을 선택하고 마우스 우클릭해서 selector 끝의 점을 클릭한 채로, 우측 창 헤더 파일(확장자 h)의 메서드에 마우스 드래그한다.

파란색 선이 표시된 후 마우스를 떼면 버튼에 원하는 메서드가 매핑된다.