読者です 読者をやめる 読者になる 読者になる

Titanium Mobileのツールバー拡張モジュール

今週はGLシリーズから離れて、小ネタです。

Titanium MobileでiOSツールバーのボタン背景色をどうやら変更できないということが判明。
仕方がないので、モジュールを作成することに。
モジュールプロジェクトを作成後、View・ViewProxyを追加。

ComCflatToolbarView.h

#import "TiUIView.h"
#import "TiUIiOSToolbar.h"

@interface ComCflatToolbarView : TiUIiOSToolbar {

}

@end

ComCflatToolbarView.m

#import "ComCflatToolbarView.h"

@implementation ComCflatToolbarView

- (void)layoutSubviews
{
  [super layoutSubviews];
  NSMutableArray* tintColors = [self.proxy valueForKey:@"itemsBackgroundColor"];
  
  for ( size_t i = 0 ; i < [toolBar items].count ; ++i ) {
    if ( i > tintColors.count ) continue;
    UIBarButtonItem* item = [[toolBar items] objectAtIndex:i];
    NSString* color = [tintColors objectAtIndex:i];
    if ( color == nil || [color isEqual:[NSNull null]] ) continue;
    item.tintColor = [[TiUtils colorValue:color] _color];
  }
}

@end

ComCflatToolbarViewProxy.h

#import "TiViewProxy.h"
#import "TiUIiOSToolBarProxy.h"

@interface ComCflatToolbarViewProxy : TiUIiOSToolbarProxy {

}

@end

ComCflatToolbarViewProxy.m

#import "ComCflatToolbarViewProxy.h"
#import "TiUtils.h"

@implementation ComCflatToolbarViewProxy

@end

app.js

var win = Ti.UI.createWindow({
	backgroundColor:'white'
});

var bt1 = Ti.UI.createButton({
  title:'button1',
  style: Titanium.UI.iPhone.SystemButtonStyle.BORDERED,  
});

var bt2 = Ti.UI.createButton({
  title:'button2',
  style: Titanium.UI.iPhone.SystemButtonStyle.BORDERED,  
});

var bt3 = Ti.UI.createButton({
  title:'button3',
  style: Titanium.UI.iPhone.SystemButtonStyle.BORDERED,
});

var flexSpace = Ti.UI.createButton({
  systemButton:Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});

var toolbar = require('com.cflat.toolbar');
Ti.API.info("module is => " + toolbar);

var toolbar = toolbar.createView({
  items:[bt1, flexSpace, bt2, flexSpace, bt3],
  itemsBackgroundColor:['#00ff00',null,null,null,'red'], //! setting button's background color
  bottom:0,    
  borderTop:true,
  borderBottom:false,
  translucent:true,
});
win.add(toolbar);  

win.open();

フレームワーク側で対応してほしいところです。
以上。