Using StickyHeaderContainer to create 'collapsable' list sections is great, but I'm stuck with a tricky edge case

[ThomasH99]

Hello, I'm very happy with the addition of StickyHeaderContainer which it a great plus for the readability of long sorted lists.

I've used it to create 'collapsable' containers (so you can collapse the sections under a sticky header if the content is not relevant). The code below extends the CN1 example code and it works overall quite well. E.g. you can collapse and expand any visible section.

But there is one edge case which I haven't found a solution for:

If you scroll up the A section half-way (so you can see the 'stuck' A header and a few of the A entries, screenshot 1 below) and then collapse A, it will keep the scroll and then show the B entries under Header A (screenshot 2).

What I would like to happen is that header A stays visible and that Header B scrolls up just below Header A (screenshot 3). This is what you'd expect when all A entries are hidden.

I've played around with all kinds of solutions, using notably manipulating the 'scroller' list but I haven't found anything that actually works.

Anyone who can see way to achieve this?

---

---

---

---

                Form form = new Form("Test collapsable StickyHeaderContainer", new BorderLayout());
                StickyHeaderContainer sticky = new StickyHeaderContainer();
                sticky.setName("StickyHeaderContainer");
                sticky.setTransitionStyle(StickyHeaderContainer.TRANSITION_SLIDE);
                for (char c = 'A'; c <= 'Z'; c++) {
                    Button header = new Button("", "StickyHeader");
                    Container items = new Container(BoxLayout.y());
                    sticky.addSection(header, items);
                    for (int i = 0; i < 5; i++) {
                        items.add(new Label(c + " entry " + i));
                    }
                    char finalC = c;
                    header.setCommand(Command.createMaterial("Header " + c + " - tap to hide ", FontImage.MATERIAL_EXPAND_LESS, (e) -> {
                        items.setHidden(!items.isHidden());
                        header.setText(items.isHidden() ? "Header " + finalC + " - tap to show " : "Header " + finalC + " - tap to hide ");
                        header.setMaterialIcon(items.isHidden() ? FontImage.MATERIAL_EXPAND_MORE : FontImage.MATERIAL_EXPAND_LESS);
                        items.getParent().animateHierarchyAndWait(300);
                    }));
                }

                form.add(BorderLayout.CENTER, sticky);
                form.show();

[shai-almog]

Doesn't it make more sense to use an accordion for that? I think you want a large accordion that is expanded by default and shows the current entry when it's scrolled out. Not sticky headers.

[ThomasH99]

Thanks, I looked at Accordion at some point, but accordion headers won't 'stick' which is the main benefit I'm after (so you always know which section of a long scrollable list you're in). The 'collapse' is a (significant) plus on top of that to hide the content of irrelevant groups. I could maybe live with the issue, but I like to achieve 'Apple' quality if I can :-)

[shai-almog]

Won't it be simpler to add a sticky header feature to accordion than to try and get sticky headers working as if they're an accordion?