How to use UIView in SwiftUI

⋅ 5 min read ⋅ SwiftUI UIKit

Table of Contents

The good thing about SwiftUI is you can gradually adopt it from an existing UIKit application.

In this article, I will show you how to use UIView as a SwiftUI View.

Using UIView as SwiftUI View

Before we can use UIView in the SwiftUI world, we need to transform it in a way that SwiftUI can understand.

We need to do two things to make an UIView works inside SwiftUI.

  1. Create a new SwiftUI view that conforms to UIViewRepresentable protocol.
  2. Implement the two required methods makeUIView() and updateUIView().

Before jumping to the implementation detail, let's create a new UIView that we will use throughout the article.

I will call in MyView. It is a simple view with a pink background and a "Hello, UIKit!" label text in the center.

class MyView: UIView {
// 1
private var label: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.font = UIFont.preferredFont(forTextStyle: .title1)
label.text = "Hello, UIKit!"
label.textAlignment = .center

return label
}()

init() {
super.init(frame: .zero)
// 2
backgroundColor = .systemPink

// 3
addSubview(label)
NSLayoutConstraint.activate([
label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
label.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
label.topAnchor.constraint(equalTo: topAnchor, constant: 20),
label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20),
])

}

required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}

1 Create a new label and set its text, font, and alignment.
2 Set view background color to pink.
3 Add the label on the center of the view.

This is how it looks.

A view that we will use in SwiftUI.
A view that we will use in SwiftUI.

We got something to work with. Let's see how we can use this view controller in a SwiftUI.

Create UIViewRepresentable

UIViewRepresentable protocol is a SwiftUI view that represents a UIKit view.

As you can see from the declaration, UIViewRepresentable conforms to the View protocol, which makes it usable as a view in the SwiftUI world.

protocol UIViewRepresentable : View where Self.Body == Never

UIViewRepresentable is a bridge between a UIKit view and SwiftUI. There are a few steps that you need to take.

First, I create RepresentedMyView, which conforms to the UIViewRepresentable protocol.

import SwiftUI

struct RepresentedMyView: UIViewRepresentable {

}

The protocol needs to know what kind of UIView that RepresentedMyView is going to represent. We give this information by explicitly defining typealias UIViewType.

In this case, we want our RepresentedMyView to represent MyView.

import SwiftUI

struct RepresentedMyView: UIViewRepresentable {
typealias UIViewType = MyView
}

After we tell the protocol what type of view we will present, we need to get our hands dirty and prepare the view for SwiftUI.

We need to conform to two required methods.

  1. makeUIView
  2. updateUIView
struct RepresentedMyView: UIViewRepresentable {
typealias UIViewType = MyView

func makeUIView(context: Context) -> MyView {
// Return MyView instance.
}

func updateUIView(_ uiView: MyView, context: Context) {
// Updates the state of the specified view with new information from SwiftUI.
}
}

implement makeUIView

The makeUIView method expected us to return an instance of MyView as we specified in typealias UIViewType = MyView.

This is a place where we

  1. Create the view instance and
  2. Configure its initial state

Since our view is very simple, we just create and return it immediately from makeUIView.

struct RepresentedMyView: UIViewRepresentable {
typealias UIViewType = MyView

func makeUIView(context: Context) -> MyView {
let view = MyView()
// Do some configurations here if needed.
return view
}

func updateUIView(_ uiView: MyView, context: Context) {
// Updates the state of the specified view controller with new information from SwiftUI.
}
}

implement updateUIView

The updateUIView method is called when there is an update from SwiftUI. This is a place for us to update our view.

Again, for our simple view, we don't need this. We can leave it blank.

func updateUIView(_ uiView: MyView, context: Context) {
// Updates the state of the specified view controller with new information from SwiftUI.
}

How to use UIViewRepresentable

After we create a new view that can represent a UIKit view, we can use it just like a normal SwiftUI view.

In this example, we use RepresentedMyView as a content of a sheet.

struct ContentView: View {
@State var isPresented = false

var body: some View {
Button("MyView") {
isPresented = true
}
.sheet(isPresented: $isPresented) {
RepresentedMyView()
}
}
}
Use RepresentedMyView as a sheet's content.
Use RepresentedMyView as a sheet's content.

As You might notice, the pink background of RepresentedMyView doesn't cover the bottom safe area. We can easily fix that in the SwiftUI way by applying the ignoresSafeArea() modifier.

struct ContentView: View {
@State var isPresented = false

var body: some View {
Button("MyView") {
isPresented = true
}
.sheet(isPresented: $isPresented) {
RepresentedMyView()
.ignoresSafeArea()
}
}
}
We can use a SwiftUI modifier on RepresentedMyView just like a normal SwiftUI view.
We can use a SwiftUI modifier on RepresentedMyView just like a normal SwiftUI view.

As you can see, UIView can represent the whole screen when presenting in SwiftUI.

Here is another example where we use it as a part of a screen.

In this example, we put RepresentedMyView alongside a text view.

struct ContentView: View {
var body: some View {
VStack {
Text("RepresentedMyView")
RepresentedMyView()
.frame(height: 100)
}
}
}
Using RepresentedMyView along side with a SwiftUI Text.
Using RepresentedMyView along side with a SwiftUI Text.

Conclusion

The process of using UIView in SwiftUI is almost identical to how we integrated UIViewController with SwiftUI. The only difference is we conform our view with UIViewRepresentable instead of UIViewControllerRepresentable.


Read more article about SwiftUI, UIKit, or see all available topic

Enjoy the read?

If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Buy me a coffee Tweet Share
Previous
How to create Rounded Corners Button in UIKit

There are many ways to create a rounded corners button in UIKit based on the minimum iOS version you want to support. Let's learn how to do it.

Next
How to create Rounded Corners View in SwiftUI

There are many ways to create a rounded corners button in SwiftUI. Let's learn how to do it.

← Home