Developing with ViewCode (Swift — UIKit), a brief tutorial
Let's start from the beginning, what is ViewCode? Well, when you start an iOS Swift project in Xcode you are offered to choose between two interfaces, SwiftUI or Storyboard. With either of these, you're going to develop the front-end of your app, the views, and all of the user interface.
SwiftUI is one of Apple's latest frameworks to build incredible-looking apps, it has declarative syntax and it is really easy to code. Since it is still in its starter years, you can find lots of bugs and unresolved problems and that alongside the fact that it doesn't support older iOS versions is why the market still prefers UIKit.
Storyboard is the other interface Xcode allows you to create your views with, you basically have a canvas in Xcode which is a .storyboard file in which you will create your views with drag and drop. You can also define constraints and almost every UI detail through the canvas menu.
Finally, we have ViewCode, which is actually neither of those, you're going to build the view completely programmatically without previews or menus to "help" you. I'll give you an example of a view that was completely created in ViewCode to you:
- First off you are going to create a raw View Controller in a regular .swift file
- Secondly, you are going to create each part of your view programmatically
- Always remember to set the translatesAutoresizingMaskIntoConstraints to false so you can set your own constraints later
In the image below we have an example of the creation of a UILabel in a View.
Once you have a view created your job is not done yet, you have to place it in your ViewController in order to appear on the screen, to do so you have to add it to your view and set its constraints as you can see in the snippet below:
In the example above you can see that we add the ongsLabel that we created before in the view by using addSubview. In this case, we are using a function called configureViews that we call in our viewDidLoad so it will load in our ViewController.
Finally, you are going to set the constraints of the view you created so it is placed where you want it to be on the screen, and you are going to do so with the snippet you can see below:
Now you are able to see that we placed the UILbael in the x-axis and y-axis of the view, we anchored it to the top and the leading side of the screen. Once you've set all the constraints you have to activate them, to do so you just use the activate function from NSLayoutConstraint as you will see in the following image:
In this brief tutorial, I used code from a project I've been developing to help volunteers connect with NGOs and also make donations easier. We developed it completely in ViewCode, in some of the images above you can see that other than only the label I showed you guys here we created an entire view and I'm going to show you the results in the next image. Our project is called Caravela and you can follow us on Instagram and you can download our app on the AppStore.
Obviously, these views have a lot more other inner components(views) than only the label I showed you above, it is a complex view. For each view, the process I showed you here is repeated until we get all of them in the right place with the correct constraints.
In summary, I enjoy way more using ViewCode compared to SwiftUI or Storyboard to program the UI of the app, it is in fact way more verbose but as a programmer, I feel like I am more in control of the situation. If you came all the way here, thank you for your time and I hope I helped you :)
