NavBarの文字色、背景色変更などの共通化
Titanium MobileのNavBarって標準で文字色変更できたっけ…?
需要あるのか解らないけど、僕が使ってるテンプレです。
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作った際に、呼び出すようにすれば管理楽かも。