Geek Answers Handbook

Managing a table with sliding row headers in JavaFX

There is an effect in the presentation of an album in iTunes when the album name and cover art are always in sight. If you go down the screen, they will remain pressed to the top of the screen until they are in the next album and then slide off.

iPad screenshot

Note that the top album is still fully displayed, even if the user scrolls through the paths.

  • What is called this control or effect? I come up with spaces trying to do this on Google.

  • How to do it in JavaFX? I want to emulate this in my Java based GUI. Can a TableView do this or maybe some third-party control?

+8
java javafx javafx-8 tableview
source share
3 answers

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

Then you override the onScroll behavior for ScrollPane. The scrolling algorithm may look like this:

There are two modes.

1) Scrolling IN the album scrolls the TableView on this line. If the scrolling is beyond the bounds of the TableView scrollHeight (range between 0 and scrollHeight), then the mode switches to scrolling through the TO album.

2) Scrolling to an album scrolls ScrollPane to the level of the current line. Scrolling more than the current line height will move to the next album and switch the mode back to scrolling to that album.

3) Edges: Scrolling in ScrollPane outside of ScrollPane ScrollHeight (range between 0 and scrollHeight) immediately jumps to the next album and switches the mode back to IN scrolling of this album.

I would give a code example, but I never saw anyone try to do this. I just know that you CAN do it.

+4
source share

I would recommend you take a look at SpreadsheetView in ControlsFX

SpreadsheetView allows you to capture any number of rows at the top of the screen. Thus, you will have the first part of your behavior.

Regarding the fact of a collision with another, this would be more difficult, but not impossible, using SpreadsheetView.

In any case, if you want to implement this behavior in TableView, you will find very useful tricks in the SpreadsheetView code.

+2
source share

This is how the section name acts as the default in a UITableView.

https://developer.apple.com/Library/ios/documentation/UIKit/Reference/UITableView_Class/index.html

This will help you in creating and using a UITableView.

0
source share

More articles:


All Articles