IOS Programming Recipe 6:creating a custom UIView using a Nib

IOS Programming Recipe 6:creating a custom UIView using a NibJanuary 7,ByMikettCOMMENTS

Creating a custom UIView using a nibassumptions

1. You is familiar with creating UIView subclasses, and instantiating UIView ' s both from a Nib file or in code
2. You is familiar with Nib files

Background

Sometimes you find yourself trying to create a quick composite UIView (UIView subclass W/multiple Subviews) where a Uivie Wcontroller doesn ' t seem necessary please note that a uiviewcontrollerare the right choice most of the time. This can is a real pain to setup entirely in code if you had many subviews, and God forbid if you want to use auto layout ! So-may find yourself wanting-use a nib-simplify things a bit, well this tutorial would go through the process of Doing just that.

Getting Started

• Create a new Xcode project based on the single view application template for IOS. This tutorial would assume you is using ARC, so if want to make that selection when creating the new project.
• Once you has created the new project a new UIView subclass to the project and name itCustomView.
• Then create a new Nib file named customview.nib and add it to the project.

Setup the UIView subclass (using a nib)

• Open the newly created nib and add a UIView to it.
• In the Attributes Inspector under the simulated Metrics section, click the size drop-d Own menu and select None, this would allow you to resize the UIView to whatever size.
• Resize The view to something like 200x300.
• With the newly added UIView selected open the Identity Inspector and change the classname to CUSTOMV Iew matching the one you previously created.
• Add a UILabel as a subview of the view and the title to My Custom view. Then center it in the view, it should resemble the one shown below.

Creating a convenience Initializer

Next We'll create a convenience initializer in the CustomView class that would load the CustomView from the nib instead O F Creating it in code

• Open CustomView.h and add the following class method definition.

+(ID)CustomView;

• Next Open customview.m and implement the class method as shown below (please keep on mind this is a very basic IM Plementation for our basic UIView subclass, you can alter it to your liking)

+(ID)CustomView
{
CustomView*CustomView=[[[NSBundleMainbundle]Loadnibnamed:@"CustomView"Owner:NilOptions:Nil]Lastobject];

//Make sure customview are not nil or the wrong class!
if([CustomView Iskindofclass:[CustomView class]])
returnCustomView;
Else
returnNil;
}Finishing the Demo App

• Open VIEWCONTROLLER.M and add the following viewdidload method, this'll use we convenience initializer to crea Te a customview and then we add it to our view hierarchy. You'll also need to the import CustomView.h in VIEWCONTROLLER.M.

-(void)Viewdidload
{
[Super Viewdidload];

CustomView*CustomView=[CustomView CustomView];
[Self.view Addsubview:CustomView];
}Code explanation

1. First we access the main bundle and load the nib we created.
2. loadNibNamed:owner:options: Returns an Nsarray containing each of the top level objects in the nib. Since in We-know there should only is one top level object (CustomView as we specified earlier) we can and call Lastobject on the array. lastobjectis used in order to safely access the array in case LoadNibNamed:owner:options: failed. Note that lastobject returns nil if the array is empty.
3. Finally we ensure that CustomView are actually a "customview" not some other class or nil.

That ' s it!

As always if suggestions is any of the recipes, or any questions or comments, please let us know!

FILED Under:intermediate, IOS 6, RECIPESTAGGED with:interface BUILDER, iOS 6, iOS development, iOS programming,nib, objective-c, UIVIEWCOMMENTS

1. Mihai Damiansays:January 9 at 3:11 pm

   One potential drawback with of approach are that you cannot directly link iboutlets from the Nib since we have no file own ER for it. Of course could grab the subviews by tags and assign them yourself it's error prone since it ' s much more diffic Ult to keep track of tags. Alternatively you could create a extra "template" instance of CustomView, set it as the file owner and then do the manual Iboutlet assignment from the template instance to the actual instance so you'll be returning. This have the advantage of explicitly naming the uiviews you ' re working with but it feels a bit hackish and it takes the MO St effort to implement.

   Reply
   • mike Turner  says: January 9, @ 5:07 pm

     Thanks for the comment!

     You can actually link up ibactions & iboutlets, although it's slightly different than with a uiviewcontroller. Using The example above add this property declaration to CustomView.h.

     //this would link to the label in Customview.xib
       @property   ( nonatomic, Strong  iboutlet uilabel * label;

     Now in Customview.xib, (Control + drag) from the top level object (We CustomView object, where the property declaratio N lives, instead of file ' s owner) to the UILabel. You should is presented with a HUD allowing your to select the "label" outlet just created!

     I ll append the post to show this process.

     Reply