Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 18    Views: 923

MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
07/02/12 07:11 AM (11 years ago)

Tutorial: Tab Bar with Custom Center Tab

Have you seen apps like Instagram that have a custom color or raised image in the center tab? Here's a tutorial to create a similar effect in a BT app: http://jc-evans.com/tutorials/Tab_Bar_With_Custom_Center_Tab.pdf Thanks to the programmers at iDev Recipes for the initial code.
 
Fred@mySkylla com
Android Fan
Profile
Posts: 5259
Reg: Oct 03, 2011
location unknow...
62,560
like
07/02/12 07:21 AM (11 years ago)
Excellent Fred
 
XboxMods
buzztouch Evangelist
Profile
Posts: 718
Reg: Oct 28, 2011
location unknow...
12,080
like
07/02/12 08:01 AM (11 years ago)
Fantastic! Thanks!
 
Stobe
buzztouch Evangelist
Profile
Posts: 1527
Reg: Mar 04, 2011
Fredericksburg,...
24,670
like
07/02/12 08:14 AM (11 years ago)
Bad ass!
 
Rad Doc
Apple Fan
Profile
Posts: 653
Reg: Oct 08, 2010
USA, NYC
8,580
like
07/02/12 08:25 AM (11 years ago)
Looks great. Just tried it and getting 9 errors. PDF copy seems to be throwing it off.
 
ATRAIN53
Code is Art
Profile
Posts: 1755
Reg: Nov 17, 2011
Chicago
26,450
like
07/02/12 08:34 AM (11 years ago)
Thanks! will be using this in a couple of apps. it does make them stand out from others. i always notice it. Thanks for the git on idev recipies. see some other fun mods to try there. i was looking at a 'pull to refresh' from elsewhere. they seem to have one there. did you use that? also interesting you say wont work for COLORED tabs. I've not been able to get custom color tab bars to work in 2.0 yet. the functions in the cpanel to change it don't seem to work. have you got a custom color tab bar working on SH 2.0? I've seen/used it in 1.5, but not 2.0 yet.... again, thanks for sharing!
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
07/02/12 08:44 AM (11 years ago)
PSMDanny told me it wasn't working on the color tabs. I saw code to get the colored tabs to work, but haven't tried it. http://www.buzztouch.com/forum/thread.php?tid=3B451FF85017C1B39D079E4&command=isSearching&currentPage=1&topicTitle=tab%20bar&createdBy=&repliedBy=&minViews=-1&maxViews=-1&minReplies=-1&maxReplies=-1&forumCategory= The different tutorials the iDev guys have done are great. Look forward to trying some others out soon too.
 
Rad Doc
Apple Fan
Profile
Posts: 653
Reg: Oct 08, 2010
USA, NYC
8,580
like
07/02/12 08:51 AM (11 years ago)
Goblue, Are you importing any other files into the project. It seems super simple but i am throwing 9 errors every time i insert code. Anthony
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
07/02/12 08:56 AM (11 years ago)
No. I just tried it again using a fresh download and it worked perfectly. Copied the code directly from the pdf and pasted it into the BT_rotatingTabBarController.m What are the errors you're getting?
 
Rad Doc
Apple Fan
Profile
Posts: 653
Reg: Oct 08, 2010
USA, NYC
8,580
like
07/02/12 09:15 AM (11 years ago)
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
07/02/12 09:45 AM (11 years ago)
Yep, clearly copy/paste errors. The three "[self addCenterButtonWithImage..." statements should be single line statements. When you're pasting them in, you're getting carriage returns before the "highlightImage" statement. Similarly, on the other errors, look at the hyphenated words. There should not be any hyphenations. I'll fix the pdf to eliminate those.
 
Rad Doc
Apple Fan
Profile
Posts: 653
Reg: Oct 08, 2010
USA, NYC
8,580
like
07/02/12 11:15 AM (11 years ago)
Blue, So it looks like i was able to make corrections to.m file. But, now when i run app in simulator the raised center button doesn't show image that i dragged into project and called out in BT CP. I've added some screenshots http://dl.dropbox.com/u/35241128/Sample%20Screenshot/button%20image.png http://dl.dropbox.com/u/35241128/Sample%20Screenshot/modified%20code.png Any Thoughts.
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
07/02/12 11:38 AM (11 years ago)
I'm not sure what you're doing there. You appear to have two images loading on that tab. Do not specify an image in your BT control panel for that tab. The button you create referenced by the "[self addCenterButtonWithImage:" is the image. The code you showed calls the image "camera_button_take.png." Did you name your image that?
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
07/02/12 11:44 AM (11 years ago)
By the way, your app looks good. I like the custom icons on the menu items.
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
07/02/12 11:57 AM (11 years ago)
I updated the pdf. Hopefully this will help with the copy/paste issues. http://jc-evans.com/tutorials/Tab_Bar_With_Custom_Center_Tab.pdf
 
PSMDanny
Apple Fan
Profile
Posts: 1166
Reg: Dec 09, 2011
Heerlen
21,940
like
07/02/12 12:05 PM (11 years ago)
Hi all, Thank MGoBlue really wonderfull!! @ Rad doc: If you go to layout/tabs -->tabbed layout make shure you have 5 tabs filled. On the 3rd tab there should be no info (or blank.png) in the icon field. After that hit save. Also make shure that in global themes (if you haven't made the modification mentioned here: http://www.buzztouch.com/forum/thread.php?tid=3B451FF85017C1B39D079E4&command=isSearching&currentPage=1&topicTitle=tab%20bar&createdBy=&repliedBy=&minViews=-1&maxViews=-1&minReplies=-1&maxReplies=-1&forumCategory= ) Navigation Bar / Status Bar -> Tab Bar Color = clear Should work this way. Best Regards, Danny
 
Rad Doc
Apple Fan
Profile
Posts: 653
Reg: Oct 08, 2010
USA, NYC
8,580
like
07/02/12 12:29 PM (11 years ago)
@GoBlue, @PSMDanny, Thank you very much for your help. Tab bar is working perfect now.Wonderful tutorial as always. Thanks again. Anthony
 
lsills81
Apple Fan
Profile
Posts: 469
Reg: Mar 19, 2012
location unknow...
14,090
like
07/02/12 03:44 PM (11 years ago)
Thank you!!!! Amazing help!!!
 
ATRAIN53
Code is Art
Profile
Posts: 1755
Reg: Nov 17, 2011
Chicago
26,450
like
07/25/12 09:40 AM (11 years ago)
Just finally got to adding this- Thanks again for the tutorial, really love how this customizes an app! good stuff... It's working but I am getting this Semantic Issue in regards to the first chunk of code you add. (Pretty sure I got all the carriage returns out) Instance method '-addCenterButtonWithImage:' not found (return type defaults to 'id') and in this code chunk the 2nd one has an extra colon at the end before nil // [self addCenterButtonWithImage:[UIImage imageNamed:@"cameraTabBarItem.png"] highlightImage:nil]; [self addCenterButtonWithImage:[UIImage imageNamed:@"camera_button_take.png"] highlightImage::nil]; // [self addCenterButtonWithImage:[UIImage imageNamed:@"capture-button.png"] highlightImage:nil]; gotta remove that extra one before it compiles! also - BT 2.0 Self Hosted Tab Bar color fix hack? I tried that one listed here and no go. Works in 1.5 but not 2.0. Would love to get that working....
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.