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.

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

1. TabView: For creating Tab Bar
2. NaviationView: For creating a Navigation bar with title 1. and bar button items.
3. Form: To create different sections.
4. HStack: To group views horizontally.
5. VStack: To group views vertically.
6. Image: To display an image.
7. Text: To display text.
8. Button: To create a button.

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.

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.

Here is the preview of ContentView.swift

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.

Here is the preview.

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.

Here is the preview.

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

Here is the final Preview in Light Mode and Dark Mode

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
GitHub
Twitter