Advanced Search

Create a transparent TabbedBar for Titanium Mobile

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**
  2.  * Create a semi transparent TabbedBar
  3.  *
  4.  * The TabbedBar looks best if the backround color is set to one of the colors
  5.  * of the background image of the view beneath it.
  6.  *
  7.  * props:
  8.  * - backgroundColor  string   Background color of TabbedBar
  9.  * - buttonNames      array    Names for the labels of the TabbedBar
  10.  * - height           number   Height of entire view
  11.  * - opacity          decimal  Opacity level of TabbedBar and it's background
  12.  *
  13.  * @param   object  Dictionary of properties
  14.  * @return  object  Titanium View
  15.  */
  16. function createTransparentTabbedBar (props)
  17. {
  18.  if (typeof(props.opacity) == 'undefined')
  19.  props.opacity = 0.4;
  20.  
  21.  // wraps all the views
  22.  var wrapper = Ti.UI.createView({
  23.  top: 0,
  24.  left: 0,
  25.  right: 0,
  26.  height: (typeof(props.height) != 'undefined' ? props.height : 30)
  27.  }),
  28.  // text overlay container
  29.  overlay = Ti.UI.createView({
  30.  zIndex: 3,
  31.  touchEnabled: false
  32.  }),
  33.  labels = [],
  34.  // bar background layer
  35.  bar_bg = Ti.UI.createView({
  36.  backgroundColor: '#000',
  37.  opacity: props.opacity/2,
  38.  top: 0,
  39.  left: 0,
  40.  right: 0,
  41.  zIndex: 1
  42.  })
  43.  tabbed_bar = Ti.UI.iOS.createTabbedBar({
  44.  backgroundColor: (typeof(props.backgroundColor) != 'undefined' ? props.backgroundColor : '#000'),
  45.  opacity: props.opacity,
  46.  style: Ti.UI.iPhone.SystemButtonStyle.BAR,
  47.  top: 2,
  48.  bottom: 2,
  49.  left: 2,
  50.  right: 2,
  51.  zIndex: 2
  52.  }),
  53.  // button width = screen resolution-2px outer border-right/left margin-1px (border) for every button
  54.  width = Math.ceil((318-tabbed_bar.left-tabbed_bar.right-props.buttonNames.length)/props.buttonNames.length);
  55.  
  56.  // loop all buttons
  57.  for (var i = 0, l = props.buttonNames.length; i < l; i++)
  58.  {
  59.  // create an empty label for the tab bar
  60.  labels.push('');
  61.  
  62.  // create a label for the text overlay
  63.  var label = Ti.UI.createLabel({
  64.  text: props.buttonNames[i],
  65.  width: width,
  66.  left: (width*i)+(i*1),
  67.  touchEnabled: false,
  68.  textAlign: 'center',
  69.  color: '#FFF',
  70.  shadowColor: '#000',
  71.  shadowOffset: {x: 0, y: -1},
  72.  font: {
  73.  fontSize: 12,
  74.  fontWeight: 'bold'
  75.  }
  76.  });
  77.  overlay.add(label);
  78.  }
  79.  
  80.  // add an array of empty labels to create the tabs
  81.  tabbed_bar.labels = labels;
  82.  
  83.  // wrap everything in one view
  84.  wrapper.add(tabbed_bar, bar_bg, overlay);
  85.  return wrapper;
  86. };
  87.  
  88.  
  89.  
  90. // usage
  91. Ti.UI.setBackgroundImage('images/background.jpg');
  92. var win = Ti.UI.createWindow({title: 'Tabbed Bar Test'});
  93.  
  94. var bar = createTransparentTabbedBar({
  95.  backgroundColor: '#88502B',
  96.  buttonNames: ['One', 'Two', 'Three'],
  97.  height: 40,
  98.  opacity: 0.4
  99.  });
  100. win.add(bar);
  101.  
  102. win.open();

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.