Tab Bar With Custom Center Tab in a BT App
Tutorial by Jeff Evans (MGoBlue), Based on original code by iDev Recipes
Apps like Instagram, DailyBooth and Path have what looks like a standard UITabBarController, but the center tab bar is raised or colored. How do we recreate this look?
Download images for project: https://dl.dropbox.com/u/76141353/images_for_tab_bar.zip
The following image files are used in the various examples:
capture-button@2x.png
cameraTabBarItem.png
cameraTabBarItem@2x.png
clearTabBarItem.png
camera_button_take@2x.png
tabBar_cameraButton_ready_matte.png
tabBar_cameraButton_ready_matte@2x.png
clearTabBarItem@2x.png
Use these images, or use them as templates to create your own unique buttons.
Drag the appropriate images into your project.
In BT_Layout/BT_rotatingTabBarController.m
Find this section: //after the tabber’s view loaded
and directly after [super viewDidLoad];
insert this:
Comment/Uncomment the line you wish to use.
At bottom of file before @end, add this:
Important: This is tested and works with a tab bar that uses 5 tabs. I have not worked with less than 5 tabs.
Do not specify an icon for tab 3 in your BT Control Panel. The icon you specify in the code is the icon that will display.
The line in the code above starting with “button.autoresizingMask =” is one line. Please make sure to remove the carriage return after “FlexibleLeftMargin”
Note, this does not work with custom colored tab bars.
That’s it!
__________________________________________________________________________________________________
Full Source Code Here: https://github.com/boctor/idev-recipes/tree/master/RaisedCenterTabBar
Based on a tutorial by iDev Recipes found here: http://idevrecipes.com/2010/12/16/raised-center-tab-bar-button/
__________________________________________________________________________________________________
