iOS Programming Recipe 6: Creating a custom UIView using a Nib

JANUARY 7, 2013 BY MIKETT 12 COMMENTS

Creating a custom UIView using a Nib

Assumptions
  1. You are familiar with creating UIView subclasses, and instantiating UIView’s both from a Nib file or in code
  2. You are familiar with Nib files
Background

Sometimes you find yourself trying to create a quick composite UIView (UIView subclass w/ multiple subviews) where a UIViewController doesn’t seem necessary Please note that a UIViewController is the right choice most of the time. This can be a real pain to setup entirely in code if you have many subviews, and god forbid if you want to use auto layout! So you may find yourself wanting to use a nib to simplify things a bit, well this tutorial will 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 will assume you are using ARC, so you may want to make that selection when creating the new project.
  • Once you have 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-down menu and select none, this will allow you to resize the UIView to whatever size you like.
  • Resize the view to something like 200×300.
  • With the newly added UIView selected open the Identity Inspector and change the classname to CustomView matching the one you previously created.
  • Add a UILabel as a subview of the view and change 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 will create a convenience initializer in the CustomView class that will load the CustomView from the nib instead of 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 in mind this is a very basic implementation for our basic UIView subclass, you can alter it to your liking)
+ (id)customView
{
    CustomView *customView = [[[NSBundle mainBundle] loadNibNamed:@"CustomView" owner:nil options:nil] lastObject];

// make sure customView is not nil or the wrong class!
    if ([customView isKindOfClass:[CustomView class]])
        return customView;
    else
        return nil;
}

Finishing The Demo App
    • Open ViewController.m and add the following viewDidLoad method, this will use our convenience initializer to create a CustomView and then we add it to our view hierarchy. You will also need to 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 our case we know there should only be one top level object (CustomView as we specified earlier) we can then 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 is actually a “CustomView” not some other class or nil.
That’s It!

As always if you have any suggestions for future recipes, or any questions or comments, please let us know!

COMMENTS

    1. Mihai Damian says:

      One potential drawback with of approach is that you cannot directly link IBOutlets from the Nib since you have no file owner for it. Of course you could grab the subviews by tags and assign them yourself but this is error prone since it’s much more difficult to keep track of tags. Alternatively you could create an 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 that you’ll be returning. This has the advantage of explicitly naming the UIViews you’re working with but it feels a bit hackish and it takes the most effort to implement.

      • Mike Turner says:

        Thanks for the comment!

        You can actually link up IBActions & IBOutlets, although it is slightly different than with a UIViewController. Using the example above add this property declaration to CustomView.h.

        //This will link to the label in CustomView.xib
         @property (nonatomic, strong) IBOutlet UILabel *label;

        Now in CustomView.xib, (control + drag) from the top level object (our CustomView object, where the property declaration lives, instead of file’s owner) to the UILabel. You should be presented with a HUD allowing you to select the “label” outlet just created!

        I’ll append the post to show this process.

iOS Programming Recipe 6: Creating a custom UIView using a Nib的更多相关文章

  1. iOS Programming Subclassing UITableViewCell

    iOS Programming Subclassing UITableViewCell  1.Creating BNRItemCell UITableViewCell is a UIView subc ...

  2. iOS Programming State Restoration 状态存储

    iOS Programming State Restoration 状态存储 If iOS ever needs more memory and your application is in the ...

  3. iOS Programming Auto Layout: Programmatic Constraints 自动布局:通过编程限制

    iOS Programming  Auto Layout: Programmatic Constraints  1.  However, if your views are created in co ...

  4. iOS Programming Introduction to Auto Layout 自动布局

    iOS Programming Introduction to Auto Layout   自动布局 A single application that runs natively on both t ...

  5. iOS Programming Touch Events and UIResponder

    iOS Programming Touch Events and UIResponder  1 Touch Events  As a subclass of UIResponder, a UIView ...

  6. iOS Programming Camera 2

    iOS Programming Camera  2  1.1 Creating BNRImageStore The image store will fetch and cache the image ...

  7. iOS Programming UINavigationController

    iOS Programming UINavigationController the Settings application has multiple related screens of info ...

  8. iOS Programming Editing UITableView

    iOS Programming Editing UITableView 1.1 Editing mode  UITableView has an editing property, and when ...

  9. iOS programming UITabBarController

    iOS programming UITabBarController 1.1 View controllers become more interesting when the user's acti ...

随机推荐

  1. 2017百度之星初赛B-1002(HDU-6115)

    一.思路 这题“看似”比较难搞的一点是,一个节点上有多个办公室,这怎么求?其他的,求树中任意两个节点的距离(注意:没有最远或最最进这一说法,因为树上任意两个节点之间有且仅有一条路径.不然就有回路了,对 ...

  2. java 红包规则

    java 红包规则 拼手气红包: 规则:最大金额:全部金额/个数*倍数 最小金额:0.01 最后一个红包是全部金额-领取金额 随机分配 package com.utils; import java.m ...

  3. maven中的pom配置文件标签的详细介绍

    <span style="padding:0px; margin:0px"><project xmlns="http://maven.apache.or ...

  4. HALCON形状匹配(转)

    LIntExport Herror create_shape_model( const Hobject&  Template ,  //reduce_domain后的模板图像 Hlong  N ...

  5. Unity 输入与控制

    1. 鼠标输入 有关的方法和变量如下: 在 Unity 中,鼠标位置用屏幕的像素坐标表示,屏幕左下角为(0,0),右上角为(Screen.width,Screen.height). 2. 键盘操作 有 ...

  6. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 14—Dimensionality Reduction 降维

    Lecture 14 Dimensionality Reduction 降维 14.1 降维的动机一:数据压缩 Data Compression 现在讨论第二种无监督学习问题:降维. 降维的一个作用是 ...

  7. 依赖VUE组件通讯机制实现场景游戏切换

  8. 详解C++右值引用

    C++0x标准出来很长时间了,引入了很多牛逼的特性[1].其中一个便是右值引用,Thomas Becker的文章[2]很全面的介绍了这个特性,读后有如醍醐灌顶,翻译在此以便深入理解. 目录 概述 mo ...

  9. [hdu1823]Luck and Love(二维线段树)

    解题关键:二维线段树模板题(单点修改.查询max) #include<cstdio> #include<cstring> #include<algorithm> # ...

  10. ios加载本地html

    UIWebView加载工程本地网页与本地图片 - (void)viewDidLoad { [super viewDidLoad]; NSString *filePath = [[NSBundle ma ...