How To Implement a Sticky View While Table View Scrolls; Like App Store app [Swift 3]

You surely noticed this in several apps already; A sticky view that stay at the top while you scroll down the screen. The “App Store” is one of the apps that uses this technique whenever you are visualising an app details.

So how to do this? Is it complicated?

In this tutorial, I gonna show you how to implement such feature for your app.

Without further ado, let’s do it ๐Ÿ™‚

Open up Xcode 8, select “File\New\Project” from the menu, choose the ‘Single View Application’ template and name the project ‘StickyView’, then save it.

Select Main.storyboard from the Project navigator view and make sure the device you are working with is the iPhone 6s, the same as mine. This is a preference choice and has nothing to do with the project results, at the end, you will produce a screen that fits all screen sizes.

Let’s start by adding a navigation bar to the view, the easiest way to do this is by embedding the View Controller inside a UINavigationController. Select the View Controller from the storyboard then select ‘Editor\Embed In\Navigation Controller’ from the menu.

Embed the View Controller inside a UINavigationController

Next, drag a UITableView object from the Object Library to the View Controller screen. Place it below the navigation bar and set its leading, trailing, top and bottom constraints to 0 from the Pin tool.

Drag a custom UITableViewCell from the Object Library to the table view and set its identifier to “CellID” from the Attributes inspector view.

Add custom UITableViewCell to storyboard

Before we go coding, let’s hook up the table view to the code. Switch to the Assistant Editor view and ctrl drag a line from the table view to the View Controller code. Name the Outlet “tableView” and hit the “Connect” button.

Hook up table view to the code

Nice, select the ViewController.swift file from the Project navigator view and make the following changes to the class declaration:

Locate the viewDidLoad method and set the table view data source and delegate to the current view controller, disable scroll view insets then set a default UIView as the table view header:

Next, let’s fill in some cells for the table view. Place the following code before the class closing bracket:

So far, you can build and run the project to make sure everything went correctly.

Let’s add the sticky view to finish up with your project ๐Ÿ™‚

Implement the following table view delegate protocol method before the end of the class:

Yes, as you notice, the sticky view is basically a header for a section in the table view. As the section header gets a fixed position while scrolling down the table, we took advantage of this to produce a similar technique that gets used in so many apps. Of course, here you used a segmented control as the sticky view, however you are free to use any kind of other UIView subclasses instead.

Build and run the project.. Oups, there is no segmented view in there!!

Don’t panic, we just missed something silly. Whenever you provide a view for header in table view sections, you have to explicitly tell the table view about the header height.

To do so, add the following statement inside the viewDidLoad method:

Here you just tell the table view delegate to draw headers with a height of 40 pixels.

That’s it, run the project and enjoy your sticky view ๐Ÿ™‚

As usual, download the complete project source code here.

Comments, feedback, feel free to leave below. I’d love to hear your thoughts!

About Malek

Malek is a passionate iOS Engineer and Founder of Medigarage Studios, a small mobile games startup. I started my iOS adventures in 2011 and since then I fell in love with it. You can hire me for your project, get in touch by Email to discuss further details. Also, feel free to reach out on Twitter and Google+.

  • Julien Sanders

    This is great! However, a question:

    How can I switch table views using the segmented control (without reloading the table)? The approach i’ve usually seen is to embed the table views inside a view, then let the segmented controll change the opacity of the views. I can’t see how this would work when applied to what you’ve done.

    Many thanks!

  • Eben

    Hi, Just compiled your project and it is not working. The red view is not sticky, it scrolls down. Can you please check?

  • Malek_T

    Hi Eben ๐Ÿ™‚
    The red view is not meant to remain sticky. Only the segmented part is sticky when you scroll down the table view. I just re-downloaded the project and ran again, it’s working like a charm!

  • Eben

    My fault. I didn’t paid attention to the segmented view