How to Customize UITabBar on iOS 5
Building the new version of the app Blocos de Rua I was challenged to customize the UITabBar so it meets what the designer wants. In iOS 5 this is pretty easy to do but I haven’t figured out the proper way to do it from the beginning, this post is my findings on how to do it properly by correctly using the new iOS 5 APIs to customize appearance.
The final look:
Keep reading to see the code.
The appearance APIs in iOS 5 are great. They reduce lots of custom drawRect: that used to be necessary to customize the default UIKit components. The first time I tried to customized the tab bar I had some problems with images been offset upwards because I was using the wrong methods.First thing I learned, the setFinishedSelectedImage:finishedUnselectedImage: from UITabBarItem is the tab’s icon not a image for the whole tab with background, icon and label.
Customize the UITabBar is a peace of cake when you understand how the APIs should be used, take a look:

From inside out, the UITabBar
First - usually in your app delegate - set the image for the entire tab bar’s background, which represents the “normal” state of all tabs. The dimension is 320 x 49 points.

Then configure the selected state of a tab. This is necessary because in this app I don’t want the default white highlight that represents the selected tab. Pay attention to the image’s width, it must be the same of a single tab. In my case 320/4, 80 points wide.

Last but not least, the UITabBarItem
Unlike the default behavior the image shouldn’t change when the tab is selected, this is why I set the same image in both states. For each UIViewController that will be part of the tab bar you need to configure the tab image like this:
The last detail is the title’s color on the unselected tab, they can’t be the default gray color. To change the color we need a dictionary of attributes whit the UITextAttributeTextColor key:
That’s all folks.
'iOS' 카테고리의 다른 글
| [iOS] RGB Color UIColor Category Extension (1) | 2012.09.04 |
|---|---|
| [UIColor] RGB 값 사용하기 (RGB hexadecimal code사용) (0) | 2012.09.04 |
| [iOS] UIImage 이미지 비율에 맞춰 스케일 재조정하기 (0) | 2012.09.03 |
| iOS5 Customizing Navigation Bar (네비게이션바 커스터마이징) (0) | 2012.09.03 |
| Custom Tab Bars (0) | 2012.09.03 |


saltfactory-projects-saltfactory-ios-tutorial-t1-asyncronous.gz