블로그 이미지
'무른모'란 부드럽다라는 뜻을 가진 '무르다'라는 말과 도구, 연장을 뜻하는 '연모'라는 순 우리말의 합성어로 소프트웨어를 말합니다. seanhigher

카테고리

분류 전체보기 (161)
Blog srart (16)
Dev Center (94)
Real Life (13)
Mac life (21)
Naver life (17)
Total662,898
Today20
Yesterday18

'탭바 추가'에 해당되는 글 1건

  1. 2010.06.22 입맛대로 골라쓰는 유틸. 탭바!
유틸리티어플리케이션의 경우는 두개의 화면만으로는 부족한 경우가 많다. 다양한 화면의 선택의 폭을 넓혀주는 것이 있는데, 그것이 탭바 어플리케이션이다.


TabBar 어플리케이션.
Xcode를 실행하고 새로운 프로젝트를 생성한다. 프로젝트 템플릿은 탭바 어플리케이션으로 선택하도록 한다.


그림1. 새 프로젝트

Xcode가 실행되고 'Resource' 폴더를 보면 'MainWindow.xib' 와 'SecondView.xib' 의 두개의 파일이 있는 것을 볼 수가 있다. 첫번째것은 탭바와 첫번째 화면을 나타낸다. 두번째는 두번째 탭을 선택했을때 나타나는 화면을 나타낸다. Xcode에서 이것을 그대로 실행하면 다음과 같이 실행되는 것을 볼 수 있다.


그림2. 탭바 어플리케이션 실행.

첫번째 탭과 두번째 탭을 번갈아가면서 눌러보면 화면이 바뀌는 것을 볼 수 있을 것이다. 각가의 화면들을 변경하기 위해서 Xcoed 로 돌아와서 'MainWindow.xib' 파일을 더블클릭하여 인터페이스 빌더를 실행시킨다. 첫번째 탭의 선택화면을 변경하고 싶다면 첫번째 'MainWindow.xib' 파일을 변경하면 되고, 두번째 탭의 화면을 변경하고 싶다면, 'SecondView.xib' 파일을 수정하면 된다.


더 많은 탭바 추가하기.
단 두개의 화며으로 이루어진 탭바는 그렇게 유용하게 쓰일 수 없다. 단 두개의 화면이라면 유틸리티 윈도우가 훨씬 멋있게 나타나고 공간도 더 넓게 사용할 수 있는 이점이 있기 때문이다. 하지만 탭바를 사용하는 이유는 바로 그것 때문이다. 더 많은 메뉴를 추가하는 것이 가능하다는 것이다! 메뉴에서 'File' -> 'New File'을 차례로 선택하여 새로운 파일을 생성하도록 한다. 파일형식은 'Cocoa Touch Class' 에서 'UIView Controller subclass'을 선택한다. 여기서 기억해야 할것은 아래의 체크박스중에서 'With XIB for user interface' 에 체클를 하고 파일을 생성해야 한다는 것이다.


그림3. 새로운 파일 생성


파일의 이름을 정하고 'finish' 버튼을 누르면 똑같은 파일명으로 '.h' '.m' '.xib' 세개의 파일이 생성되는것을 볼 수 있다. 각각의 파일이 생성된것을 확인한 후 'MainWindow.xib'파일을 인터페이스 빌더로 실행한다. 그리고 main 윈도우에서 'TabBarController'를 선택하고 Attribute 창을 실행시키도록 한다.


그림4. 탭바 Attribute 항목

애트리뷰트 항목의 맨 윗 부분을 보면 두개의 탭 항목이 있는 것을 볼 수 있다. '+' 버튼을 눌러서 항목을 추가할 수 있다. 여러개의 항목이 필요하다면 더 많이 추가하는 것이 가능하다. 많은 항목을 추가하면 그 갯수만큼 새 클래스 파일을 생성해주어야 한다. 탭바의 항목을 추가하면 main 윈도우에 컨트롤러 항목이 두개에서 더 늘어난 것을 볼 수 있다.


그림5. 탭바 항목 추가

main 윈도우에 새로 추가된 항목을 선택하고 애트리뷰트창을 띄운다. 항목을 보면 NIB name 이라는 것이 있는데 이것을 아까 새로 만들었던 파일의 이름을 선택하도록 한다. 그리고 아이덴티티창으로 이동한 후 class 를 동일한 이름으로 바꾸어준다. View 화면에서 세번째 탭을 선택했을때 다음과 같은 화면이 나온다면 제대로 설정이 된 것이다.


그림6. 세번째 탭바 항목 추가.

위의 그림에서 파란색 'thirdView'의 이름의 세번째라서 그렇게 나오는것이 아니라 파일명을 그렇게 생성했기 때문에 그렇게 나오는 것이다. 다른이름으로 클래스를 생성했다면 다른 이름으로 되어 있을 것이다. 세번째의 화면을 수정하고 싶다면 파란색 링크를 클릭하여 나오는 '뷰'를 수정하면 된다. 만일 나오지 않는다면 이름을 잘못 입력했을 가능성이 크므로 다시 처음부터 천천히 해보길 바란다.


그림7 실행 화면

이제 실행을 하면 세개의 탭으로 된 탭바 애플리케이션을 볼 수 있을 것이다. 이제 좀더 많은 메뉴를 가진 에플리케이션을 만들 준비가 되었다.

Posted by seanhigher

댓글을 달아 주세요

최근에 달린 댓글

글 보관함