3

When you go to the native iOS Music application you will notice a very cool effect when viewing an Album.

It seems like the view is a UITableView that has a transparent UINavigationController and when you scroll up, the first row of the view fades away and into a navigation bar with the album title.

What is actually going on here and is there a known framework that does this?

Animation Step #1 Animation Step #2 Animation Step #3

MiMo
  • 4,905
  • 3
  • 22
  • 23

2 Answers2

1

I didn't find any component for this, so I tried to implement something myself.

Basically, I setup a custom header view in the storyboard and constrain it to the navigation bar, with an outlet to the constraint.

Then in the scrollView delegate, I adjust the constant value of the constraint and the alpha of the header and nav bar title, based on the scrolled amount and the contentOffset of the scrollView.

I put up an example project here:

https://github.com/ale84/CustomTableViewHeaderExample

ale84
  • 1,406
  • 12
  • 16
0

There are a few things at play here.

If I were to implement this, I would first set an observer in my UITableViewController subclass, observing the UITableView. More specifically observing the y position of the tableview or the currently first exposed indexPath. The header view (the album art, sharing, favorite, ect) would then animate in correlation of the y position. The alpha of the header view changes here as well. Also changing; how much of the header view is exposed to the user. The headerview is a property of the UITableviewController, which can be manipulated as the animation progresses. The rate of change could be deduced by a UIGestureRecognizers velocity (a tip on that here: Implement velocity in custom UIGestureRecognizer).

As for the navigation bar, I would set the album name as the nav bar title (on presentation) but keep it hidden. When the animation is complete (the y position is above a certain threshold), set the title of the nav bar to not be hidden.

Community
  • 1
  • 1
BenJammin
  • 1,479
  • 13
  • 18
  • Thanks @BenJammin Im pretty much on the same page with what you said, except I was going to use the first table row as the header, but as you mention using the tableview header view is much better. But this is a lot of manual work... Im just surprised no one built a library that does this. – MiMo Apr 05 '16 at 19:20
  • You won't need an observer on the tableView, the callbacks are there in UIScrollViewDelegate (which UITableViewDelegate inherits from) ;) – Jef Apr 05 '16 at 19:52