In this recipe, we will take a look at Xcode's Interface Builder. Since we cannot use Xcode to write our code, Xamarin Studio provides a transparent way of communicating with Xcode when it comes to user interface files.
Let's take a look at Interface Builder by performing the following steps:
If you have installed the iOS SDK, then you already have Xcode with Interface Builder installed on your computer. Go to Xamarin Studio and open the project
MyFirstiOSProjectwe created earlier.In the Solution pad on the left, double-click on MyFirstiOSProjectViewController.xib. Xamarin Studio starts Xcode with the file loaded in Interface Builder.
On the top of the Xcode window in the right side of the toolbar, select the appropriate editor and viewing options, as shown in the following screenshot:
The following screenshot demonstrates what Interface Builder looks like with an XIB file open:
Now that we have loaded Interface Builder with the view controller of our app, let's familiarize ourselves with it.
The user interface designer is directly connected to an Xcode project. When we add an object, Xcode automatically generates code to reflect the change we made. Xamarin Studio takes care of this for us, so that when we double-click on an XIB file, it automatically creates a temporary Xcode project. This allows us to make the changes we want in the user interface. Therefore, we have nothing more to do than just design the user interface for our app.
Interface Builder is divided into three areas. A brief description of each area is given as follows:
Navigator area: In this area, we can see the files included in the Xcode project.
Editor area: This area is where we design the user interface. The editor area is divided into two sections. The one on the left is the designer, and the one on the right is the assistant editor. Inside the assistant editor, we see the underlying Objective-C source code file that corresponds to the selected item in the designer. Although we do not need to edit the Objective-C source, we will need the assistant editor later.
Utility area: This area contains the inspector and library panes. The inspector pane is where we configure each object, and the library pane is where we find the objects.
We saw what an XIB file looks like in Interface Builder, but there is more as far as these files are concerned. We mentioned earlier that XIB files are XML files with appropriate information readable by Interface Builder. The thing is that when a compilation is done in a project, the compiler compiles the XIB file converting it to its binary equivalent, the NIB file. Both XIB and NIB files contain the same information. The only difference between them is that XIB files are in a human-readable form while the NIB files are not. For example, when we compile the project we created, the MyFirstiOSProjectViewController.xib file will become MyFirstiOSProjectViewController.nib in the output folder. Apart from the binary conversion, the compiler also performs a compression on NIB files. So, NIB files will be significantly smaller in size than XIB files.
That's not all about XIB files. The way a developer manages the XIB files in a project is very important in an app's performance and stability. It is better to have many small-sized XIB files, instead of one or two large ones. This is because of the way iOS manages its memory. This can be accomplished by dividing the user interface into many XIB files. It may seem a bit difficult, but as we'll see later in this book, it is actually very easy.
When an app starts, iOS loads the NIB files as a whole in memory, and all the objects in it are instantiated. So, it is a waste of memory to keep objects in NIB files that are not always going to be used. Also, remember that you are developing for a mobile device whose available resources are not a match against that of desktop computers, no matter what its capabilities are.
As of iOS 5, Apple introduced storyboarding, which simplifies user interface design.
You may have noticed that in the Attributes tab of the Inspector pane, there is a section called Simulated Metrics. Options under this section help us see directly what our interface looks like in the designer area with the device's status bar, a toolbar, or a navigation bar. Although these options are saved in the XIB files, they have nothing to do with the actual app at runtime. For example, if we set the Status Bar option to None, it does not mean that our app will start without a status bar.