“On hand” SwiftUI of a mobile developer

Tram Ho

What is SwiftUI?

As we all know, Apple has released SwiftUI for a while now, and there are now projects that start using SwiftUI to develop apps (iOS 13+). So what is SwiftUI? SwiftUI is the framework introduced by Apple, which allows us to develop apps faster with the provided View (components). Surely before we are used to using Interface Builder to create UI, switching to UI code is more or less inconvenient. However, if we ever code another language in a declerative format (react native, flutter) then surely switching to UI code with SwiftUI would be a lot simpler.

SwiftUI and Interface Builder

We are all very familiar with using xib, storyboard to build UI. When custom View, usually we will create 1 xib file then create the desired UI, or button, cell … I think you will also recognize the problem I am going to talk about below:

  • Conflict source code in projects with multiple devs. When using xib, storyboard, we must have more or less encountered the need to fix conflicts in xib / storyboard files? Is it easy to fix this conflict? The UI is built with xibs / storyboard, which is essentially XML. So when fixing conflict, it is very difficult for us to read and correct it to avoid losing / UI errors. => With SwiftUI, we will be easier to solve conflicts. The reason here is that SwiftUI declares the View very explicitly, reads very understandably, is completely different from testing each XML stream as before.

  • For example, before we have a TableView inside the ViewController, after the layout is complete, if we do not drag the outlet into the ViewController (delegate / datasource), we will not be able to assign data / manipulate with that tableview. Or simply the lack of outlet from xib / storyboard to ViewController will cause a crash error due to Missing Referencing Outlets => SwiftUI we will not need to drag the outlet to ViewController to be able to manipulate anymore. With SwiftUI we will no longer have ViewController, Outlet. The UI will be checked again during the complie source process of Xcode.
  • Previously when creating TableViewCell we would need to assign identifiers to that TableViewCell, to identify the cell for reuse on tableView. As for SwiftUI, we will not need to care about it anymore. No need to lengthy assign identifier, register cell with tableview …. In addition, SwiftUI on Xcode 11 also provides UI preview function. Those who have worked with react native will surely love RN’s “Hot Reloading” or “Live Reloading”. Now, Xcode also has the same preview function. (Still a little lag ^^)

Familiarize yourself with SwiftUI

The transition from UIKit to SwiftUI will take some time for us to get used to the classes again. We are all familiar with UITableView. However, with SwiftUI we will no longer have UITableView , but instead will be List .

Here is a list of UIKit classes that have been replaced with SwiftUI classes that I have used:

  • UITableView => List
  • UICollectionView => This I have not seen there, now my solution is to use List List.
  • UILabel => Text
  • UITextField => TextField (if you want to use the secure text function, you will use SecureField)
  • UITextView => not available yet
  • UISwitch => Toggle
  • UISlider => Slider
  • UIButton => Button (Support available shadows, rounded corners ….)
  • UINavigationController => NavigationView
  • UIAlertController .alert: => Alert
  • UIAlertController .actionSheet => ActionSheet
  • UIStackView horizontal axis => HStack
  • UIStackView vertical axis => VStack
  • UIImageView => Image (Custom is now very simple ^^, support is available with rounded, shaded …)
  • UISegmentedControl => SegmentedControl
  • UIDatePicker => DatePicker
  • NSAttributedString => will also switch to using Text, because SwiftUI supports us very well custom ^^
  • UITabBar => TabView (But still having problems, not really as good as UITabBar.

ObservedObject, State, and EnvironmentObject

Surely anyone who has ever code React Native, Flutter will be very familiar with the State. In SwiftUI, we will also use State to manage the state of the View. The rule here is: when the state changes -> the view will be re-rendered. We will not need to manipulate directly with View as before, but now we only need to change the state. SwiftUI provides a lot of ways to store (state), as the title of this section I mentioned: ObservedObject, State, and EnvironmentObject . Let’s find out how they differ from each other?

First we will learn about State . Below I have a simple example of using State

In the above example, we declare an attribute named “age” and assign it the value of 18. When we initialize an attribute wrapped by State , SwiftUI will automatically manage the memory and ensure Make sure that this property persists until the View (ContentView) exists. In SwiftUI, all views are struct, so we cannot directly change them. So when using State, when the data is changed, SwiftUI automatically will re-render the View with the latest changed data. So State is a basic attribute, it is used exclusively for a specific View, and not used outside of that View (convention declares private). Perhaps you also wonder if there are many properties, Methods that need to be used in different views will use something, right? For this, we will use ObservedObject. Below we have an example:

For ObservableObject, we will need to pay attention to the ObservableObject protocol. We need to make sure the class we instantiate conforms to this protocol so that we can store and use data. Next, we need to make sure the properties inside the class are wrapped by keyword Published . Published it is to show SwiftUI that when the value of the property changes, the view will be updated again.

In addition, to use ObservedObject inside another view, we will need to declare that class and wrap it with keyword ObservedObject inside View like the above example. In the above example, when the age attribute inside Settings changes, the Text will also be re-rendered with the latest data. In addition, when declaring properties in ObservedObject, we do not need to declare private, this is different from State because the properties of ObservedObject can be used in more than one View. Surely when you read here you are thinking that using State and ObservedObject , you can complete the project, right? What about EnvironmentObject? As we have just shared, the State is used in a certain View, and ObservedObject is used for more than one View. As for the EnvironmentObject, it is similar to the State and ObservedObjects in terms of data management and rendering, but there is one difference that it will be able to share data across the entire app. And this object will exist until the app stops working. After we initialize this object, any View in the app stream can access its properties. Here is an example of creating and using EnvironmentObject

Here I have an ObservableObject initialization example, I named AppState, then this object is understood to store general data for the entire app. Next, after clicking a button I will proceed to change root view as follows:

In the above example, I initialized appState and assigned it to the environmentObject property of UIHostingController. This ensures that the UIHostingController’s View subs can use AppState’s internal properties. Next, to use appState, in child View, I will declare it as an attribute as follows:

In the above example, I declared an attribute named appState inside JokeDetailContentView. Now, if I change the selection attribute inside AppState, the views that are using the selection attribute throughout the app will all be reloaded with the values ​​I changed.

Simple example when creating UI using SwiftUI compared to previous UIKit

Previously, to be able to round an Image, View and then drop shadow, we would need to perform quite a few steps like setting layers … As for SwiftUI, these have been optimized, simple and The easiest to use as the example below:

In the past, setting a button has both a border, a round, and a shadow, we will have a problem with a shadow, to do it like before we will need to add the bezel to that button, or we will custom 1 Similar view with button.

As for SwiftUI, we can support this.

In addition, using List instead of TableView is also simpler and saves more time than before:

Code

Conclusion

This article I only focus on comparing SwiftUI with using Xib, Storyboard as before. Through the simple example I just presented above, surely you can understand and imagine how to use SwiftUI to initialize the View in the project. In SwiftUI, we have 3 important keywords that are State , ObservedObject , EnvironmentObject , I also shared above. If you know how to use these 3 keywords, we can easily apply it to projects to suit the problem. I would like to stop this article here, in the next article, I will dive into combining SwiftUI with Combine to complete a simple project.

Reference source

https://www.hackingwithswift.com/quick-start/swiftui

SwiftUI by Tutorials By Antonio Bello, Phil Łaszkowicz, Bill Morefield & Audrey Tam Copyright © 2019 Razeware LLC.” – Chapter 3, Chapter 7

Share the news now

Source : Viblo