search

MattMcFarland / com.mattmcfarland.fontawesome

Font Awesome meets Appcelerator Titanium Alloy
GNU General Public License v2.0
78 stars 23 forks source link

Icon for Alloy tab button #37

Closed rafagsiqueira closed 8 years ago

rafagsiqueira commented 8 years ago

Hi,

Sorry for the amateurism, but I wasn't able to work out how to use the font-awesome icon as the tab button. Where do I put:

<Widget id="fa" src="com.mattmcfarland.fontawesome"/> in:

<Alloy>
    <TabGroup>
        <Tab title="Feed" icon="fa-search">
            <Window title="Feed">
                <Label>I am Window 1</Label>
            </Window>
        </Tab>
        <Tab title="Categorias" icon="KS_nav_views.png">
            <Window title="Categorias">
                <Label>I am Window 2</Label>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

?

designbymind commented 8 years ago

Hi @rafagsiqueira,

Android: someone else will have to weigh in here, as I haven't put too much focus in that area yet...

The iOS SDK has limited options for native TabBar customization, so what you're trying to achieve is not currently possible (out-of-the-box). This widget is meant for View-based controllers such as Label & Button. The Tab controller is a top-level element & requires a child Window only.

iOS: Tab Bar Controller currently supports the following attributes/properties: title, icon (local path to image), and badge. You can of course use activeIcon/tintColor (Ti.UI.Tab) & backgroundImage/tabsTintColor (Ti.UI.TabGroup) to achieve further styling, but if you're willing to write your own custom TabBar solution (maybe something that houses a View controller?) or implement a contributed module/widget, that would rock too!

Personal experience: I haven't needed to implement extended customization for the TabBar, so cannot recommend anything more here. For my current project, I chose to use FontAwesome Icons for the TabBar as well. Play around with sizing (@2x | @3x for retina displays) & check out FA2PNG to quickly convert FontAwesome icons into .png format for TabGroup Tab icons, should you choose that route. Also, if you're looking for a more Instagram/Pinterest-style feel to the TabBar (and want to omit a text title), check out the iconInsets property. Works like a charm...

Hope that helped out a little bit. If anyone has input or deeper knowledge of a modern solution for TabBar customization in Titanium/Alloy, I'd love to hear about it!

😃

· Jason