iOS App Development iOS Swift Tutorial iOS9 Swift2 Uber

Build your own Uber app in Swift

In this month’s tutorial we will be building the  uber user side app.
The key concept you will be learning are

  • CoreLocation
  • MapKit
  • Custom Views

Before we start lets go to the Build Phase and add CoreLocation and MapKit framework to our app. Also make sure your application allow location simulation.

Screen Shot 2015-08-05 at 7.30.02 PM

Screen Shot 2015-08-05 at 7.31.13 PM

To begin with let’s create a new project. Select the ViewController on the Mainstoryboard -> go to embed in -> Navigation Controller. Now we can start adding all the necessary UIKit elements to the storyboard.

First thing is to create a new Image Asset for the location icon. I personally use Icons8 App for all my icon needs.

  • Select Assets.xcassets
  • Click on the + icon and drag the location icon on to the 2x and 3x assets
  • Screen Shot 2015-08-04 at 7.07.09 PM

 

At this point lets go ahead and drag a MapView onto the ViewController in the mainstoryboard. With the mapview selected set the autolayout constraints to 0 on all sides and update the frame if required.

Screen Shot 2015-08-04 at 7.13.11 PM

 

Now drag a UIView on to the view controller to the top just below the Navbar and set the autolayout constraints as shown in the image. Make sure you add the height constraint for the UIView. Within the UIView drag a label and set the constraints for the label as shown in the image below.

Screen Shot 2015-08-05 at 7.15.20 PM

Screen Shot 2015-08-05 at 7.15.34 PM

 

Now for showing the reference point lets drag a UIImageView of 45 X 45 and set the image to the location icon which we imported before

Screen Shot 2015-08-05 at 7.15.55 PM
Also lets drag a UIButton for the requesting the pickup at the bottom.

Screen Shot 2015-08-05 at 7.15.46 PM

 

 

If you go ahead and run the application we will get a simple view with a default address , a mapview and a button.
If you prefer watching a video take a look at the video below. Also once you are done with the part 1 make sure you checkout the Part 2 of building an uber app in Swift

About the author

Shrikar

Backend/Infrastructure Engineer by Day. iOS Developer for the rest of the time.

  • Romk1n

    A bit disappointing since a lot of the steps are missing. I.e it would be good to mention to download icon8 app from the mac app store rather then simply direct to the website. or how did label got into the storyboard before the map view ?

    The intro doesn’t make sense, before we start add … to your app. after screenshots … let’s create a new project.

    • http://shrikar.com shrikar

      Romk1n I tried to make it as clear as possible .. Will see if I can make it better next time.

      • Quietus

        Are you going to rewrite this?

    • http://icons8.com/ Uliana

      Hi Romk1n, I’ll stand up for Shrikar regarding the Icons8 App: somehow its version on our website is much newer than the one in the App store. So, redirecting to our website was not a bad decision :) Cheers, Uliana from Icons8

      • http://shrikar.com shrikar

        Hey Uliana thanks. Just curious to know how you came to know about this site? Was it a referrer in Google analytics? :)

        • http://icons8.com/ Uliana

          No prob. I monitor websites who mention Icons8 through web.mention.net, and that’s how I found your blog. Btw, if you ever need any icons supply for your tutorials, let me know, we’ll see what we can do :) My email is uliana@icons8.com

  • DanK

    If I follow these steps, my navigation bar is white. How did you make yours dark like Uber?

  • Leticia

    well, is always great lean something new, but the real Uber app have more, could you also show us how to do it?

  • Leticia

    Again, as a Uber and Lift, they program have more steps that you don’t show us, could you show us in a new video?

  • http://mustafahasturk.com Mustafa Hastürk

    Please provide a link to download whole project files.

  • John Naisbitt

    What program are you using to build the app? How can I receive it?

  • Alex Riios Cardoza

    Where can i found the source code?

  • Tahir Khan

    Hi Shrikar Can you build similar uber app for me. and how much you will charge. pls. contact me dikhan@gmail.com skype tahirtask

  • Manny Mansoor

    I like this article so much. It inspired me to surf the web for simillar ones. Check this out https://thunderrise.com/blog/how-to-build-a-mobile-taxi-app-like-uber

/* ]]> */