Zrzut ekranu 2014-12-20 o 12.27.08

Table View on top of Map View – Swift Implementation

Dawid Cedrych
Follow me
Dawid Cedrych
Follow me

Latest posts by Dawid Cedrych (see all)

Implementing scrollable Table View on top of Map View would surely make UX/UI of your app more abundant.

I’ve been searching for some extraordinary way to present Table View and Map View altogether. After some minutes of googling I encountered a cool blog post with the idea I was looking for. That was Table View on top of Map View. However, it wasn’t sufficient for me due to objective-c implementation, I needed Swift one.

The original post is available here, I highly recommend to go through it before further reading. I decided to point out differences between both implementations instead of explaing the code from scratch.

 

Concept

The idea is to make the scrollable Table View cover the map. In practice it looks like two layers where Table View is the upper one.


Zrzut ekranu 2014-12-19 o 16.58.45                      Zrzut ekranu 2014-12-19 o 16.58.24

View Controller

 

There are two main things above worth to be mentioned. First of all, the following line

is added in viewDidLoad() method. This is just one of two possible solutions, creating cell manually in storyboard and naming it “cell” would produce the same result.

Then take a look at optionals, which are used in the last method. Swift involves optionals when declared variable might be evaluated to nil. It happens to avoid potential runtime errors. Optionals are quite ambiguous at first contact, so I will briefly explain what is going on. “?” sign denotes the optional type which could be evaluated either to any type or to nil. Exlamation mark is responsible for unwrapping the optional, which means forcing to retrieve the value. If you would like to get a deep understanding of optionals, I suggest checking out this blog post. Frankly, it’s way better than apple docs.

 

Custom UITableView class

Acutally nothing special has changed here except the init function. It’s simply no longer needed, so the custom class become even shorter than it is in objective-c.

 

I’d like to thank Basar Akyelli for being an author of the original implementation in objective-c. My role was just to convert the existing code into Swift and apply it for my needs. If you want to download the project, it’s available on github.

 

Dawid CedrychTable View on top of Map View – Swift Implementation
  • http://www.verdanths.com/blog Anticia

    Great tutorial. I’m getting this error:

    fatal error: unexpectedly found nil while unwrapping an Optional value

    at the following line:

    self.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: “cell”)

    I’ve created and set the outlets for the table delegate and datasource in IB, and tried numerous workarounds. Can you help me understand how to fix it? Thanks.

    • Dawid Cedrych

      That’s weird, did you download the project from github? If yes, is the error there?

  • darumasim

    thanks a lot for this tutorial . i have been searching for this for a week already .

    one question , when i run your code from github , the startup page with tableview fully covered , the maps is not visible at all . is there any solution i can keep map and tableview both visible , which is better for user .

    thanks a lot

    richard mao

    • Dawid Cedrych

      Yeah, in sample project the tableview covers the whole view up to the top. Modify the size of tableview in storyboard. Try shrinking the vertical size and that’s it. If you want to add constraints, pin the top of tableview to the center of the view, or hardcode the height. Generally, play with tableView size. Hope this helps :)

      • darumasim

        thanks a lot for the reply !!!

        • Dawid Cedrych

          did that work for you? :)