Recreating Whatsapp UI with SwiftUI [Settings Tab]

TL;DR: Source code is available on GitHub. https://github.com/deepak-pro/whatsappSimple-SwiftUI.

Learning a new framework is always exiting but following a proper tutorial path over a month is pretty boring and to learn something quick the best approach is to create a project. In the case of SwiftUI, I can guarantee the excitement is on another level. The simplicity of SwiftUI allows us to develop the user interface quickly without even thinking about layout and constraints

So let’s create a project.

I want to keep this blog simple and quick just like SwiftUI, so we will not waste our time revising how to click on File > New > Project .. Blah… Blah… Blah… But wait remember to select SwiftUI as Interface.

Image for post
Image for post

To develop UI of the settings tab of Whatsapp. We need to learn about some Views of SwiftUI:

Enough explanation, Now let’s jump right into coding.

Creating a Tab Bar

TabView is used to create a tab bar. Here we are only creating one tab.

Image for post
Image for post

To keep things organized, we will create a new SwiftUI View for settings. (As we are using TabView and there can be many views). Name it as SettingsView.swift. Also replace the Text(“Hello, world!”) with SettingsView().

Creating NavigationView

Now we will create NavigationView with modifiers to set navigation title and a button for QR code in navigation bar items.

Image for post
Image for post

Here is the preview of ContentView.swift

Image for post
Image for post

Creating a Form

Form in SwiftUI helps up to group views systematically. First Section to group profile picture name and about. I have imported an image named profile in Assets.xcassets.

Image for post
Image for post

Here is the preview.

Image for post
Image for post

As you may have noticed, We have used VStack to group the name and about text view vertically and profile picture view and Vstack horizontally with HStack. Similarly, we will create more sections for different settings options using HStack to group image and text.

Apple has provided us free symbols (SF symbols) so that without importing any other assets we can use them as icons in our app. These symbols have a unique name called systemName.

Image for post
Image for post

Here is the preview.

Image for post
Image for post

Similarly, we will add more sections the same as of Whatsapp app.

Image for post
Image for post

Here is the final Preview in Light Mode and Dark Mode

Image for post
Image for post

The best thing about SwiftUI is that we only need to tell what to put where and in which order on the screen. SwiftUI takes care of all the constraints and layout.

Thanks for reading.

LinkedIn — https://www.linkedin.com/in/deepakjoshipro/

GitHub — https://github.com/deepak-pro

Twitter — https://twitter.com/0xjoshi

Written by

iOS Developer | Computer Security Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store