根据滚动条隐藏和显示工具栏 [英] Hide and show the Toolbar according to the scrolling

问题描述

此问题仅指代号一个。

我需要移动代号一个表单的工具栏，如下所示视频：
https://www.informatica-libera.net/videoLavoro/ hideShowToolbarOnScrolling.mp4

I need to make the Toolbar of a Codename One Form moving as shown in this video: https://www.informatica-libera.net/videoLavoro/hideShowToolbarOnScrolling.mp4

如您所见，向上滚动导致工具栏逐渐消失，而向下滚动导致工具栏逐渐重新出现。

As you can see, the scroll up causes the Toolbar to gradually disappear, while the scroll down causes the Toolbar to gradually reappear.

像 https://stackoverflow.com/a/55856590 这样的解决方案是不适用，因为我不需要更改工具栏的UIID，但需要在滚动过程中上下移动工具栏，以获得与视频中所示相同的效果。

A solution like https://stackoverflow.com/a/55856590 is not applicable because I don't need to change the UIID of the Toolbar, but I need to move the Toolbar up and down during the scroll, to get the same effect shown in the video.

推荐答案

这是我们在工具栏的whatsapp克隆应用程序中采用的方法，因为这就是whatsapp的确切行为。还有更多的东西，但是该块包含实现此目的的大多数逻辑：

This is the approach we took in the whatsapp clone application for toolbar as that's the exact behavior of whatsapp. There is more to it but this block contains most of the logic that implements this:

private void bindFolding(Container titleArea, int titleHeight, 
        Container... scrollables) {
    addPointerReleasedListener(e -> {
        if(titleArea.getHeight() != titleHeight && 
                    titleArea.getHeight() != 0) {
            if(titleHeight - titleArea.getHeight() > titleHeight / 2) {
                titleArea.setPreferredSize(null);
            } else {
                titleArea.setPreferredH(0);
            }
            titleArea.getParent().animateLayout(100);
        }
    });
    for(Container c : scrollables) {
        c.addScrollListener((scrollX, scrollY, oldscrollX,
            oldscrollY) -> {
            // special case for tensile drag
            if(scrollY <= 10) {
                titleArea.setPreferredSize(null);
                return;
            }
            int diff = oldscrollY - scrollY;
            if(diff > 0) {
                if(titleArea.getHeight() < titleHeight) {
                    titleArea.setPreferredH(Math.min(titleHeight, 
                        titleArea.getPreferredH() + diff));
                    titleArea.setHeight(titleArea.getPreferredH());
                    titleArea.getParent().revalidate();
                }
            } else {
                if(diff < 0) {
                    if(titleArea.getHeight() > 0) {
                        titleArea.setPreferredH(Math.max(0, 
                            titleArea.getPreferredH() + diff));
                        titleArea.setHeight(titleArea.getPreferredH());
                        titleArea.getParent().revalidate();
                    }

                }
            }
        });
    }
}

这篇关于根据滚动条隐藏和显示工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！