Author Topic: Dynamic Sticky Headers  (Read 2995 times)

KamiKaze425

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 6
    • View Profile
Dynamic Sticky Headers
« 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.

Nicki

  • Global Moderator
  • Hero Member
  • *****
  • Thank You
  • -Given: 33
  • -Receive: 141
  • Posts: 1,768
    • View Profile
Re: Dynamic Sticky Headers
« Reply #1 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.

KamiKaze425

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 6
    • View Profile
Re: Dynamic Sticky Headers
« Reply #2 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.