BoxLayout(X_AXIS_SCROLLING) layout manager for Codename One - codenameone

Question

Note for the readers: this question is specific for Codename One only.
My use case is to have one or more horizontally scrollable bars with Buttons.
I need a layout manager that:
puts all the Components on the X axis;
gives each Component its preferred size;
if there is enough horizontal space, it acts exactly as BoxLayout(X_AXIS_NO_GROW);
if there isn't enough horizontal space, it allows a horizontal scrolling to see all the Components;
in the last case, it adds a small arrow on the left and on the right to indicate that a scrolling is possible.
For example, the following code produces the following screenshot:
Form hi = new Form("BoxLayout X scrolling", BoxLayout.y());
Container exampleCnt = new Container();
exampleCnt.setLayout(new BoxLayout(BoxLayout.X_AXIS_NO_GROW));
for (int i=0; i<=10; i++) {
int j = i; // for lambda expression
Button button = new Button("Button " + i);
button.addActionListener(l -> {Log.p("Button " + j + " tapped");});
exampleCnt.add(button);
}
hi.add(exampleCnt);
hi.show();
Instead I need something like in the following screenshots. I suppose to horizontally scroll the buttons bar (the exampleCnt) with the finger. The app should be enough smart to don't confuse the tapping on a Button with the horizontal swiping to scroll the Buttons:

Answer 1

There are several approaches to doing this and they each have their advantages/disadvantages. Let's start by asking this:
Should the arrow buttons be clickable?
Should they draw as an overlay (you would see the button under them as they come into view) or should they act as separate components?
Based on your responses you can pick one of the following.
Builtin Scrolling Support
This would generate something that would render as an overlay and won't be clickable as scrolling assumes a scrollbar style UI but should work for this case too.
You might need to invoke setScrollVisible(true) on the Container.
Then override in the Container:
protected void paintScrollbarX(Graphics g) {
float scrollW = getScrollDimension().getWidth();
float block = ((float) getWidth()) / scrollW;
float offset;
if(getScrollX() + getWidth() == scrollW) {
// normalize the offset to avoid rounding errors to the bottom of the screen
offset = 1 - block;
} else {
offset = (((float) getScrollX() + getWidth()) / scrollW) - block;
}
// here paint the arrows to the left/right based on the values
}
Use a Wrapper
With a wrapper you can just use buttons to represent the arrows. You can place them either in a layered layout to create an overlay effect or in the sides to create separation e.g. this would result in separate buttons:
BorderLayout wrap = BorderLayout.centerEastWest(scrollableCnt, right, left);
This would result in overlay:
BorderLayout border = BorderLayout.centerEastWest(null, right, left);
LayeredLayout wrap = LayeredLayout(scrollableCnt, border);
To make this work we'd want to hide/show the components based on scroll. isScrollableX() will return false for a non-scrollable component so:
if(scrollableCnt.isScrollableX()) {
left.setVisible(false);
scrollableCnt.addScrollListener((scrollX, scrollY, oldscrollX, oldscrollY) -> {
left.setVisible(scrollX > 0);
// not 100% sure about this line but it should be something close to this
right.setVisible(scrollX < getScrollDimension().getWidth() - scrollableCnt.getWidth());
});
} else {
right.setVisible(false);
left.setVisible(false);
}