이전 장에 이어서 이제 인터페이스빌더에서 작업을 하고 어플리케이션을 완성해 보겠습니다. 속성 변경 및 연결에 관한 자세한 설명을 생략하였습니다. 혹시 이부분에 이해가 가지 않으시면 이전 포스팅을 참고하시기 바랍니다.

3. MainView.xib
1) 이미지 추가
어플리케이션에서 사용하는 배경과 각종 이미지들을 프로젝트에 추가합니다. 사용된 이미지는 아래의 압축파일을 다운로드하여 사용하시거나 직접 그려서 사용하셔도 됩니다.


Xcode의 Groups & Files내의 Resources 디렉토리를 우클릭 한후에 Add/Existing Files...를 클릭합니다.  파일 선택창에서 배경과 아이콘들을 선택한 다음 Add 버튼을 클릭합니다. 그리고 MainView.xib 항목을 더블클릭 하여 인터페이스빌더를 엽니다. 라이브러리의 Media 탭을 클릭하면 등록된 이미지를 확인할 수 있습니다.


2) 레이아웃
라이브러리 윈도우에서 각각의 오브젝트들을 드래그해서 아래와 같이 Main View에 배치합니다. 이미지도 위의 라이브러리 윈도우에서 드래그해서 가져옵니다. 주의하실 점은 눈에 보이지 않더라도 하단 툴바의 중앙에 Bar Button Item이 있습니다.
 


3) 속성 변경 및 연결
이제 각 항목의 속성을 변경하고 아울렛을 연결하는 작업을 해보겠습니다. 각 오브젝트와의 연결은 MainView.xib의 File's Owner (MainViewController)를 우클릭하여 설정합니다. 

* MainView
배경색을 원하시는 색상으로 변경합니다.


File's Owner의 mainView 아울렛에 연결합니다.


* Navigation Bar
상단바의 타이틀을 더블클릭하여 좌측과 같이 변경합니다.


* View
월별로 바이오리듬 그래프를 보여주는 View 입니다.
배경색을 검정으로 변경합니다. 실행시에는 배경이미지로 대체되기 때문에 큰 의미는 없습니다(생략가능).

Class 항목을 이전 장에서 만들어 두었던 GraphView를 선택합니다.

File's Owner의 graphView 아울렛에 연결합니다.


* TextField
일별로 바이오리듬 보여주는 필드입니다. 3개 모두 아래와 같이 설정합니다.
정렬을 중앙으로 설정합니다.

사용자의 입력에 반응하지 않도록 선택을 해제합니다.

위에서 부터 차례로 File's Owner의 value_1, value_2, value_3 아울렛과 연결합니다.


* Bar Button Item
버튼들을 더블클릭하여 좌측과 같이 입력상태가 되면 각각 "<<", "<", ">", ">>"을 입력합니다.

각 버튼을 구별할 수 있도록 속성창 하단에 위치한 Tag를 설정합니다. "<<"는 1, "<"는 2, ">"는 3, ">>"는 4를 각각 입력합니다.

네 버튼 모두 File's Owner의 NavigationButtonClicked: 액션에 연결합니다.


* 날짜 표시 Bar Button Item
현재 선택된 날짜를 표시하는 툴바의 중앙에 위치한 버튼 아이템입니다. Plain 스타일에 타이틀이 없기 때문에 위의 이미지에서 툴바와 구별되지 않았습니다.
 
스타일을 Plain으로 설정합니다. 버튼 스타일로 출력되지 않습니다.

사용자의 입력을 받지 않기 위해 선택을 해제합니다.

File's Owner의 currentDate 아울렛에 연결합니다.


File's Owner의 연결상태는 아래와 같습니다.



4. FlipsideView.xib
1) 레이아웃
라이브러리 윈도우에서 Label과 Date Picker를 드래그해서 아래와 같이 Flipside View에 배치합니다.


2) 속성 변경 및 연결
* Label
텍스트를 "생일을 선택해 주세요." 로 변경합니다.

텍스트 색상을 흰색으로 변경합니다.



* Date Picker
Date Picker의 Mode를 Date로 설정합니다.


유효날짜를 설정합니다.


File's Owner의 datePicker 아울렛에 연결합니다.


Files's Owner의 연결상태는 아래와 같습니다.


5. MainWindow.xib
MainWindow.xib에서 Root View Controller를 더블클릭합니다. 해당 창의 우측 하단을 보시면 좌측과 같은 버튼이 있습니다. 기본 위치가 툴바의 위치와 맞지 않기 때문에 위치를 우측과 아래로 더 이동합니다. 


6. 테스트
이제 모든 작업을 완료하였습니다. 모두 저장하고 빌드한 후에 테스트를 해봅니다. 아래와 같이 정상적으로 바이오리듬이 출력되고 버튼이 동작하는지 확인합니다.



이상으로 간단한 바이오리듬 어플리케이션을 만들어 보았습니다. 혹시 이상한 점이 있으시면 아래의 소스파일을 다운로드 받아서 비교해 보시기 바랍니다.

