1

I really like the idea of StickyHeaders (https://www.codenameone.com/blog/sticky-headers.html), they're great for usability, but the CN1 implementation was never fully developed or included in CN1. Solutions exist for iOS and Android (https://github.com/emilsjolander/StickyListHeaders and http://applidium.github.io/HeaderListView/).

The two main features I'm missing in the old implementation are: that each header visually 'pushes' the previous out of the top of the screen (and vice-versa when scrolling down), and that the stickyheader which is 'stuck' at the top of the screen is the actual stickyheader itself, so that eg. buttons inside it will work.

Are there any plans to add this to CN1 sometime soon? Or anyone who has implemented a similar solution (I tried Chibuike Mba's alternative implementation mentioned on the original blog post but it doesn't cover the features I'd like)?

Alternatively, any pointers to how I might implement this myself?

I've already tried a couple of times, but given up since I don't master the details of CN1 graphics etc well enough. The approach mentioned here How to make sticky section headers (like iOS) in Android? sounds like a good approach (add a container on top for the stickyheader, scroll that container when the next stickyheader arrives), but then how to force the size and scrolling of such a container?)

user1246562
  • 825
  • 5
  • 7

1 Answers1

0

This should be much simpler to implement today as we have two helpful features:

  • Scroll listener
  • Layered pane

You can use the scroll listener to detect the location of a header and appropriately place another component in the NORTH of a Container within the layered pane. Then as scrolling happens and you detect a new header is coming in you can just place it in an X/Y position below the existing component and use animateLayout to push it out.

Shai Almog
  • 51,749
  • 5
  • 35
  • 65
  • Thanks, I will give it a try. Which method do I need to use to place the additional header in the appropriate X/Y position (below the header which is still shown) so that the earlier header is gradually pushed out as the user scrolls further up? Btw, I assume that I shouldn't use animateLayout if I want the user's scrolling motion to control the 'push out'? – user1246562 Feb 11 '21 at 22:25
  • You can use a `BoxLayout.Y_AXIS` within the title area so you can just place both of the components there. It might make sense to have a custom layout that will allow you to place half a component in the screen... – Shai Almog Feb 12 '21 at 04:40