[Customize] 3. Tabbar

이번에는 Tabbar를 커스텀해보도록 하겠습니다.

Tabbar 의 경우에는 디자이너와 상의를 잘 했을 경우(즉 이미지 규격에 맞는 경우!!) 
아주 쉽게 커스텀이 가능하지만,
항상 예외는 있고, 이미지는 너무 다양하기 마련입니다.

- 결국은 코드로 고쳐할 부분이 분명 존재합니다.

먼저 Tabbed Application 으로 프로젝트 생성

: CustomTabbar 라는 이름으로 만들었습니다.

- 처음 실행 시킨 화면입니다. -

이미지를 살펴보시면 first.png 와 first@2x.png 파일이 있는데 그냥 first라고 이름만 쓰시면 
에뮬레이터가 알아서 사이즈에 맞게 변환해줍니다.

예제소스를 살펴보시면 이미지 이름만 바꾸어주면 되는거 아니야? 라고 생각하실 수 있는데
맞습니다. 바로 이경우가 이미지의 규격(사이즈)를 잘 맞춘 경우입니다.

그렇다면 다른 케이스(이미지 크기가 다 다른 경우) 보시다시피 사이즈가 다른 두 개의 앵그리버드 이미지를 탭바에 넣어보시면  (스토리보드에서 그냥 집어넣어버렸습니다.)

 

 < ---- 이미지를 보시면
첫번째는 아예 나오지를 않았고

두번째도 정확한 모양이 아닙니다.

- 이미지 규격에 맞지 않은 경우 스토리보드 상에서 Image Inset을 통해 값을 변경해도 이미지의 전체모습을 나타낼 수가 없습니다.

Tab Bar Controller 의 첫번째 뷰의 .m파일에서 viewDidLoad함수에 소스를 추가합니다.

// 각 이미지 설정

UIImage *selectedImage0 = [UIImage imageNamed:@"anger.png"];

UIImage *selectedImage1 = [UIImage imageNamed:@"anger2.png"];

    

// tabBar에 현재 연결되어 있는 tabBar 연결

UITabBar *tabBar = self.tabBarController.tabBar;

// tabBar 아이템으로 각 각 연결 ( 아이템이 없는데 추가된다면 에러 )

UITabBarItem *item0 = [tabBar.items objectAtIndex:0];

UITabBarItem *item1 = [tabBar.items objectAtIndex:1];

// 각 아이템에 이미지 연결

[item0 setFinishedSelectedImage:selectedImage0 withFinishedUnselectedImage:selectedImage0];

[item1 setFinishedSelectedImage:selectedImage1 withFinishedUnselectedImage:selectedImage1];

 <----- 결과 화면

이미지가 제대로 나왔지만 크기를
벗어나 버렸습니다....
자 다시 ImageInsets를 고쳐봅시다!!!

[item0 setImageInsets:(UIEdgeInsetsMake(40, 40, 40, 40))];

[item1 setImageInsets:(UIEdgeInsetsMake(15, 15, 15, 15))];

아이템에 이미지 연결하기 전에 위 두줄의 코드만 추가해보시면!!

짜잔! 원하는 모양이 비슷하게 나왔습니다.

여기에 배경을 넣고 싶다면, tabBar의 배경만 설정해주시면 됩니다.
이렇게.. [tabBar setBackgroundImage:[UIImage imageNamed:@"NaviBG.png"]];

 

이런 배경도 크기가 넘어버려서
뭔가 꺼림직합니다...

tabBar의 Bounds를 조절해봅시다.

[tabBar setBounds:CGRectMake(0, 0, 320, 60)];

-- 원래 Tabbar의 사이즈는 320,49 입니다. --

탭바의 Bounds를 조절해서 크기를 맞추어봤지만 

탭바의 크기가 위 아래로 넓혀지면서 글씨가 약간 짤렸네요

음...

음...

음...

안되겠네요 사람불러야겠습니다. 

결론 : 이미지 규격은 중요합니다.