像代号一中的 Instagram 一样水平滚动

Question

在我的 Codename One 应用中，我不需要与 Instagram 相同的水平滚动，但在某些方面类似。

请看这个视频，它显示了 Instagram 中的水平滚动： https://www.informatica-libera.net/videoLavoro/instagramScrolling.mp4

我需要的主要功能（这与标准的水平滚动不同），是仅当手指移动超过给定值时才能够滚动容器horizontal space （我们可以假设20mm），否则Container会恢复到滚动前的位置（就像Instagram那样）。

此外，如果滚动被“接受”（即超过 20mm），Container 将自动水平滚动，使内部 Component 在左侧完全可见横向 space.

示例：

假设我有一个包含组件 A、B、C 的容器（带有 BoxLayout.x()），并假设 A、B 和 C 的宽度与屏幕宽度的 75% 相同.

因此，在应用程序启动时，A 完全可见，B 仅一小部分可见，C 不可见。我需要像 Instagram 这样的滚动，如果接受 （滚动超过 20 毫米），则使 B 在 A 的相同位置完全可见 （否则它会撤消滚动).

所以，这样横向滚动后，A不可见，B全部可见，C只可见一小部分。

任何关于使用代号一实现此行为的建议（如本例）？谢谢

Answer 1

您需要将 swipeActivated 设置为 true 的 Tab。 Tab 的唯一缺点是您不能仅将一侧设置为可见。左侧和右侧都将设置为可见。

根据您上面的类比，当 B 完全可见时，A 和 C 的一部分都将可见，只是您使用 setTabsContentGap() 设置的大小。

一些入门代码：

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");

您可以开始填写标签：

tabs.addTab("", myContent);

像代号一中的 Instagram 一样水平滚动

Horizontal scrolling like Instagram in Codename One

codenameone