Tip: keyboardToolbars and iOS 7

With iOS 7 came the new requirement that the developer manage tintColor on the UI objects and the keyboardToolbar is no exception. The numeric keyboard on iOS tends to leave a user trapped in textField hell.  You can test this by clicking on a phone number field in Apple’s own address book.  To counter this, Titanium user’s have built custom toolbars for their keyboards with a ‘Done’ button on it.

For most of us, something like this has worked fine for years:

var textfield = Ti.UI.createTextField({keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD, returnKeyType: Ti.UI.RETURNKEY_DONE, backgroundColor: '#262626', border: 1, width: 100});

var toolbarDone = Ti.UI.createButton({systemButton: Titanium.UI.iPhone.SystemButton.DONE});
var flexSpace = Titanium.UI.createButton({systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE});
toolbarDone.addEventListener('click', function(){
textfield.blur();

});
textfield.keyboardToolbarColor = '#80c342';
textfield.keyboardToolbar = [flexSpace, toolbarDone];

 


Toolbar03

But with iOS 7, we end up with blue text on our toolbar.  Well, the toolbar does not seem to be inheriting the tintColor from any of its parents.  We have added tintColor to the textField, to the textField parent the window, and still nothing.

 

 

The solution?  Create a full blown toolbar and apply your tintColor there.

var textfield = Ti.UI.createTextField({keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD, returnKeyType: Ti.UI.RETURNKEY_DONE, backgroundColor: '#262626', border: 1, width: 100});
var toolbarDone = Ti.UI.createButton({systemButton: Titanium.UI.iPhone.SystemButton.DONE});
var flexSpace = Titanium.UI.createButton({systemButton : Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE});
toolbarDone.addEventListener('click', function(){
textfield.blur();

});

var toolbar = Ti.UI.iOS.createToolbar({
items: [flexSpace, toolbarDone],
tintColor: '#ffffff',
barColor:'#80c342'
})
textfield.keyboardToolbar = toolbar;

 

 

Sometimes you have to skip the shortcuts. Falls back pretty well on iOS 6 too.

Toolbar02  Toolbar04

Stephen Feather a founding partner of Feather Direct, a mobile design firm in the Atlanta, GA area. He worked directly with communications companies such as Netscape, Microsoft, and Oracle in the early days of the Internet. In 1996 he authored JavaScript by Example, one of the first publications on the then-new scripting language. He volunteers time to assist and train a new generation of app developers through online forums and local user groups.


Comments

  • Joseph

    Interesting, I used to place thé tintColor on the buttons before passing it to the keyboardTool bar items. Thanx