Recreating Spotify’s Artist/Album UITableView.
It’s hilariously simple.
So, a couple of months ago, I completed the “iOS development in Objective-C” course on treehouse. Since then, I’ve been continuously trying to advance my skills by emulating controls I’ve found on various apps. One little UI touch I was inspired by recently was Spotify’s Artist/Album page. Here’s a gif to show what exactly I’m talking about:-
So, I’ve implemented the “zoom on overscroll” effect before in a UIScrollView (my own app for the internet.org innovation challenge, Learnhut). This link on StackOverflow is exactly what I followed for this effect
That covers the overscroll-to-zoom effect pretty well. We also have the profile photo disappearing to reveal a cover photo. As for the blurring, a trivial way would be to add a UIVisualEffect Blur view and then change the alpha value (Core Image is kinda overkill, plus you’ll have to re-render the image with a different blur radius). Though this isn’t even close to the method I used, I’ll provide a link to the code here.
Now, to recreate the Spotify app UI. A little bit of duckduckgo-ing(thanks to my friend Archit), and I’ve found a library to do it. Cool.
Though I’m all for libraries, this one doesn’t really provide everything I need. Time to get down and dirty.
My first intuition was to do something with a UITableViewHeader. After pouring through Apple’s documentation, I gave up and decided to go through a little bit of matteogobbi’s code. And then, the solution struck me.
Why not have a transparent section at the top(which will scroll upwards anyway), of equal size and the same position as the image? When the user scrolls upwards, the next section(that contains the actual tableView content) eclipses the UIImageView, and we can keep the regular zooming mechanics. Now, down to code!
First, lets initialize the image view and the table view
It’s mostly boilerplate code, just be careful to remember the height of the image and the y-coordinate of the tableView. We’ll need it later.
Now, for the table view delegate code.
The code is pretty much default table view code, except I’ve added a case for the first section(indexPath.section==0). This is specifically for the transparent section that will scroll over. It’ll have one row(for simplicity), a height of 330–80=250(height of the image- offset). It’ll also have no text and a clear background colour.
Finally the zoom-on-overscroll code:
So, a 100 lines of code total and our UI is a lot better. Here’s the final project in case somebody wants a look.
PS: I’m open to exploring and reverse engineering more User Interface controls. Put up a note/comment here and I’ll do my best.
PPS: I’m looking for internships/jobs as an iOS developer in the near future. In case you’re interested, here (it’s a mailto: link)
