[Customize] 2. Navigation Item

Navigation Bar에 이어서 Navigation Item 을 커스텀 해보도록 하겠습니다.

더 쉽습니다.

Navigation Item 역시 3개의 스타일과 기본적으로 제공하는 버튼 모양이 있고,
색깔도 지정가능합니다.

Style : 1. Plain    2. Bordered    3. Done
그리고 기본적으로 제공하는 버튼아이콘 ( 직접 살펴보세요 )이 있습니다.

기본적으로 네비게이션 바에는 Bar Button Item 을 집어넣습니다.

- 기본 모양 -

- 이미지를 올려놓았을 때 모양 -

이미지는 들어갔지만 원하는 모양은 아닙니다.
1. Bar Button Item 에 Round Rect Button을 올립니다.
2, Bar Button Item 를 삭제 후 Round Rect Button를 넣습니다
둘 다 같습니다.

     보시다시피 Bar Button Item 안에 Button이
     들어가게 됩니다.

     즉. 저희가 평소에 버튼에 이미지를 입히는
     방식으로 가능하다는 예기입니다.

- Item이 아닌 Button을 입힌 모양 -

- Button에 이미지 넣은 모양 -

그리고 이미지 사이즈를 조절하고 싶다면 Item이 아닌 그 안에 있는 Button의 View에 있는 
Origin을 수정하시면 됩니다.

- 사이즈 조절 후 모양 -

네비게이션 바와는 다르게 소스를 고칠 필요가 없었습니다.
Item안에  Button을 넣어서 Button 로 처리하는 방식을 그대로 사용하면 되기 때문입니다.

끝... 이 아닙니다!

고려할 사항이 있습니다. 네비게이션 컨트롤러 사용 시 Push할 때 생기는 버튼이 있습니다.

[ 이미지를 입힌 버튼을 다른 뷰 컨트롤러에 Push로 Modal을 설정해줍니다. ]

그러면 보시다시피 Push되면서 자동(아무 설정은 안해주었을 때)으로 Navigation Item의 Title을 적힌 뒤로가기 버튼을 만들어 줍니다. 

- Back Button 에 원하는 문구를 설정 가능합니다. -
( Prompt 는 제목같은 효과입니다. 직접 해보시는게 이해하기 빠릅니다 )

그렇다면 이미지는??
해당 뷰컨트롤러(Push로 들어간 페이지)에서 처리할려고 해도 미리 만들어버리기 때문이 올바른 접근 방법이 아닙니다.

Push로 들어갈 때! 버튼을 셋팅해주어야 합니다. 이때 필요한 함수가 prepareForSegue 라는 함수입니다.

prepareForSegue함수는 Segue(=modal)될 때, Segue를 위해 준비하는 함수로 Push나 Modal로 다른 페이지로 넘어가기전에 호출되는 함수입니다.

이 전에 Push의 Identifier를 설정해 주어야 합니다.
( ex: showDetail 이라고 저는 주었습니다.

.... 이럴수가 위에 방법과 똑같이 Item에 Button을 넣어서 입히면 될 줄 알았지만 착각이였습니다.

첫번째 시도, Item 에 Button을 넣는방법  ----- Fail (아무런 변화 없음)

두번째 시도, Item의 image를 넣는 방법  ----- Fail (모양이...)

세번째 시도, Item의 배경에 집어넣는 방법 ----- Fail (모양+문자 그대로)

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender

{

    if ([[segue identifier] isEqualToString:@"showDetail"]) {

       

UIBarButtonItem *backBarButton = [[UIBarButtonItem alloc]init];    

        

        

[backBarButton setBackButtonBackgroundImage:[UIImage imageNamed:@"BG1.png"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

[self.navigationItem.backBarButtonItem setImage:[UIImage imageNamed:@"anger2.png"]];

       

    }

}

그렇다면!! 2번째와 3번째 방법을 합쳐서! 배경을 네비게이션바 배경으로 준 다음 했다

..... 이게 아닌데 우리가 원하는 모양은 아니지만 임시방편으로 구현,

괜히 카톡도 색깔만 바꾼게 아니었어..
혹시나 네비게이션바 아이템을 커스텀한 어플이 있다면 신고바랍니다.