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:
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.