[AC-2515] iOS: Buttons in NavigationBar and Toolbar don't support custom fonts

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Resolved
Resolution	Hold
Resolution Date	2014-02-25T18:19:25.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK & CLI
Labels	custom, fonts, ios, navigationbar, toolbar
Reporter	Fokke Zandbergen
Assignee	Vishal Duggal
Created	2014-02-23T19:45:34.000+0000
Updated	2016-03-08T07:41:34.000+0000

Description

A navigation bars leftNavButton, titleControl and rightNavButton as well as Toolbar items don't support custom fonts, as demonstrated with the following code, attached custom font and screenshot. A label on the same positions works fine as well as a button used anywhere else.

function create(button, custom) {
  var fn = button ? 'createButton' : 'createLabel';
  var args = custom ? {
    font: {
      fontFamily: 'FontAwesome'
    }
  } : {};
  args[button ? 'title' : 'text'] = custom ? "\uf025" : 'Hello';
  return Ti.UI[fn](args);
}

var win = Ti.UI.createWindow({
  backgroundColor: 'white',
  leftNavButton: create(true, true),
  rightNavButton: create(false, true)
});

win.add(create(true, true));

win.add(Ti.UI.iOS.createToolbar({
  items: [
    create(true, true),
    Ti.UI.createButton({
      systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
    }),
    create(false, true)
  ],
  bottom: 0
}));

var navwin = Ti.UI.iOS.createNavigationWindow({
  window: win
});

navwin.open();

Custom icon fonts in particular would be awesome in navigation bars and toolbars an I see no reason why this couldn't be done.

Attachments

File	Date	Size
FontAwesome.otf	2014-02-23T19:45:34.000+0000	62856
iOS-simulatorschermafbeelding 24 feb. 2014 08.17.23.png	2014-02-24T07:17:27.000+0000	23422

Comments

Vishal Duggal 2014-02-25

@[~fokke] The Ti.UI.Button class does support custom fonts. However when being used in a toolbar or navbar, it also has to support a bunch of other properties (Essentially the Ti.UI.Button end point is supporting 2 native UI elements, UIBarButtonItem and UIButton). The code is a little dirty. The easiest way for you to get what you want when not creating system buttons is to wrap the button in a view. Sample Code below

   function getBarButtonItem(){
       var button = Ti.UI.createButton({
       	style:0,//Define of type custom so that no rounded rect is shown on iOS6
       	color:'blue',selectedColor:'aqua', //Set up color and highlighted color since it is custom button
       	font:{fontFamily:'FontAwesome'},
       	title:'\uf025'
       });
       //Wrap the button in a view
       var wrap = Ti.UI.createView({width:Ti.UI.SIZE,height:Ti.UI.SIZE});
       wrap.add(button);
       
       //Create UIBarButtonItem from the customView
       return wrap;
   }

Vishal Duggal 2014-02-25

Workaround in comments above
Fokke Zandbergen 2014-02-26

[~vduggal] I know Ti.UI.Button supports custom fonts everywhere except in toolbars or navbar and I am aware of workarounds. You're saying it is technically impossible to bring support of custom fonts to buttons in toolbars and navbars without using such a workaround?
Vishal Duggal 2014-02-26

[~fokke] No not impossible. Just unlikely to get done in any timely fashion since there is a simple JS wokaround. Ideally what you would want to do it expose the UIBarButtonItem as a separate proxy and link that up to navigation bars and toolbars instead of trying trying to manage multiple UI elements through a single button proxy. I marked it as hold so that we can keep this in mind when we next have the bandwidth to do a little housecleaning.
Kip Holcomb 2014-08-12

I ran into this problem today when I wasn't able to match the font in a NavigationWindow's left navbar button. The workaround of wrapping the button in its own View works for me, but I wish this issue was open, since a workaround isn't a fix.
Fokke Zandbergen 2014-08-12

Vishal, I agree with Kip that a workaround is not a solution. If it is possible in iOS nayive then it should be in Titanium. Icon fonts are becoming the default for apps just like web as new densities keep being added (@3x or 4x in October!). Please reopen or at least close as "Won't fix" [~Ingo]
Ed 2014-08-16

I too would like to have this feature request re-considered. I would like to use fontAwesome for some custom nav bar buttons, and while there's a workaround, a fix would be better. Thanks in advance for considering this.
Mark Mokryn 2014-12-21

+1 for reopening and fixing
Jong Eun Lee 2015-01-01

It reproduced again on 3.4.1.GA. Please fix it again :)

JSON Source