모든 댓글을 환영합니다. (욕설과 광고는 삭제합니다.)
  1. 함지 2008.09.11 13:56  댓글주소  수정/삭제  댓글쓰기

    벌레보고 :
    1. 처음 실행될 때는 제대로 된 값이 뜹니다만, 재실행 시부터 i창도 그렇고 결과창에도 알 수 없는 값들이 들어오는거 같습니다.
    2. 버튼의 좌이동값과 우이동값이 제대로 먹히지 않는거 같구요.

    3. 색감과 아이콘을 좀더 화장을 시키고 헬프파일에 좀 멋진 말 넣은 다음, 한 5불 받고 앱스토어에 올려서 뿌려버리세요 !!

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2008.09.11 14:49 신고  댓글주소  수정/삭제

      확인해 보니 GraphView.m 파일의 159번째 줄에 주석을 막아 놓은 '/'가 지워져 있었습니다. ^^;; 이전 포스팅에서도 수정하고 소스도 새로 올렸습니다. DatePicker 문제는 본문에서 언급을 했는데, 아직 해결책을 못 찾았습니다.

      알려 주셔서 감사합니다. :)

    • 버들피리 2009.03.30 03:42  댓글주소  수정/삭제

      break point를 잡아보니 DatePicker 로 데이타를 넘기기전에 값이 벌써 이상한데요.. 생일 초기값 설정을 어디서 하는지요..

  2. 함지 2008.09.11 22:47  댓글주소  수정/삭제  댓글쓰기

    와, 볼수록 환상이네요 ! 5불은 이것저것 빼고, 뜯기는거 빼면 남는게 없겠고, 10불이면 시장 있겠슴다. 아, 근데, 말씀드리기 좀 그런데,,, 칼라는 도스시절 칼라 버리시고, 애플감각의 칼라(즉, 헨슨이 텍스트메이트서 주로 쓰는 칼라 되겠지요)로 발라주시면 훨~씬 잘 먹힐거 같어요... 한국에서야 태극기 색깔, 하늘색, 분홍색이 KBS가 조사한 대한민국 국민색지만서두, 애플의 뽀대하고는 참, 물과 기름 내지는 양복에 갓쓴 듯한 감을 솔직히 지우기가 어렵거든요. 저만 그런가...

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2008.09.12 13:59 신고  댓글주소  수정/삭제

      디자인은 제가 봐도 좀 그렇지만 튜토리얼 용도로 만든 것이니 그다지 신경쓰지 않았습니다. 애플 App 스토어에는 1센트에 올려도 안팔릴 것 같은데요. 하기 별에 별 사람들이 다 있으니 한두개는 팔릴지 모르겠습니다. ^^;;

      아무튼 좋게 봐주시니 감사합니다. :)

  3. 버들피리 2009.03.29 16:59  댓글주소  수정/삭제  댓글쓰기

    MainWindow.xib 에서 아이콘이 어디있나 했더니.. 배경색을 검은색으로 바꾸니 보이네요. ^^
    너무나 자세한 설명 고맙습니다. 포스팅하느라 힘드셨겠어요..

  4. Favicon of http://tohappy.tistory.com BlogIcon tohappy 2009.06.14 22:26  댓글주소  수정/삭제  댓글쓰기

    한 참 고생하다가 여기 오면 Hint 를 얻고 갑니다.
    그리고 정리의 달인 이십니다. 항상 좋은 글 잘 보고 있습니다.

    • Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2009.06.15 16:18 신고  댓글주소  수정/삭제

      카테고리랑 글들이 잘 정리가 안되어 있는 것 같아 늘 한번 정리를 해야지 하고 마음은 먹고 있습니다. 그리고 실생활에서는 정리를 전혀 못합니다. ^^; 좋은 말씀 감사합니다. :)

  5. 씨커 2009.06.24 15:56  댓글주소  수정/삭제  댓글쓰기

    좋은 자료 공개해 주셔서 감사합니다. ^^
    근데... 생일 변경하는 버튼이 잘 안눌리는데, 수정이 필요하겠네요.

  6. 씨커 2009.06.25 12:52  댓글주소  수정/삭제  댓글쓰기

    RootViewController.m 파일에 버그(? 라고 하기도 뭐한... ^^)가 있어서 DataPicker 초기값 설정이 제대로 안되네요.

    수정전 :
    int year = [[NSUserDefaults standardUserDefaults] integerForKey:@"birth_year"];
    int month = [[NSUserDefaults standardUserDefaults] integerForKey:@"birth_year"];
    int day = [[NSUserDefaults standardUserDefaults] integerForKey:@"birth_year"];

    수정후 :
    int year = [[NSUserDefaults standardUserDefaults] integerForKey:@"birth_year"];
    int month = [[NSUserDefaults standardUserDefaults] integerForKey:@"birth_month"];
    int day = [[NSUserDefaults standardUserDefaults] integerForKey:@"birth_day"];

  7. Favicon of https://www.cocoadev.co.kr BlogIcon cocoadev 2009.06.25 13:51 신고  댓글주소  수정/삭제  댓글쓰기

    아.. 오류가 있나 보네요. 알려 주셔서 감사합니다. :) 코딩을 주로 Copy&Paste에 의지하다보니... ^^;

  8. 아키찰스 2010.10.11 16:48  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~^^
    맥부기를 통해서 블로그를 알게되었습니다.
    덕분에 많은 가르침과 큰 도움 받아서 정말 감사합니다 ^^

    그리고 질문이 있습니다 ^^;

    1) GraphView.m 에서 addTimeInterval 부분에서 "addTimeInterval" is deprecated 라는 경고가 뜨던데 dateByAddingTimeInterval 로 바꾸니 에러는 멈췄습니다. 이렇게 해도 상관이 없을까요? ㅎ

    2) 생일을 변경해도 바이오 리듬값이 똑같아서요.
    GraphView.m 에서
    -(void)setBirthDate: (int)year atMonth: (int)month atDay: (int)day 에
    [brthDate setYear:year];
    [brthDate setMonth:month];
    [brthDate setDay:day];
    이 부분에 [birthDate year], [birthDate month], [birthDate day]를 출력해 보니 계속 0 이나 와서요~

    혹시 시간나시면 조언 좀 부탁드리겠습니다.

    그리고 다시 한번 멋진 자료들을 포스팅해서 공유해 주신점 진심으로 감사드립니다.