ButtonGroup and TabBar: support for tiled layouts

[kevinfoley]

trafficstars

I'm not sure if there's a specific reason that ButtonGroup and TabBar currently only support horizontal and vertical layouts, but it would be nice for them to support tiled layouts as well. Currently this has to be done by overriding the layout functions in child classes.

[joshtynjala]

If direction is set to Direction.HORIZONTAL and distributeButtonSizes is set to false, it will use FlowLayout. When you do that, the buttons will flow into multiple rows, if necessary (such as when width or maxWidth have been set). Is this what you're looking for?

[kevinfoley]

I didn't realize it uses FlowLayout in that situation. In this case I'm looking for an easy way to control the exact number of buttons per row and column. We have a layout that requires a set of four buttons to be arranged in a 2x2 grid. Only one button can be selected at a time, so I'm using a TabBar. The layout of other elements on the screen depends on the width of the TabBar, so we want the width of the TabBar to be calculated from having two columns, rather than setting an explicit width and letting it wrap buttons into a second row.

Obviously there are other ways to duplicate this behavior (e.g. adding four toggle buttons to a LayoutGroup, giving the LayoutGroup a TiledRowsLayout, and adding the buttons to a ToggleGroup, but that requires a lot of extra boilerplate that isn't necessary when using a TabBar.

Is there a reason that ButtonGroup and TabBar have the direction string instead of letting you explicitly set the layout?

[joshtynjala]

It's been years since I first implemented these components. I guess I didn't consider custom layouts important at the time. The vast majority of tab bars in UI are vertical or horizontal in one row, so that's how I originally designed the component. Occasionally, I would receive a request for multiple rows, but it wasn't common. Luckily, I figured out how to implement it without making breaking changes. If supporting multiple rows would have broken something, I probably wouldn't have added it.

Another option that you might consider is to use a List with item renderers styled to look like tabs/buttons. It has selection built in, so it shouldn't be too much different than using a TabBar. A List seems like your best option, if you want to avoid the LayoutGroup/ToggleGroup way of doing it.