Create UIKit View in SwiftUI

SwiftUI is Apple’s brand new framework for building user interfaces for iOS, tvOS, macOS, and watchOS. Apple introduced SwiftUI in 2019 and the framework has been evolving at a rapid pace ever since.

Declarative syntax

SwiftUI uses a declarative syntax, so you can simply state what your user interface should do. For example, you can write that you want a list of items consisting of text fields, then describe alignment, font, and color for each field. Your code is simpler and easier to read than ever before, saving you time and maintenance.

SwiftUI View

This declarative style even applies to complex concepts like animation. Easily add animation to almost any control and choose a collection of ready-to-use effects with only a few lines of code. At runtime, the system handles all of the steps needed to create a smooth movement, and even deals with interruption to keep your app stable. With animation this easy, you’ll be looking for new ways to make your app come alive.

UIKit in SwiftUI project with UIViewRepresentable

SwiftUI as we know just introduced by Apple in 2019, so SwiftUI is not mature yet. There are many cases in UIKit that can’t be implemented in SwiftUI, That’s really serious problem for developer to develop iOS App using SwiftUI. So as the alternative way, SwiftUI also can implement or develop View using UIKit.

UIViewRepresentable instance to create and manage a UIView object in your SwiftUI interface. Adopt this protocol in one of your app’s custom instances, and use its methods to create, update, and tear down your view. The creation and update processes parallel the behavior of SwiftUI views, and you use them to configure your view with your app’s current state information. Use the teardown process to remove your view cleanly from your SwiftUI. For example, you might use the teardown process to notify other objects that the view is disappearing.

UIViewRepresentable

Here as we see above is the example of Struct View called CustomTextField, the struct CustomTextField extends UIViewRepresentable. UIViewRepresentable will ask the struct to implement some functions needed such as makeUIView and updateUIView.

Each functions purpose are:

1. makeUIView
   is used to Creates the view object and configures its initial state. As the example on above code snippet, we make the UITextView in this function and also configure the UITextView (such as text, font, color).
2. updateUIView
   is used to Updates the state of the specified view with new information from SwiftUI.
3. makeCoordinator
   is used to Creates the custom instance that you use to communicate changes from your view controller to other parts of your SwiftUI interface. As the example on above code snippet, we create Coordinator Class to handle the UIKit View Controller such as UITextViewDelegate. In the Coordinator Class we can implement the needed delegate function of the UIKit View.

So in conclusion, we can also use UIKit to help us develop View in SwiftUI Project. So when we want to implement cases that not available in SwiftUI but possible with UIKit, we just have to use UIViewRepresentable and use UIKit View programmatically from the struct and called the struct as usual in SwiftUI View. 😋