Posted By

chlab on 05/24/11

Tagged

mobile

Versions (?)

Last Edited at 05/24/11 10:23pm

Statistics

Viewed 647 times

Favorited by 0 user(s)

Related snippets

Create a transparent TabbedBar for Titanium Mobile

/ Published in: JavaScript

We create a View with a background color, put a semi-transparent TabbedBar with empty button names on top of it, then add another layer of fully visible labels spaced to fit the TabbedBar beneath it. Everything is then wrapped in one View, which you can add to another View or Window.

Highlighted TextExpand

/**
 * Create a semi transparent TabbedBar
 *
 * The TabbedBar looks best if the backround color is set to one of the colors
 * of the background image of the view beneath it.
 *
 * props:
 * - backgroundColor&nbsp; string&nbsp;&nbsp; Background color of TabbedBar
 * - buttonNames&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; array&nbsp;&nbsp;&nbsp; Names for the labels of the TabbedBar
 * - height&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; number&nbsp;&nbsp; Height of entire view
 * - opacity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; decimal&nbsp; Opacity level of TabbedBar and it's background
 *
 * @param&nbsp;&nbsp; object&nbsp; Dictionary of properties
 * @return&nbsp; object&nbsp; Titanium View
 */
function createTransparentTabbedBar (props)
{
 if (typeof(props.opacity) == 'undefined')
 props.opacity = 0.4;

// wraps all the views
 var wrapper = Ti.UI.createView({
 top: 0,
 left: 0,
 right: 0,
 height: (typeof(props.height) != 'undefined' ? props.height : 30)
 }),
 // text overlay container
 overlay = Ti.UI.createView({
 zIndex: 3,
 touchEnabled: false
 }),
 labels = [],
 // bar background layer
 bar_bg = Ti.UI.createView({
 backgroundColor: '#000',
 opacity: props.opacity/2,
 top: 0,
 left: 0,
 right: 0,
 zIndex: 1
 })
 tabbed_bar = Ti.UI.iOS.createTabbedBar({
 backgroundColor: (typeof(props.backgroundColor) != 'undefined' ? props.backgroundColor : '#000'),
 opacity: props.opacity,
 style: Ti.UI.iPhone.SystemButtonStyle.BAR,
 top: 2,
 bottom: 2,
 left: 2,
 right: 2,
 zIndex: 2
 }),
 // button width = screen resolution-2px outer border-right/left margin-1px (border) for every button
 width = Math.ceil((318-tabbed_bar.left-tabbed_bar.right-props.buttonNames.length)/props.buttonNames.length);

// loop all buttons
 for (var i = 0, l = props.buttonNames.length; i < l; i++)
 {
 // create an empty label for the tab bar
 labels.push('');

// create a label for the text overlay
 var label = Ti.UI.createLabel({
 text: props.buttonNames[i],
 width: width,
 left: (width*i)+(i*1),
 touchEnabled: false,
 textAlign: 'center',
 color: '#FFF',
 shadowColor: '#000',
 shadowOffset: {x: 0, y: -1},
 font: {
 fontSize: 12,
 fontWeight: 'bold'
 }
 });
 overlay.add(label);
 }

// add an array of empty labels to create the tabs
 tabbed_bar.labels = labels;

// wrap everything in one view
 wrapper.add(tabbed_bar, bar_bg, overlay);
 return wrapper;
};

// usage
Ti.UI.setBackgroundImage('images/background.jpg');
var win = Ti.UI.createWindow({title: 'Tabbed Bar Test'});
 
var bar = createTransparentTabbedBar({
 backgroundColor: '#88502B',
 buttonNames: ['One', 'Two', 'Three'],
 height: 40,
 opacity: 0.4
 });
win.add(bar);
 
win.open();

URL: http://www.chlab.ch/blog/archives/mobile-development/create-transparent-tabbedbar-titanium-mobile

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.