[X-Code]4.2 스토리보드(StoryBorad) 탭바

1. Xcode를 실항하여 Single View Application을 선택하여 프로젝트를 생성한다.

2. 생성된 프로젝트의 MainStoryboard화면으로 이동하여 자동으로 생성된 View Controller을 선택하고 상단 메뉴에서 Editor > Embed In > Tab Bar Controller을 클릭한다.

3. 아래와 같은 그림의 모양처럼 바뀌면서 View Controller의 좌측에 Tab Bar Controller가 생성되었으며 실행시 프로젝트가 실행될때 가장 먼저 보여준다는 의미의 화살표가 Tab Bar Controller의 좌측으로 옮겨져 표시하고 있다.

4. 우측 오브젝트 윈도우에서 View Controller을 선택하여 스토리 보드의 빈공간으로 드래그를 하면 아래와 같이 뷰컨트롤러가 추가될 것이다

5. 아래의 그림과 같이 생성된 View Controller에 Tab Bar Item을 드래그 하여 추가하여 준다.

6. 생성된 Tab Bar Controller를 선택하고 키보드의 Control을 클릭한 상태에서 연결되지 않은 빈 View Controller로 드래그를 한다.

7. 아래와 같은 팝업이 생겼을 것이다. 첫번째에 있는 항목인 "Relationship - viewControllers"를 선택한다.

8. 아래와 그림처럼 탭바가 연결되었음을 확인할 수 있을 것이다.

9. 위와 같은 방법으로 한개의 View Controller을 더 생성하고 Tab Bar Controller에 연결하였다.

10. UILabel 컨트롤을 이용하여 아래의 그림처럼 각각의 View Contoller내의 View안에 추가하여 각 화면을 구분할 수 있는 텍스트를 입력하여 본다.(각 Tab Bar Item의 속성창에 Identifier를 변경하면 미리 등록되어있는 몇가지 형태의 모습으로 아이템의 형태을 바꿀수 있으며 Title과 Image를 이용하면 원하는 글자와 그림으로도 변경이 가능하다)

11. Command + B, Command + R을 순차적으로 클릭하여 빌드후 실행하여 본다. 아래와 같이 하단의 탭바를 클릭할 때마다 각각의 4개의 화면으로 전환이 되는지 확인하여 본다.

탭버튼에 미리 등록된 이미지 선택하고, 이름 변경하는 부분을 좀 더 자세히 알려 주실 수 있을까요?
-->

각각의 View Controller마다 하단에 한개의 Tab Bar Item이 있습니다. 그 Tab Bar Item을 클릭하여 선택한후 키보드로 Option + Command + 4를 눌러서 우측에 Attributes Inspector에서 속성을 설정해줍니다.
Identifier에서 선택되어진 항목을 바꾸면 Tab Bar Item의 그림이 변경될 것이고 원하는 이미지를 삽입하고자 한다면 Custom을 선택하면 됩니다. 아래에 있는 Title에 문자열을 입력하시면 Tab Bar Item 항목의 이름을 변경할 수도 있습니다.

Title에서 문자 입력해 변경하는 것은 하였습니다.
위의 이미지에서 처럼 탭의 featured, search등과 같이 아이폰에 사용되는 기본이미지를 설정하는 방법은 아직 잘 이해가 안갑니다.
그냥 그런 이미지를 구해서 Bar Item의 image에 설정하면 되는 것인가요?
-->
약 33px정도쯤 되는 PNG화일을 준비하시고 키보드로 Option + Command + A버튼을 눌러서
PNG화일을 추가합니다. 그리고 원하시는 Tab Item을 선택하신후 Option + Command + 4를
누르고 Identifier에서 Custom을 선택하고 Image를 드롭하시면 등록하신 PNG화일의
이름이 보여질 것입니다. 그 PNG화일을 선택하시면 정상적으로 보여질 것입니다.




이미지 사이즈를 24 x 22로하고 이미지 색은 검정, 배경은 투명으로 하니까 제대로 나오네요. 감사합니다





출처 : http://diveis.tistory.com/22
출처 : http://diveis.tistory.com/22
출처 : http://diveis.tistory.com/22
출처 : http://diveis.tistory.com/22
출처 : http://diveis.tistory.com/22