Table control with sliding row headers in JavaFX

Question

The album view in iTunes has a slick effect where the album title and cover art stay in view at all times. If you slide down the screen they stay pinned to the top of the screen until they bump into the next album, then they slide away.

Notice how the top album is still fully visible even though the user has scrolled down a ways.

1. What is this control or effect called? I'm coming up with blanks trying to Google for it.

2. How can I do this in JavaFX? I want to mimic this in my Java-based GUI. Can TableView do this, or maybe some third-party control?

Answer 1

The easiest way to do this is with a ScrollPane. Inside your ScrollPane you define your rows and their layouts (probably each row is an HBox containing an ImageView and a TableView which is set to the height of the ImageView). Then, the TableViews inside your ScrollPane need to let the ScrollPane override their scrolling - that is, their onScroll bubbles up to the ScrollPane.

Then you override the onScroll behavior for your ScrollPane. The algorithm for the scrolling could go like this:

There are two modes.

1) Scrolling IN an album scrolls the TableView in that row. If the scrolling goes beyond the boundaries of the TableView's scrollHeight (the range between 0 and scrollHeight), then the mode switches to scrolling TO an album.

2) Scrolling TO an album scrolls the ScrollPane an amount up to the height of the current row. Scrolling an amount greater than the current row's height moves to the next album and switches the mode back to Scrolling IN that album.

3) Edge Cases: Scrolling within the ScrollPane beyond the boundaries of the ScrollPane's scrollHeight (the range between 0 and scrollHeight) immediately moves to the next album and switches the mode back to Scrolling IN that album.

I'd give a code example, but I've never actually seen anybody try to do this. I just know you CAN do it.