DEV Community

Deepak JOSHI
Deepak JOSHI

Posted on

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.

1_HgS7rdj9OyP2qOu39hexLw

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.

1_YhDdZ93R63r7nluEjQ2eWg

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.

1_6M8RaTzO7o1W_UghJFXXkg

Here is the preview of ContentView.swift

1_m8yYmaqh5RIXcIhquY5RGw

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.

1_SBsgJmVs3qS3z06zPsI3TA

Here is the preview.

1_LQLM5w06cGMheqSJCtngFg

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.

1_upTPbI-kdpPcJR5820N-tw

Here is the preview.

1_k9SXHyEQfjZT1tGKtnx7lg

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

1_rIFhK3VN1w55DG-_r7q1WA

Here is the final Preview in Light Mode and Dark Mode

1_xs2CuaPOtdYMj1ccr1YbYw

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

Top comments (0)