2

I am new-ish to iphone development and I am trying to figure out how I can fix a view after it has reached a the top of the screen when a user scrolls a window. Then the view would unlock when the window is scrolled down again to go back to its original position. Ive seen this on on a few apps like instagram (with the user name separators).

Does this design pattern have a specific name?

An example (not iPhone though) can be seen on http://mashable.com/ -- Look at "The New Stuff", "The Next Big Thing", and "What's Hot" bar. See how it locks as you scroll down

thunderousNinja
  • 3,510
  • 9
  • 37
  • 49

2 Answers2

2

My solution for you is

  1. create a UITableView
  2. create a UIView separately which will be used as fixed table header
  3. setup the table's tableHeaderView property to conform the UIView's frame
  4. as UITableView is inherited from UIScrollView you can rely on scrollViewDidScroll method in which I properly adjust my fixed header as Y coordinate changes when scrolling the table.

There can be other similar solution for this too but a strenght of this particular solution is that you can manipulate the fixed header's gui element throughout the scrolling easily.

An example is always better than writing down the details so I created for you (and hopefully for others here at SO) a sample project (of course quick'n dirty), which you can find here at github: https://github.com/codedad/SO_Fixed_TableHeader_iOS

nzs
  • 3,252
  • 17
  • 22
  • Thanks for the code example. But in this example the view is always the first element, fixed header... In my explanation I want it to be more down the view, say the third element. – thunderousNinja Jul 18 '13 at 15:20
  • It is up to your requirement where you want this header locked, because 1) you have to implement tableView:viewForHeaderInSection to assign eg. the 3rd section a custom view 2) modify properly my example, especially scrollViewDidScroll where you have the only possibility to change something on the view according to the scrolling. Currently I dont have more time but after holiday ;) I try to modify my example.. – nzs Jul 18 '13 at 15:51
0

If I'm correct, you're trying to achieve something like the UITableView in the Contacts app?

It uses the sections of the UITableView for the sorted letters and displays them always on top.

Have a look a this question and create custom section headers.

Community
  • 1
  • 1
wkberg
  • 391
  • 2
  • 12
  • I've added that you can create custom sections using [this](http://stackoverflow.com/questions/15611374/customize-uitableview-header-section) – wkberg Jul 17 '13 at 21:26