DEV Community: Alex

How to embed a UIKit ViewController inside a SwiftUI View

Alex — Mon, 22 May 2023 05:50:15 +0000

Hello community, the other day I was trying to use Xcode playground to test some UI but the experience was not the best. Xcode was crashing constantly so I decided to try another approach.

Use the SwiftUI preview to test my UIKit Views !.

So in this tutorial we're going to learn the first steps into integrating UIKit inside SwiftUI.

Let's start!

Creating the project

First let's start Xcode and create a new project, then select iOS > App and click Next. This time select SwiftUI as the interface and give it any name you want. Finally select a place to save the files and create the project.

Creating the UIKit View

Let's create a new swift file with the name of CounterViewController.swift. We are going to create our UIKit interface inside this file.

For simplicity, let's make a simple view that shows a label an a button.



import UIKit

final class CounterViewController: UIViewController {

    private var counter = 0

    private lazy var button: UIButton = {
        let button = UIButton()
        button.setTitle("Tap me from UIKit", for: .normal)
        button.setTitleColor(.systemBlue, for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()

    private lazy var label: UILabel = {
        let label = UILabel()
        label.text = getMessage()
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        addComponents()
        addHandlers()
        addConstrains()
    }

}

private extension CounterViewController {
    func getMessage() -> String{
        "UIKit Button was tapped \(counter)"
    }

    func addConstrains() {
        NSLayoutConstraint.activate([
            label.topAnchor.constraint(equalTo: view.topAnchor, constant: 64),
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            label.widthAnchor.constraint(equalToConstant: 250),
            label.heightAnchor.constraint(equalToConstant: 50),
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 64),
            button.heightAnchor.constraint(equalToConstant: 48),
            button.widthAnchor.constraint(equalToConstant: 200),
        ])
    }

    func addComponents() {
        [button, label]
            .forEach { view.addSubview($0) }
    }

    func addHandlers() {
        button.addTarget(self, action: #selector(didButtonTapped), for: .touchUpInside)
    }

    @objc func didButtonTapped(_ sender: UIButton) {
        counter += 1
        label.text = getMessage()
    }

}

the above code shows a Label that will be updated once the button is pressed.

Creating the SwiftUI binding

To embed our UIKit code inside the SwiftUI we need to create a new file that contains a struct that conforms to UIViewControllerRepresentable.

Create a new swift file called CounterView and add the following code:



import SwiftUI

struct CounterView: UIViewControllerRepresentable {

    typealias UIViewControllerType = CounterViewController

    func makeUIViewController(context: Context) -> CounterViewController {
        CounterViewController()
    }

    func updateUIViewController(_ uiViewController: CounterViewController, context: Context) {
       // Update the ViewController here
    }
}

This struct is the wrapper we are going to use to create our SwiftUI view.

To conform to UIViewControllerRepresentable our structs needs three things

typealias UIViewControllerType: This is a type alias for the UIKitClass, in our case is the ViewController.
func makeUIViewController(context: Context): This functions is the one that will create an instance of our ViewController for SwiftUI
func updateUIViewController(_ uiViewController: CounterViewController, context: Context): This function is called each time a change in our view state occurs, we can update our UIKit in this function.

Creating our View object in SwiftIU

Finally, let's create our binding view that we will use in SwiftUI.

To do so just instantiate the new View object and that's all.



import SwiftUI

struct ContentView: View {

    var body: some View {
        VStack {
            Text("SwiftUI + UIKit")
                .padding(48)
                .font(.title.bold())
            CounterView(labelText: $label)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Xcode live previewing the UIKit component, you can click it on the button and it will work!.

Now you can make changes to your UIKit code and see a live update on the SwiftUI preview.

Conclusion

In this first tutorial we were able to embed a UIKit view controller inside a SwiftUI View and we were able to preview our work inside the live preview. This first attempt show us how easy is to create interoperability between SwiftUI and UIKit.

In coming tutorial, we will be adding bidirectional communication with @Binding and @State.

Thank you for reading.

How to create custom views programmatically

Alex — Sun, 14 May 2023 06:31:13 +0000

Hello wonderful community 👋. As a new iOS developer I'm starting to learn how to create views programmatically, it has been tricky to learn how to do this coming from using Storyboards 😅.

In this tutorial, I'll guide you step-by-step on programmatically creating views in iOS. It's an opportunity for me to share what I've learned, with the hope of helping others who are also exploring this area.

Let's start coding! 😀

Starting a new Xcode project

I'm using Xcode version 14.3 and targeting iOS 16

Open Xcode and click on New Project, we will get this window:

Here we are going to select the simplest template available, iOS > App

Now let's give some basic information:
Product Name: It's the name of our app.
Team: If you have a Apple Developer Account you should select it here, otherwise leave it as None is alright (leave it as None will allow you to test your app only in the simulator).
Interface: Since we are doing an example with UIKit we need to select Storyboard (don't worry we are not actually using them).
Language: Select Swift.

The rest of the options can be unchecked, they won't be used in this simple example.

Click on Next and select a location on your computer to save the project, finally click on Create.

We now have a simple app ready for us. 🎉

Deleting storyboard references from our project

Now it's time to delete the storyboard file and configurations associated with it.

In this simple project we have two storyboard files, Main and LaunchScreen.

We only need to delete the Main one because this is the one that is loaded once our app starts. We want to provide our own by using code.

Delete Main from the project, when prompt click Move to trash.

Delete the references of this storyboard, open Info.plist and delete the value called Storyboard Name by clicking the minus icon.

Delete the storyboard reference in the target app, this is important because we no longer have the storyboard file so if we try to compile we would get an error because of the missing reference.

Now run your app and you'll get a nice black screen, this mean you deleted the storyboard correctly!.

Configuring programmatically the root window

Now you have an empty screen, nothing was loaded and that's a problem. The storyboard made all of this configuration automatically for you. Now it's your responsibility to configure the screen that will be show when your app starts.

Open SceneDelegate.swift and configure the root window of your app. Locate the method called func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions).

Once you found it, let's change the method's body with the following:



guard let windowScene = (scene as? UIWindowScene) else { return }
let window = UIWindow(windowScene: windowScene)
let viewController = ViewController()
window.rootViewController = viewController
self.window = window
window.makeKeyAndVisible()

This code do several things:

It tries to create a windoScene by using the passed scene object, this object will contain the scene of our app.
It creates a new window, this will tell your app to create a windowScene, this object will contain your app's user interface.
It creates a viewController, this object is responsible for controlling your view objects. This class is already on your template (`ViewController.swift), so there is nothing special about its name.
Assigning the new ViewController as the root view controller, i.e., the first view controller we are going to create to start our app UI.
We are assigning the new created window to our class window, self.window = window.
Making the window visible on the screen, window.makeKeyAndVisible().

After that configuration your app interface is back to life. If you run it at this point you'll still get a back screen, that's ok because we haven't configured anything on our View objects.

Creating our simple interface programmatically

Now it's time to add some code to make our interface show something on the screen!

ViewController life cycle

The UIViewController has a specific life cycle, i.e., certain predefined methods are called at specific moments of the object's life. Since we are creating our interface programmatically we need to understand two methods of this life cycle.

func loadView(): This method is used to load our custom views and make some configuration on them before they appear on screen.
func viewDidLoad(): This method is called once the ViewController is loaded into memory, here you can create more customization and configuration to your views.

As you can guess, the object first run loadView and then viewDidLoad.

Creating an empty `UIView`

Each ViewController creates a default empty View, but we want to have our own custom one, so let's start by doing that.

Create a new file for our new custom view, let's call it CustomView.swift and add the following code inside.

`swift
// CustomView.swift
import UIKit

final class CustomView: UIView {

override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = .yellow
}

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

}
`

Our view inherits from UIView so we need to define at least these two constructors (init methods). The one we need to focus on is the first one. Here we are adding a background color.

Create the custom view object and show it on the screen, to achieve this lets open the ViewController.swift and inside the class create a new object of our view and assign it as the new view in the loadView. You should end up with a code similar to this:

`swift
// ViewController.swift
import UIKit

class ViewController: UIViewController {

lazy var customView = CustomView()

override func loadView() {
    // we are creating a class property because we may have delegates
    // assign your delegates here, before view
    view = customView
}

override func viewDidLoad() {
    super.viewDidLoad()
}

}
`

One important point to mention, the view property is assigned by default to use all of the phone screen. So we don't need to assign any constrains because of this. The CustomView will take all of the screen.

Now run your app and you'll see a yellow screen.

At this point, you should have the following files on your project:

Great, now you loaded an empty custom view to your screen!.

Adding a simple label on the empty View

To finish this tutorial let's add a simple label using auto layout.

Create a UILabel property on the CustomView class and give it some default values like a title and color. You don't need to provide any dimension, we will do this with auto layout. Your CustomView class should look something like this:

`swift
// CustomView.swift
import UIKit

final class CustomView: UIView {

// 1. Creating the new element
lazy var label: UILabel = {
    // internal label, not the same as the external label
    let label = UILabel()
    label.text = "Hello World"
    label.textAlignment = .center
    label.textColor = .white
    label.backgroundColor = .black
    return label
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = .yellow
    // 2. Adding the new element into the view
    addSubview(label)
}

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

}
`

If you run your code the new label won't appear on the screen, that's because the label has a size of 0 and its position in the screen's position (0,0). This happened because we didn't provide a CGRect initializer. It's ok, we are going to fix this with auto layout.

Add auto layout constrains to allow the object to appear on the view (this will give it an area), also remember to set to false the property translatesAutoresizingMaskIntoConstraints if we don't do this our view may present problems rendering with auto layout.

Remember that each ui element is represented as a box, so each edge has a name we can refer in our code to assign the constrains.

Your code inside CustomView.swift should look like something like this:

`swift
// CustomView.swift
import UIKit

final class CustomView: UIView {

// 1. Creating the new element
lazy var label: UILabel = {
    // internal label, not the same as the external label
    let label = UILabel()
    label.text = "Hello World"
    label.textAlignment = .center
    label.textColor = .white
    label.backgroundColor = .black
    return label
}()

override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = .yellow
    // 2. Adding the new element into the view
    addSubview(label)
    // 3. Add the auto layout constrains
    setUpLabelConstrains()
}

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

private func setUpLabelConstrains() {
    // Needed to avoid auto layout conflicts
    label.translatesAutoresizingMaskIntoConstraints = false
    // Set the top part of the label to the safe area of the custom view and add a vertical separation of 64 points
    label.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 64).isActive = true
    // Set the left part of the label to the safe area of the custom view and add a horizontal separation of 18 points
    label.leftAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leftAnchor, constant: 18).isActive = true
    // Set the right part of the label to the safe area of the custom view and add a horizontal separation of -18 points
    // note: if this value it's positive the element will be separate from outside the screen 18 points.
    label.rightAnchor.constraint(equalTo: self.safeAreaLayoutGuide.rightAnchor, constant: -18).isActive = true
    // Set the height of the label to be equal to 48 points
    label.heightAnchor.constraint(equalToConstant: 48).isActive = true
}

}
`

Now let's run the app, a custom label should appear on the screen now. This custom label is a child of the custom view, which was created by the ViewController and set as the default view for our ViewController.

Conclusion

Congratulations, you created an app's ui using only code!. I hope this simple tutorial helps you to understand this topic. There is a lot more to cover but this is a good first step, thank you for reading!.

Until next time.

How can a ViewController communicate an action to a button in a View

Alex — Mon, 08 May 2023 04:39:08 +0000

As a beginner, I'm constantly struggling with communication between objects. So I decided to try some approaches to facilitate this communication.

I'm still in the beginning of my journey, so please feel free to correct my approach if you see something wrong.

UI Object Communication

I find separating Views from ViewControllers to be one of the most challenging aspects. In this tutorial, we will explore various methods for declaring an action method in a UIViewController and setting it for a private UIButton inside a UIView.

By following the principle of Separation of Concerns, our View should be only responsible for the presentation layer, any action that is not related to the presentation logic must be delegated to another layer.

In this scenario a button action should not be handled by the View itself, so we need to find a way to "inject" this functionality somehow from the outside.

Using callbacks (closures)

One way to do this is to inject a function from the ViewController inside our View.

Let's imagine we have the following classes for our View and ViewController that represent the user interface and the logic for what to do when an event happens.

// View.swift
import UIKit

final class CustomView: UIView {

    // We define the callback method we want to use in our button
    var callback: (() -> Void)?

    private lazy var button: UIButton = {
        var button = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        button.setTitle("Tap Me", for: .normal)
        button.backgroundColor = .systemBlue
        return button
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.addSubview(button)
        // setting the target method to the button
        button.addTarget(self, action: #selector(buttonHandler), for: .touchUpInside)
        positioningButton()
    }

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

    func positioningButton() {
        button.translatesAutoresizingMaskIntoConstraints = false
        // centering the button to the center of the custom view
        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: self.centerXAnchor),
            button.centerYAnchor.constraint(equalTo: self.centerYAnchor)
        ])
    }

    @objc
    private func buttonHandler(_ sender: UIButton) {
        // Calling the outside callback for the handler
        // if the callback doesn't exist then it won't do anything
        callback?()
    }

}

// ViewController.swift
import UIKit

final class ViewController: UIViewController {
    let customView = CustomView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Setting the callback to the button
        customView.callback = customAction
        view.addSubview(customView)
        customView.backgroundColor = .cyan
        setupCustomViewConstrains()
    }

    func setupCustomViewConstrains() {
        customView.translatesAutoresizingMaskIntoConstraints = false
        // Making the customView to take all screen space
        NSLayoutConstraint.activate([
            customView.topAnchor.constraint(equalTo: view.topAnchor),
            customView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            customView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            customView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }

    func customAction() {
        print("Button from View was tapped!")
    }

}

Since we are not using Interface builder, we also need to tell SceneDelegate to use our ViewController as the root view controller, if we don't do this our screen will be black.

To solve this, let us open SceneDelegate.swift and locate the method called func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions).

Then replace the body of the method (the code between the curly braces) with this:

guard let windowScene = (scene as? UIWindowScene) else { return }
let window = UIWindow(windowScene: windowScene)
let viewController = ViewController()
window.rootViewController = viewController
self.window = window
window.makeKeyAndVisible()

Once we have all this code ready we can run the app. The button will appear in the center of the screen and if we tap it, the closure defined in the ViewController will be executed.

Conclusion

In this small tutorial, we created an app that communicates the view and the viewController programmatically using closures. This approach provides an effective way to facilitate communication between our objects. While there are other mechanisms to achieve this, such as delegation (which I'll cover in another post), closures offer a convenient solution.

This mechanism of communication is not restricted to only Views and ViewControllers, you can use with any type of objects you need.

I hope this tutorial helps you gain a better understanding of this topic and sheds some light on your learning process.

Thanks for reading.

How to delete duplicated subdirectories recursively using the terminal

Alex — Sun, 30 Apr 2023 07:59:01 +0000

The other day I came across a problem where I had three directories where I had two subdirectories with the same name (target).

The thing I want to achieve is to delete them in one command, this is the solution I found.

Using the terminal to delete multiple directories.

There is an useful command called find, this command is used to traverse nested directories and evaluate an expression for each element.

We can use find to delete files or directories, here is the command:

find . -type d -name "target" -exec rm -rf {} +

Understanding the command

This command is easy to grasp, first we have ., this is telling find to start traversing in the current directory.

Next we have -type, this argument allows to select a a specific valid file.

The valid files are listed below:

b: block special
c: character special
d: directory
f: regular file
l: symbolic link
p: FIFO
s: socket

Since we need to find an specific directory we use d.

Next it's -name, we need to give the string that contains the name we are searching for. In our case we are looking for the directories named "target".

The last part of the command, -exec, is telling what to do once we find a valid element. In this case we want to delete all the found occurrences, so we're passing rm -rf.

The {} is just telling that we need to use the current element's name, and + is used to terminate the -exec part.

Conclusion

By using this simple command we can find and delete subdirectories in an easy and convenient way, which I find to be faster than using the GUI.

I hope this simple tutorial can help you to solve these kind of problems.

DEV Community: Alex

How to embed a UIKit ViewController inside a SwiftUI View

Creating the project

Creating the UIKit View

Creating the SwiftUI binding

Creating our View object in SwiftIU

Conclusion

How to create custom views programmatically

Starting a new Xcode project

Deleting storyboard references from our project

Configuring programmatically the root window

Creating our simple interface programmatically

ViewController life cycle

Creating an empty UIView

Adding a simple label on the empty View

Conclusion

How can a ViewController communicate an action to a button in a View

UI Object Communication

Using callbacks (closures)

Conclusion

How to delete duplicated subdirectories recursively using the terminal

Using the terminal to delete multiple directories.

Understanding the command

Conclusion

Creating an empty `UIView`