Styling tabbedBar
I'm trying to style a tabbedBar and have for now settled to use images that simply 'cover' a whole button a apply them via the labels object:
var buttonObjects = [
{ image:'../../images/bar_button_1.png', width:100 },
{ image:'../../images/bar_button_2.png', width:100 },
];
var myTabbedBar = Titanium.UI.createTabbedBar({
labels:buttonObjects,
style:Titanium.UI.iPhone.SystemButtonStyle.BAR,
height:30,
bottom: 5,
width:200,
index: 0
});
This works so far, except that I can't force no background for the whole bar or set an image for the selected state anyhow.
Anyone know how I can use the tabbedBar component and use my own imagery for all states?
4 Answers
-
Since setting images for the buttonObjects leaves a 1px gap inbetween them, compresses the buttons accordingly (and therefore messes up the graphics) and shows the actual background of the tabbedBar, I've played around with things like this:
var buttonObjects = [ { image:'../../images/bar_button_1.png', width:100 }, { image:'../../images/bar_button_2.png', width:100 }, ]; var myTabbedBar = Titanium.UI.createTabbedBar({ labels:buttonObjects, backgroundColor:'#000', height:30, bottom: 5, width:201, index: 0 });
This setting increases the width of the gap to 5px and pushes the left button together to only 95px. WTF? – Don't mean to be ungrateful, but this state of guessing and experimenting is starting to get really exhausting.
Also: Anyone who has manage to style a tabbedBar in some way care to share some wisdom?
Cheers.
-
Here's a (ridiculous) workaround I found, could probably be still streamlined a tad to make it more dynamic and definitely doesn't solve the issues described in my last "answer". Here's what I'm using now:
var buttonObjects = [ { image:'../../images/bar_button_1.png', width:100 }, { image:'../../images/bar_button_2.png', width:100 }, ]; var myTabbedBar = Titanium.UI.createTabbedBar({ labels:buttonObjects, style:Titanium.UI.iPhone.SystemButtonStyle.BAR, height:30, bottom: 5, width:200, index: 0 }); Ti.UI.currentWindow.add(myTabbedBar); myTabbedBar.addEventListener('click', function(e){ switch(e.index) { case 0: buttonObjects[0].image = '../../images/bar_button_1_selected.png'; buttonObjects[1].image = '../../images/bar_button_2.png'; myTabbedBar.labels = buttonObjects; // ... break; case 1: buttonObjects[0].image = '../../images/bar_button_1.png'; buttonObjects[1].image = '../../images/bar_button_1_selected.png'; myTabbedBar.labels = buttonObjects; // ... break; } });
-
boy this is driving me insane. have you ever figured out how to get rid of that gap!?
-
I was racking my brain for days trying to make the tabbedBar look the way I want. Finally, I got fed up and created a module that allows you to completely customize a tabbedBar. If you want to use your own background image in a tabbedBar, you can use the module I created called Fancy Tabbed Bar. You can check it out here.