A Bit About Interface Builder
Interface builder is an incredible environment that gives developers the possibility to organize their ideas into real structured views to be a kind of roadmap of the relations among them. Although interface builder is an helpful tool for developer it is not recommended to use it for huge projects where you need to share code and design with other developers. The cause of that is the probability to always have conflits when you have to merge branchs or commits. Well as everything has a solutions, the one for this is divide your project in many storyboards and xib files where the team has different environments to work and avoid conflits during the development.
Interface Builder can be divided in 3 times
- Design Time
- Compile Time
- Run Time
In Design Time
#Interface Builder’s Storyboard or XIB (the canva) organise the elements in collections of objects using XML.
To get access to these informations we can right click on the file and choose Open as -> Source Code
By looking the tags of these objects we can understand how storyboards or xib are made.
First of all we see the <objects> collection that contains the elements inside the Canva. Inside each tag we can get raw information about the elements used in the interface. We don’t need to care about this raw informations because interface builder make them well organized in the inspectors.
A little trick for design time
Sometimes to select a nested view using interface builder is a hard task. But you can easely do it by pressing the (Ctrl) ⌃ + Shift ⇧ in your keyboard and clicking over the top view and you will be presented a menu to choose.
The interesting here is that you can also label your views using Interface Build
In Compile Time
The process called IBTool takes this XML and transform in the famous NIB files. That is used for RunTime. Interface Builder tries to minnimize the number of files that are created by optimizing the run time process grouping objects during the archive process.
With a relationshipt segue two view are linked so they go together in the same NIB File
In Run Time
When we allocate one StoryBoard or XIB using it’s API initially all the memory goes for the storyboard itself and not for the views containing in it.
NIB Files are only loaded on demand and they are enable to be reused
Let’s talk about 3 assets we deal everyday by using Interface Builder
IBOutlet
Basically IBOutlet are used to connect the UI to the code and it’s archived through interface Build. By working with IBOutlet you have acess to our properties from the element in the UI. b
Press (Ctrl) ⌃ and select + drag the element to the view controller to create the outlet.
An outlet is declared as a weak reference to prevent strong reference cycles.
To know more IBOutlet visit;
IBActions
Well , the same rule applies for IBAction, as the name says it’s a function reference and will trigger when the user interacts with the element during run time by using the chose event.
@IBDesignable
This is a really nice feature from interface Builder, taging you class as @IBDesignable will give you the possibility to render in real time what you are doing in code. Here is an example;
Using swiftUI you have this feature ready for you. Check more about swift UI in https://developer.apple.com/xcode/swiftui/
Interface builder is really an amazing tool to be used in development, be aware of the pros and cons about using it and take your time to play around. I hope I could help you with some clues and tricks.
