TabbedComponent with custom TabBar?


#1

Hi,

I want to create a TabbedComponent with a customer layout for the TabbedButtonBar.

I want the first button to be left aligned. But all other buttons should be right aligned. In other words: there should be a gap in the middle, between TabButton1 and the other tab buttons.

Any suggestions how to achieve that?
I think, I would need my own TabbedButtonBar, to do the custom layouting. Unfortunately, the TabbedComponent is not designed for that, it seems.

I can create my own TabBarButton. The TabbedComponent class lets me do that with the function “createTabButton(https://docs.juce.com/master/classTabbedComponent.html#af6d13ea3c6b9dc73ffc8dea8d74099da )”
But I cannot create my own TabbedButtonBar, because there is no corresponding function “createTabButtonBar”.


#2

can you create your own derived instance of TabbedButtonBar, and override the resized() implementation?

I guess that depends on if you have access to the array of tabs that it’ll place in resized() or not, which is private, unfortunately…
maybe a feature request is in order to make that member protected…
OwnedArray<TabInfo> tabs;

Another option would be to make a blank tab whose index is always 1 (0-indexed), and has a custom width, maybe? every other tab has a “normal” width, but this 2nd tab would have a wide width, and have a blank paint() routine so nothing gets drawn… Just an idea. it might be worth inspecting

TabBarButton* TabbedButtonBar::createTabButton (const String& name, const int /*index*/)
{
    return new TabBarButton (name, *this);
}

override that so that if index == 1, you return your SuperWideBlankTab, otherwise you return your DerivedTabBarButton