CODEWITHSUNDEEP
codenameone
Francesco Galgani
Francesco Galgani

Reputation: 6249

Horizontal scrolling like Instagram in Codename One

In my Codename One app, I don't need an horizontal scrolling identical to Instagram, but similar to some aspects.

Please look at this video, that shows a horizontal scrolling in Instagram: https://www.informatica-libera.net/videoLavoro/instagramScrolling.mp4

The main functionality that I need (and that is different from the standard horizontal scrolling), is the ability to scroll a Container only if the finger movement is more that a given horizontal space (we can suppose 20mm), otherwise the Container is restored to the position before the scrolling (like Instagram does).

Moreover, if the scrolling is "accepted" (that means more that 20mm), the Container will be automatically horizontally scrolled to make an inner Component full visible at the left of the horizontal space.

Example:

Suppose that I have a Container (with BoxLayout.x()) that contains the Components A, B, C and suppose that A, B and C have a width identical to the 75% of the screen width.

So, at the app start, A is full visible, B is visible only for a small part, C is not visible. I need a scrolling like Instagram that, if accepted (the scrolling is more than 20mm), makes B full visible in the same position of A (otherwise it undoes the scrolling).

So, after this kind of horizontal scrolling, A will be not visible, B full visible, C visible only for a small part.

Any suggest to implement this behaviour (like in this example) with Codename One? Thank you

Upvotes: 2

Views: 113

Answers (1)

Diamond
Diamond

Reputation: 7483

You need Tab with the swipeActivated set to true. The only downside to Tab is you can't set only one side to be visible. Both left and right will be set to be visible.

From your analogy above, part of both A and C will be visible when B is fully visible, only by the size you set with setTabsContentGap().

Some code to get you started:

Tabs tabs = new Tabs();
tabs.setSwipeActivated(true);
tabs.setAnimateTabSelection(true);
tabs.setEagerSwipeMode(true);
tabs.setTabsContentGap(CN.convertToPixels(20, true));
tabs.setUIID("Container");
tabs.setTabUIID("Container");
tabs.getTabsContainer().setUIID("Container");
tabs.getContentPane().setUIID("Container");

And you can start filling your tab with:

tabs.addTab("", myContent);

Upvotes: 3

Related Questions