오늘의 주제

1. 네비게이션 바 커스터마이징


마흔 다섯번째 시간입니다.^^

지난 번에는 메소드 재정의(오버라이드)를 활용하여 UIAlertView를 커스터마이징 해 보았습니다~
어떠셨어요?ㅎ 이쁜 이미지로 커스터마이징 하니까 좀 더 산뜻해 지셨나요?ㅎ

오늘은 네비게이션 바를 커스터마이징 해 보겠습니다~

잘 응용하면 원하는 이미지나 이쁜 글도 넣을 수 있구요 :)

자 그럼 출발해 볼까요?ㅎ


# Navigation Bar Customize

자, 일단 새로운 프로젝트를 만들어 줍니다.

Single View Application이구요~


YagomCustomNaviBar라는 이름으로 만들어 주었습니다 ㅎ


그리고 우리는 커스터마이징을 할 때 이번에는 카테고리 라는 녀석을 이용할거예요~
어쨌든 일단 New File... 


Cocoa Touch - Objective-C category 라는 녀석을 선택~!


YGCustomNaviBar라고 이름짓고 Category on UINavigationBar를 작성해 줍니다~


그러면 UINavigationBar+YGCustomNaviBar 라는 희안한 이름을 가진 놈들이 뿅하고 튀어나옵니다~

카테고리로 사용하려면 클래스이름+내가 지정한 이름. 이딴식이지요?

오이잉???????? 고놈 요상하네~~~~~~

자, 그럼 여기서 카테고리란???????????

다른 언어에서는 쉽게 찾아볼 수 없는 형태로 Objective-C의 독특한 클래스 확장법이라고 생각하시면 되겠습니다.

지난번에 해보았던 오버라이드(재정의)보다는 약간 작은 개념입니다.

클래스를 상속받아 메소드를 오버라이드 하는 경우 원래 있던 메소드를 수정, 보완해 주는 형태였고, 인스턴스 변수 등등을 추가해 줄 수 있습니다.

하지만, 이 카테고리라는 녀석은 원래 클래스에다가 내가 원하는 메소드를 원래 그 클래스에서 갖고있던 녀석인 것처럼 추가해 줄 수 있는 간단하지만 강력하고 유용한 녀석입니다. 물론 메소드 오버라이드도 가능합니다. 다만, 클래스 변수 등은 선언해 줄 수 없습니다.

카테고리만 잘 이용해도 쓰임새는 무궁무진하죠 ㅎㅎㅎ

오늘은 네비게이션 바 커스터마이징으로 한 번 예를 들어 진행해 보고자 이렇게 포스팅을 하는 것입니다.

설명이 부족하다 싶으면 책이나 구글링을 통하여 찾아보셔도 좋습니다.

자, 그럼 이제 카테고리는 만들었고... 일단 네비게이션바를 보려면 네비게이션 컨트롤러가 좀 도와줘야겠죠?ㅎㅎ

AppDelegate에서 최상위 뷰 컨트롤러를 네비게이션 컨트롤러로 만들어 봅시다.
 


자, 한 번 실행해 보니 제대로 잘 된 것 같네요 ㅎㅎㅎ


그럼 이제 뷰 컨트롤러에 Push기능을 해 줄 버튼 하나를 만듭니다.

아직도 이 그림이 이해안가시는 분은 없으리라 믿습니다~!

오른쪽 버튼 드래그 또는 ctrl+드래그 아시죠?ㅎㅎㅎ 


그럼 이렇게 이쁘게 연결이 되겠죠???



자, 깔쌈하게 연결 해 줬으니 이제는 구현파일로 넘어와서 해야 할 일들을 말해줘야겠죠 ㅎㅎㅎ


그리고 실행하면 이렇게 이쁘게 버튼이 박혀있구요~



버튼을 누르면 이렇게 다음 화면으로도 넘어오네용 ㅎㅎㅎ


자, 우리가 구현하고자 하는 내용이 무엇이냐???

네비게이션 바 생김새를 커스터마이징 하는 것이지요~

특히나 저는 배경과 제목을 커스터마이징 하고 싶어요.

UINavigationBar 클래스 문서를 봅니다.

제목을 커스터마이징 할 꺼리는 안보이고...

그나마 배경이미지 설정해 주는 메소드가 있는것 같군요~


따라가 봅니다.

앗!!! 그런데 이게 왠 난관입니까??

iOS 5.0 부터 지원하는 메소드라고 합니다...

iOS 5.0 미만 사용자들은 어떡하지... 흠...  


자, 어쨌든 저쨌든간 방법은 있겠죠?ㅎㅎㅎ

버전을 체크해서 가능한 녀석들로 처리를 해 봅시다.

