What is SwiftUI?

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift.

SwiftUI uses Declarative approach to design the UI. Which means your code is simpler and easier to read than ever before, saving you time and maintenance.

Why SwiftUI is Better?

SwiftUI provides an awesome feature for you like Declarative UI, Easy Localization, Easy to add Dark Mode support, Easy Animation, Accessibility Native on All apple platforms(iOS, iPad, macOS, watchOS, tvOS). So you can more focus on your App-specific feature than basic features.

How we can integrate into our App?

Without giving more explanation about SwiftUI, we move to implement one Social application so you can get more idea about SwiftUI.

So the above screens are a target for us, And we have to achieve with SwiftUI. Then let’s start the drive and go for an awesome journey.

First, open Xcode 11 and create a new project with whatever name you want to assign, Don’t forget to check Use SwiftUI checkbox otherwise it will create normal Xcode project and click on Next

image (2) — New Project

You can see the newly created project with some swift files. Now you can see ContentView.swift file, just click on and you can see some template code. You can consider this ContentView struct as your application’s entry point.

Because we pass this ContentView in our SceneDelegate’s method as rootViewController to UIWindow as like we did in AppDelegate.

Now we first lookout at our app and determine the functionality, So as per screen we have horizontal Stories and vertical Post as like we have in the Facebook application. therefore we are preparing the Story and Post Model and data for the app.

Story.swift

Post.swift

Now we are going to design our screen, as we did by creating ViewController earlier. But the difference is we are taking Container here. We are putting all our view inside the body, and all our code is wrapped inside the body which is View type computed property. Also, we had to take our data source posts and stories here. We can use it later.

Below is a simple example with Hello World text, and we can preview this code using PreviewProvider

Output of ContentView

Now if we want to add NavigationBar we have to wrap the Text inside Navigation Container, In SwiftUI we have NavigationView

Text with NavigationView

Now we are going to create the StoryView first. For that, we have to find the last element of the Story view. We can consider this view as horizontal UICollectionView and each view inside is cell. So we start designing by like this as we did before.

StoryView

So below is the code to design the particular StoryView Cell,

Story image(1.1) and Story name(1.2) are arranged in Vertical position, So VStack (1) is better for this Now we have Circle shape(2) and User avatar (3) overlapped on Story image so for that, we are considering ZStack element to achieve this.

Now our one cell design is ready. we can put it inside a List as we did in table view or collection view.

StoryView Cell

You find many functions chaining with controls like Image, Text, Button, etc. We called these function as a view modifier because they modify the view appearance.

Now we can create the Horizontal list for stories, Stories are in the horizontal direction, so we are taking HStack, but we also need ScrollView to throughout the whole list. Also, we have Trending text above story list, and we are arranging text and list into VStack.

To iterate through all Stories we use ForEach structure, it will compute views on demands for the given collection of identified data. We have to pass content in ForEach, So our StoryListCell will passed here. Now you might understand how we created the Story list using ForEach.

Horizontal Story List

Now we are going to design the Post View for that, We again find the last element in-depth of the view hierarchy. So above postview item is our core view for Post view list. In the view we have user avatar, name, post time, post title, and image of the post.

PostView item

We start from an outer arrangement of view because as you see in the layout

User info(1), Post title(2), and Post image(3) are aligned in Vertical, So we take VStack for that. Avatar(1.1) and Name(1.2.1), Post time(1.2.2) pair are aligned Horizontally, So HStack should be here. And again Name(1.2.1) and Post time(1.2.2) are aligned Vertically, So simply VStack is required.

PostList Cell

Now we can add this PostView Cell to List so we get a list of posts as we did for Story List, but the difference is we are arranging the post in vertical scroll.

Now we have Story list and Posts in vertical alignment as see in the image(1). So we thought VStack is best for this. But not, We have to make this whole view scrollable, so we have to think for another layout container. And the option is List itself.

Code — Combine views in List

Using List, We can combine multiple views inside List to make it scrollable (if it’s content size is exceed than screen). In Above code, we combine VStack (1.1) and Post list(1.2) into List.

Combine views in List

But slightly we need some separator between stories and posts, therefore we can use section as we did in UITableView, Section is used to make view hierarchy more affordance.

List with Section

Finally, we achieved our target, but this is not the end yet. we can add more feature into this app, like Localization, RTL support, Dark Mode.

Finally Achieved

Localization is a tricky task for every app when we are going to implement the inside application. But SwiftUI just takes a chill and implement easily😎

Just add new string file named Localizable.strings, and localize file with multiple languages, here we take 2 language, so we add the hardcoded string used while development in these string file with values.

Localizable.strings (English)

Localizable.strings (Arabic)

It’s Done, Yeah you can clap for that, Amazing Right!

So Easy

Now let’s check the different preview of Localizations, for that we have to set the environment variable as like locale, layoutDirection. And also if we want to more than one preview, we have to group them using Group structure.

Arabic Localization with RTL support

Now, what if want adds Dark mode accessibility in the app, it’s a very tricky task in previous methods, But with SwiftUI we have Semantic Color support, so it’s now easy for to implement Dark Mode in the app.

Dark Mode Support

Summary

So far, we had implemented the Declarative UI using SwiftUI, Different SwiftUI components, Localization, Dark mode. And also we learned how we can adopt SwiftUI into our development process.