Effective XIB (Part 1)
There are many discussions/arguments in favor/against the use of XIBs (.xib file, pronounced as ‘nib’) when building user interfaces for iPhone applications. Although I agree that XIB files don’t take you all the way, but they definitely take you a long way. I also agree that everything that can be done in a XIB can be done in code (and more), but it helps to have a visual display to get it right rather than re-code/re-run to achieve pixel perfection. If used correctly, XIBs can save a developer a lot of work.
If done right, I firmly believe that visual designers can be given full access to change and style the XIB files. They can work closely with developers, who can focus on the code that is required to power these views, rather than re-code/re-run to satisfy the pixel-perfect interfaces that visual designers like to create.
A Simple XIB
The EffectiveXIB1 Xcode project contains 1 single ViewController & View with 3 UI components:
- UILabel (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.)
- UIButton (Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.)
- UIImageView (black_on_white_world_map.gif)
An additional change has been made in the project to support rotation in all interface directions.
Interface in Portrait Orientation
Interface in Landscape Orientation
As is evident from the screenshots, the UI components do not resize based on the orientation of the interface.
Interface Builder To The Rescue
Open the ViewController.xib in Interface Builder (IB) and switch to the ‘Size Inspector’.
The fixes can be achieved in 3 simple steps:
Step #1: Select UILabel and change the Autosizing:
From: 
To: 
Step #2: Select UIButton and change the Autosizing:
From: To:
Step #3: Select UIImageView and change the Autosizing:
From: To: 
Done! The interface, is unchanged in portrait orientation, but the UI components are resized in landscape.
Well, not really done! If you notice, the image in the UIImageView is resized based on the orientation and the aspect ratio of the original image is not respected. In order to fix this, switch to the ‘Attributes inspector’ and change View Mode to ‘Aspect Fit’.
On changing the view mode, the image displayed in interface builder immediately changes to respect the view mode. This is one of those examples where visual display of changes leads to lesser re-code/re-run cycles.
Now, We’re Done!
Interface in Portrait Orientation
Interface in Landscape Orientation
As you can see, Interface Builder and XIB files can ease development by visually giving you queues about what your resultant interface would look like when the view is run within an application.
How Can I Code This?
The code to achieve the same autosizing results would be:
- (void)viewDidLoad {
[super viewDidLoad];
self.label.autoresizingMask = UIViewAutoresizingFlexibleWidth;
self.button.autoresizingMask = UIViewAutoresizingFlexibleWidth;
self.imageview.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
self.imageview.contentMode = UIViewContentModeScaleAspectFit;
}
Although the code is simple, but the re-code/re-run cycles to get it just right can be painful.
