List with variable height entries

General JUCE discussion
1

I am (re) evaluating JUCE for the UI of a desktop version of my iOS app. An important part of my app is a list which allows an user to browse and select radios. Besides the radios themselves the list contains entries which are separators, entries for paging forward / backward and entries for filtering by genres. The problem is that these different kind of entries should have different entry heights:

[attachment=0]list.png[/attachment]

The screenshot is implemented as a JUCE ListBox and shows that for some entry types there is far too much whitespace if every row has the same height.

Another possibility would be an implementation with a tree view. But I am not sure how to draw / show an animated progress indicator for an entry that is tapped/clicked. In the ListBox version that was easy when using the Component based approach.

On iOS and Mac OS X this kind of user interface is possible because the list control asks for the height of the row currently beeing drawn (heightForRowAtIndexPath). Any advice how to implement this kind of interface with JUCE would be very much appreciated.

Patrick

2

You could use the TreeView and implement createItemComponent() for your custom TreeViewItem.
You could use any component for this.

Snippet from my code.

ScreenTreeViewItemComponent* ScreenTreeViewItem::createItemComponent()
{
	return new ScreenTreeViewItemComponent( this );
}
3

Thanks for the pointer into the right direction! I wasn’t aware that a TreeView can work component based as well. Here is a screenshot of the list reimplemented using a TreeView:

[attachment=0]tree.png[/attachment]

Each row can have its own height when using the TreeView. Using a component based aproach allowed to add the animated activity indicator easily.