버전 체크하는 방법에 대한 자세한 내용은

2012/08/17 - [iOS Dev/깨알 Tips] - iOS Version Check

를 참고하시면 됩니다~

iOS 5.0 미만 같은 경우는 drawRect메소드를 오버라이드 하여 배경이미지를 그려줄 수 있습니다. 

물론 iOS 5.0이상이라면 좀 더 편안하고 안정적으로 구현되어있는 메소드를 이용해 주면 되겠죠?ㅎ

이렇게 카테고리 메소드를 완성해 줍니다. 물론 배경에 사용될 이미지도 잘 첨부 해 줍니다.ㅎ 


제가 사용한 이미지 올려놓을게요~



그리고 전에도 그랬다시피, 나 이런 메소드 가지고 있어~

오퐈 이런 능력자야~ 라고 말해주려면 헤더에 잘난척 해줘야겠죠?ㅎㅎㅎ


그리고 이제 이 카테고리 메소드를 사용하고 싶으면 헤더를 import해 주시고, 그냥 원래 클래스에 있던 메소드마냥 사용해 주시면 됩니다. ㅎㅎ


자, 이제 실행해 보면??? 예상했던 결과처럼 나오나요?ㅎㅎ


화면을 넘기면 이렇게 나오구요 ㅎㅎ


그런데 화면을 옮겨가도 위의 제목은 항상 그대로지요? 그래서 우리가 만들어 놓은 메소드를 통해 제목도 좀 바꿔줍니다. ㅎㅎㅎ

화면이 보이려고 할 때(viewWillAppear) 에서 해당 메소드를 사용해 주면 될 것 같군요 ㅎㅎ 

그리고 push해 준 후에 제목을 바꿔줘도 적용이 될 것 같은데요?ㅎㅎ 


짜잔~ 일단 첫번 째 화면에는 잘 세팅이 되었네요~


그리고 화면을 넘겼다가~~~~~~~~


다시 돌아와도 우리가 원한대로 잘 되어있죠?ㅎㅎㅎ



자, 오늘은 네비게이션 바 커스터마이징이라는 명목으로 카테고리 라는 녀석을 함께 해보았습니다.

어떠셨어요?

유용할 것 같지 않나요?ㅎ

물론 어떤 클래스라도 카테고리를 만들어 줄 수 있습니다.

자신이 자주 사용하는 기능이 조금 복잡하거나 매 번 프로젝트를 만들 때마다 구현해주기 귀찮다면 카테고리를 이용하는 것이 효율적일 것입니다.

자, 오늘도 즐거운 공부가 되셨길 바라면서

저는 이만 물러갑니다~

또봐용 ㅎㅎ


by yagom

facebook : http://fb.yagom.net

twitter : http://twitter.yagom.net ( @yagomsoft )

p.s 제 포스팅을 RSS 피드로 받아보실 수 있습니다.

RSS Feed 받기   


↓↓↓저 열심히 썼는데 손가락 한방 꾹 눌러주고 가시는 건 어떨까요? 로그인이 필요 없습니다. ^~^ 고맙습니다~ ↓↓↓ 




Posted by yagom

