Customized TabBar for iOS in pure JS

Row of server cabinets with computer and digital displays full of data, numbers, and blue blinking lights and leds, arranged in circular rows. Computer servers fill a room of a futuristic data center, used as a cloud computing and data storage facility. Room is illuminated by blue light. Low angle view. Supercomputer simulation, digitally generated image.

Back when I first started using Titanium, I was working on an app that I wanted to have a color button (aka not use the gradient that iOS uses by default). To do this I hacked away for days to come up with a solution, and I found it! but repeating this look in new apps meant starting from zero time and again.

Fast forward about a year and I come on board Appcelerator and I vowed to get this script finished and out in the wild! Why? Two reasons, the first is its a cool script (if I do say so myself) But also it proves a point, that you can do a lot with the bare APIs in Titanium.

Screen Shot 2011-09-26 at 4.56.36 PM.png

So lets go through this shall we? What does this script provide?

  • A drop in replacement for the default tabGroup, that with less then 3 lines of JS can get you started with adding these cool features to your already started app.
  • The ability to have large (bigger then the default tabbar height) full color tabs to enhance your UI using the new tabHeight and tabWidth properties on your tab.
  • An onClick property for your tabs so tabs can be more then just a window, for example a tab could end up being a reload button, or open the camera view…
  • A modal property to open your window in a modal window
  • A currentTab property to access the currently active tab off the tabGroup object
  • A currentTabIndex to access the index of the current tab off the tabGroup object
  • hideTabBar and showTabBar methods off of the tab group to hide and show the tabBar
  • selectedImage property to use an image for the highlighted bg of the currently selected tab

 

This code is compatible with all iOS devices ONLY, android is not supported at this time.

So how do we set it up? Simple!

Simply copy the files from the customTabBar Github repo to the Resources dir of your project, then replace your Ti.UI.createTabGroup(); code in your app with:

and add your newly available properties as desired! (for more advanced details on usage, checkout this file in the repo)

Have any questions? hit me up in the comments!

18 COMMENTS

  1. Is there a listing of properties? The example app.js is a bit confusing and requires me to build it.

    You mention selectedImage, and there is backgroundColor, what else?

  2. Hi Matt, thats code is great, but how can we change the state of a tab with a hightlight image?
    If i use the tab property selectedImage when a tab is focused two images are shown, image and selectedImage, and this one has another size resulting strange.
    this is my code:
    icon: ‘/images/search_tab.png’,
    selectedIcon: ‘/images/search_tab_HL.png’,
    selectedImage: ‘/images/search_tab_HL.png’,
    imageWidth:30,
    title:’Search’,
    custom: true,

    i tried everything and none works

    Thks in advanced

  3. Matt,

    I almost have this working but there is one problem. I have 5 tabs the center one I want to make big (think instagram or foursquare). Visually I can do this by adding custom: true and tabHeight: 60 to my Tu.UI.createTab. The problem is that my 4th and 5th windows no longer show any content. I’m also getting the following error [ERROR] While executing Timer, received script error. ‘Result of expression ‘tabbar.tabs[i]’ [undefined] is not an object. at customTabBar.js (line 224)’

    Any thoughts?

  4. I just need the selected background color to be changed (from blue to green). All icons should be the same. How do I do this with this script? Or is there any other solution?
    Thx so far …

  5. This could be exactly what I’m looking for. I need a button in the tabGroup that has a seperate action (ie not changing the active tab) what event do I need to listen out for and do I need to suppress the change within the group?
    cheers

  6. I’m not able to get this to work within my existing project or by running the demo project downloaded from github, both throw “CustomTabGroup error: badges can not be set on custom tabs”. I’m not sure what this is indicating is wrong … any help would be greatly appreciated. thanks!

  7. @siamiam – I had that too so added
    badge:null,
    in the create tab properties which made the error go away.

    My question is can I make the tab bar smaller? Or is the iOS background always going to be present? I’ve tried altering the fixed values (49) in the module (as well as setting the tabHeight obviously) but no joy.

    Thanks.

Comments are closed.