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

Question

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

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

我需要的主要功能(与标准水平滚动不同)是，只有当手指移动超过给定的水平空间时才能滚动容器 (我们可以假设20mm)，否则Container将恢复到滚动之前的位置(就像Instagram一样)。

此外，如果滚动被“接受”(即超过 20mm)，Container 将自动水平滚动，以使内部组件在水平空间的左侧完全可见。

示例:

假设我有一个包含组件 A、B、C 的容器(使用 BoxLayout.x())，并且假设 A、B 和 C 的宽度等于屏幕宽度的 75%。

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

所以，经过这种水平滚动后，A将不可见，B完全可见，C仅一小部分可见。

有没有建议使用 Codename One 来实现此行为(如本示例)？谢谢

Answer 1

您需要将 Tab 的 swipeActivated 设置为 true。 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);