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

【问题标题】：Horizontal scrolling like Instagram in Codename One像代号一中的 Instagram 一样水平滚动
【发布时间】：2019-04-05 08:16:12
【问题描述】：

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

请观看此视频，该视频显示 Instagram 中的水平滚动： https://www.informatica-libera.net/videoLavoro/instagramScrolling.mp4

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

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

示例：

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

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

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

任何建议使用代号 One 来实现此行为（如本例中）？谢谢

【问题讨论】：

我认为@Diamond 的提议可能是最好的方向。您还应该使用 hideTabs，因为您似乎不想显示这些。目前我们不支持显示下一个标签的位，但如果标签在其他方面是正确的方向应该是可行的

标签： codenameone

【解决方案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);

【讨论】：