2
  • Is it possible, and how to do it ( if it is ) to have a multy row TabBar, based on the width of the container ?
Yordan Yanakiev
  • 2,546
  • 3
  • 39
  • 88
  • 1
    Im not sure exactly how do to this, but extending TabBar is a good way to start. Have u seen this [link]http://blog.everythingflex.com/2009/08/27/multirowtabs-flex-component-redux/ ? Maybe that will be of some help to you, although the full source code link is broken. Also i know it's not what u asked for, but if you do not like the normal TabBar, the SuperTabBar from [link]http://code.google.com/p/flexlib/wiki/ComponentList is kinda nice :) – Sebastian Mar 15 '12 at 12:00
  • 4
    I guess you could apply a TileLayout to a custom TabBarSkin instead of HorizontalLayout. This way you wouldn't even have to extend TabBar – RIAstar Mar 15 '12 at 12:12
  • 1
    I have added TileLayout but there is some strange gap which is leaving constanly below the tabs. :| – Yordan Yanakiev Mar 15 '12 at 13:50
  • I built one back in the Flex 2 days; but we decided not to release it because it was against our "goal" of helping people create intuitive user interfaces. I think our component strung multiple tab bars together. – JeffryHouser Mar 15 '12 at 13:59
  • @YordanYanakiev Have you tried setting the 'horizontalGap' and 'verticalGap' of the layout to '0' or maybe even '-1'? – RIAstar Mar 15 '12 at 14:30
  • yes i did, but still the wried gap occuring :| – Yordan Yanakiev Mar 15 '12 at 14:36
  • Perhaps the issue is in the TabBarButtonSkin then? It may have some padding at the top. – RIAstar Mar 15 '12 at 16:20
  • I just did a quick test with just the TileLayout: works perfectly. Do you have custom skins that might mess things up? – RIAstar Mar 15 '12 at 16:24

1 Answers1

8

It's as simple as giving your TabBar a TileLayout. You don't have to subclass TabBar and you don't even have to create a custom skin class for it. Just do this:

<s:TabBar dataProvider="{dp}" left="0" right="0">
    <s:layout>
        <s:TileLayout horizontalGap="-1" verticalGap="-1" 
                      requestedRowCount="2" />
    </s:layout>
</s:TabBar>

Which will produce something like this:

TabBar with TileLayout

The gap below the TabBar you saw, is produced because TileLayout will by default allocate a certain number of rows. You can override this by setting the requestedRowCount to the number of rows you expect (2 in this example).

If you want it to be truly dynamic, you can calculate the required number of rows by comparing the TabBar's total width to the TileLayout's columnWidth, and bind the resulting number to the requestedRowCount property.

RIAstar
  • 11,912
  • 20
  • 37