なんかできたよー。

Web系Tipsを適当につづるBlog.

NavBarの文字色、背景色変更などの共通化

Titanium MobileのNavBarって標準で文字色変更できたっけ…?
需要あるのか解らないけど、僕が使ってるテンプレです。


f:id:tuki0918:20130216133919p:plain

NavBarスタイル共通メソッド( App/util.js )

CoffeeScript

navBarStyle = (win, title, color='#666')->
  win.barColor = '#eee'
  #win.barImage = 'images/navber_bg.png'
  #do win.hideTabBar

  titleLabel = Ti.UI.createLabel
    text: title
    textAlign: 'center'
    shadowColor: '#ddd'
    shadowOffset: x:2, y:2
    color: color
    font:
      fontSize: 20
      #fontFamily: ''
      fontWeight: 'bold'
  win.setTitleControl titleLabel
  return


exports.navBarStyle = navBarStyle

JavaScript

var navBarStyle;

navBarStyle = function(win, title, color) {
  var titleLabel;
  if (color == null) {
    color = '#666';
  }
  win.barColor = '#eee';
  titleLabel = Ti.UI.createLabel({
    text: title,
    textAlign: 'center',
    shadowColor: '#ddd',
    shadowOffset: {
      x: 2,
      y: 2
    },
    color: color,
    font: {
      fontSize: 20,
      fontWeight: 'bold'
    }
  });
  win.setTitleControl(titleLabel);
};

exports.navBarStyle = navBarStyle;

引数について

  • win … 対象のウインドウ[object TiUIWindow]
  • title … タイトルに表示させる文字列
  • color='#666' … タイトルの文字色、指定が無ければ初期値'#666'に

使用例

ファイル名:app.js

Ti.UI.setBackgroundColor('#fff');
Ti.UI.iPhone.setStatusBarStyle(Ti.UI.iPhone.StatusBar.OPAQUE_BLACK);

var App = {
  util: require('/App/util')
};

Ti.App.tabGroup = Ti.UI.createTabGroup();

var tabTitle1 = 'Main Title';
var tabWin1 = Ti.UI.createWindow();
var tab1 = Ti.UI.createTab({
  icon: 'KS_nav_views.png',
  title: tabTitle1,
  window: tabWin1
});

App.util.navBarStyle(tabWin1, tabTitle1);

Ti.App.tabGroup.addTab(tab1);
Ti.App.tabGroup.open();


TabGroup用の新しいWindow作った際に、呼び出すようにすれば管理楽かも。