댓글을 달아 주세요

  1. 인절미후후 2012.08.21 11:25  댓글주소  수정/삭제  댓글쓰기

    헤에~ 네비게이션바 하시는군요~
    제가 예전에 앱스토어에 올린 어플이 네비게이션 바를 커스텀 해보려고 무지 노력했었는데
    소스로 만들어지는거랑 닙에서 올린거랑 겹쳐져서 고생했었죠..(백버튼은 소스로 보내기전에 만들어야 하고 닙으로 만든거는 또 새로 생겨버리고..백버튼모양은 안만들어지고..)
    관련 내용이 등장하니 반갑네요.
    앞으로도 좋은 강좌 부탁드리겠습니다!

  2. 컴맹 2012.09.16 04:51  댓글주소  수정/삭제  댓글쓰기

    카테고리 정말 좋네요.ㅎㅎ
    좋은 강좌 잘보고 갑니다~ 감사합니다~^^

  3. 눈팅X 2012.12.03 18:16  댓글주소  수정/삭제  댓글쓰기

    야곰님 강좌 몰래 눈팅하고 있는 1인입니다.

    [naviCon.navigationBar customizeWithTitle:@"Customized"];

    추가하고 실행했을 때, 타이틀이 안보이는데.. 혹시 살펴 볼 부분이 있을까요??
    강좌 내용을 살펴봐도.. 잘 모르겠어서..

    잠수중인데, 살짝 올라왔습니다.

    ----------------------------------------------------------------------------------------------

    자세히 좀 볼 걸 그랬어요. 찬찬히 다시 보니.. 아래 코드가 누락.. ㅎㅎ
    [self addSubview:titleLabel];

    야곰님!!
    오늘도 많이 배워 갑니다~ 항상 감사드려요~


  4. paxdreamer 2012.12.26 13:51  댓글주소  수정/삭제  댓글쓰기

    야곰님 안녕하세요. 오랜만에 인사드립니다.ㅎ
    네비게이션 커스터마이징에대해 이것저것 알아보고 있는 중인데요. 네비게이션 바를 슬라이딩하게 하는건 어떤식으로 적용해야 하나요??
    예를 들어서 상하스크롤할때 보였다 안보였다 하는 방식을 적용하고 싶어서요.
    화면 넓게 쓰고 싶어서 그렇게 만들고 텍스트도 따로 입력하게 하고 싶은데 어떻게 해야할지 모르겠네요.ㅋㅋ
    계속해서 좋은 내용 연재해 주셔서 감사합니다.ㅎ

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.12.26 14:37 신고  댓글주소  수정/삭제

      안녕하세요:) 오랜만에 뵙습니다.

      UIScrollViewDelegate를 보시면 아마도 스크롤바를 올리고 내릴 때 작동하는 메소드가 있을거예요.

      거기에다가 네비게이션 바를 보였다 숨겼다 하는 메소드를 추가하면 될 거 같은데요 :)

      [naviCon setNavigationBarHidden:YES animated:YES];

      아마 이런 메소드 있을거예요~

  5. Favicon of http://silver-lining.tistory.com/ BlogIcon silver0r 2012.12.26 20:33  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 매번 눈팅으로만 열심히 배우다가 질문드립니다.

    실 프로젝트에서 커스텀네비게이션바를 사용하려하는데 첫화면 등 일부 화면에서 제외하고 나머지 화면에서는 커스텀 네비게이션 바를 보여주려하는데 이경우엔 어떻게 해야될까요??
    매번 책보다 훨씬 더 간단하고 쉽게 연재해주셔서 감사히 잘 보고있습니다

    • Favicon of https://blog.yagom.net BlogIcon yagom 2012.12.26 21:54 신고  댓글주소  수정/삭제

      음... 그 경우에는 좀 애매하네요...+_+

      하나의 네비게이션 컨트롤러는 하나의 네비게이션 바만 가질 수 있으니...

      흐음... 꼼수는 여러가지 있을 수 있으나... 그다지 추천해 드리고 싶지는 않아요 ㅠ

  6. Eastsky_Kagn 2013.01.24 16:40  댓글주소  수정/삭제  댓글쓰기

    정말 큰 힘이 되는 포스트 입니다. 감사합니다~ 늘 수고 많으세요.

  7. 21c 2013.02.03 00:03  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 yagom님ㅎㅎㅎ 프로그래밍 공부하는 고등학생이에요....
    저같이 컴퓨터학원다닐 여유없는 학생에게 큰 힘이 되십니다ㅠㅠㅠㅠ
    제일 은인같이 생각하고 있어요....너무 감사합니다ㅎㅎ!! 앞으로도 좋은 글 많이 올려주시구 항상 응원하겠습니다!

    • Favicon of https://blog.yagom.net BlogIcon yagom 2013.02.04 10:12 신고  댓글주소  수정/삭제

      하하... 저보다 훨씬 양질의 컨텐츠를 포스팅 하는 분들이 많습니다.

      더 좋은 자료 찾아보시길...^^

      그래도 이런 응원은 저에게 정말 큰 보람과 힘이 되네요 :) 정말 고맙습니다 ^^

  8. silver0r 2013.09.23 12:48  댓글주소  수정/삭제  댓글쓰기

    야곰님 예쩐에 이거 보고 잘 따라했는데
    ios7나오고나서 이 커스텀네비에 left right 버튼 올렷을 때 버튼이 보이질 않습니다
    (동작은 해요)
    이유가 뭘까요....

    • Favicon of https://blog.yagom.net BlogIcon yagom 2013.09.23 13:45 신고  댓글주소  수정/삭제

      iOS 7에서 tintColor 부분에 변경이 있었고, 버튼이 테두리가 사라졌습니다.
      혹여 버튼에 제목을 정해주지 않으셨다면 한 번 넣어보시고,

      http://goo.gl/czcsej

      참고하여 보시기 바랍니다

  9. silver0r 2013.09.24 10:04  댓글주소  수정/삭제  댓글쓰기

    감사합니다
    저도 어제 찾아보니까 tintColor 를 안해주면 안보이는걸 확인했네요 ㅎㅎ;
    버튼의 테두리는 bg이미지로 넣어서 해야겠네요 감사합니다 ^^