Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: KamiKaze425 on March 04, 2014, 03:19:37 PM

Title: Dynamic Sticky Headers
Post by: KamiKaze425 on March 04, 2014, 03:19:37 PM

Hey guys,

So I'm trying to mimic the Contacts on iOS and Android. Where there is a sticky header at the top representing the letter of the alphabet, but it changes as you scroll.
Here is a random video someone posted a while back:
https://www.youtube.com/watch?v=eikTReAyXBc

Any tips on how to mimic this with NGUI? I've tried searching and couldn't come up with much.

Title: Re: Dynamic Sticky Headers
Post by: Nicki on March 04, 2014, 04:14:42 PM

That's a little tricky. Either you have to counter-move the header when the scrollpanel moves, or pull the header out of the scrollpanel and attach to a different static panel when it enters the "Stick to top" state.I'd probably go with the first one.

Title: Re: Dynamic Sticky Headers
Post by: KamiKaze425 on March 04, 2014, 05:46:04 PM

So I did some funky math since I have a limited amount of headers and the number of headers are small enough that I was able to hardcode it (anywhere from 2-4 headers).
I created one UIPanel with soft clip that had the headers in order with no gaps. This was the sticky header overlay.
Then I created another panel with a grid for all the items in the list. I attached a script that basically shifts the sticky header panel depending on the position of the headers in the grid. Ratios and stuff to get the positioning right. I'm hoping to come up with a cleaner method.
Still looking for suggestions.