Different way of creating UIViews in Swift

xib, storyboard and programatically creating views

You can create custom view using one of the way mentioned in below.

1. Using Storyboard
2. Using XIB
3. Creating views programatically.

To know more about the code and flow please download the sample project from GitHub here

Click here: To know pros and cons of storyboard, xib and programatic way of creating UIView

Storyboard

Storyboard represent the visual flow of app. It’s good to use when single person is working on the project. If you are working in a team, then using storyboard is difficult.

XIB

How can you create XIB for ViewController?

• Open Xcode ▸ File ▸ New ▸ File ▸ Cocoa Touch class ▸ Add your class name
• Select UIViewController or any subclass of ViewController i.e tableviewController under Subclass of ▸ Make sure Also create xib file is checked ▸ Select language ▸ Next ▸ Select target ▸ Create the xib and file under your project directory.
• It’ll automatically creates relationship between your class and xib.

How can you create XIB for View?

1. Open Xcode ▸ File ▸ New ▸ File ▸ Cocoa Touch class ▸ Add your class name ▸ Select UIView or subclass of UIView under Subclass of ▸ Select language ▸ Next ▸ Select target ▸ Create the source file under your project directory.

2. To create xib ▸ File ▸ New ▸ File ▸ View ▸ Add your view name ▸ Select target ▸ Create the xib under your project directory.

3. Change the size of View in xib to Freeform under attribute inspector tab

For your easy of use try to use same name for both view XIB and class.

How can you load custom XIB of ViewController/View to another ViewController/View?

1. Select view ▸ set Custom Classas view’s name
2. Design your custom view as per requirement and connect the outlets for the custom view

3. add method for loading XIB in custom class and call that method in default init or in custom init method

4. Finally Create a view object and add it to the parent ViewController/View where you need to load the custom view. Now your project look like this

1. CustomView with default init method and 2. CustomView with custom init method

1. Loading custom view in parent view controller with 3 different way 2. result

Loading Custom ViewController’s XIB

To demonstrate , I’m using main bundle you can use your own bundle name using

let bundleName = Bundle(for: type(of: self))

• get nib name by

let nibName = String(describing: type(of: self))

• Getting instance of a xib by providing xib name and bundle:

let nib = UINib(nibName: nibName, bundle: bundleName)

• Finally get view by instantiate() method

let view = nib.instantiate(withOwner: nil, options: nil).first as! UIView

Code for loading xib

The above approach for setting up the custom class for view works fine but there are few drawbacks as well.

To know more about the code and flow please download the sample project from GitHub here

what are the drawbacks of using above approach?

1. Before using the custom view in your project you need to load XIB e.g custom.xib every where. For loading xib you need to call instantiate() by sending nib and bundle name.
2. It is not possible to embed view’s xib as a subview in another xib/storyboard. If you try to embed the xib, initWithCoder method will call on the view’s xib. During parent xib load you’re not calling view’s load method anywhere. So this will create empty view. It will not show custom view as you designed in xib.
3. If you try to load custom view’s xib in initWithCoder method, it will cause the app crash.

Lets discuss why this crash happen with an example

• Consider you created a view’s xib.
• For loading view’s xib in parent view xib/storyboard, add child view inside parent view and add custom class as view’s name
• Now let us discuss how custom view is loaded by another xib/storyboard and what are the methods called.

1. First Parent view’s initWithCoder will call.
2. Parent view’s initWithCoder calls child view’s initWithCoder method.
3. Child view initWithCoder has method to load xib using nib.instantiate(withOwner: nil, options: nil)
4. Custom Class in custom view xib is set. Because of this nib.instantiate(withOwner: nil, options: nil) will again calls custom view’s initwithcoder method.
5. step 3 and 4 continues without finishing any task it leads to infinite loop.
6. Due to infinite loop, it leads to crash

How can you solve above problem and load view’s xib in another xib/storyboard?

For creating a custom view follow the same process which we discussed in How can you create XIB for View? section. After creating a view class and view’s xib, lets follow the steps

1. Instead of adding view’s class name to view. select File’s owner ▸ set Custom Classas view’s name

1. Added class name to file’s owner 2. create outlet for view’s subview and view

2. Create and Connect the top level view to File’s owner

3. Design the custom view as per your requirement and add outlet for the view’s class

4. Add code to load xib in the initialisers. You can embed custom view in other xib/storyboard or you can initialise programatically.

Code for loading xib

1. embed custom view in parent view controller, 2. result

In this approach you can call custom view in parent view as same as above approach and even you can embed the custom view in parent view.

AddingFile’s owner’s custom class defines temporarily relationship to help you to create outlets in interface builder. It does not define runtime relationship between class and xib. Creating an instance of class will not load elements from the xib and loading the xib will not create an instance of the class.

what is advantage of XIB?

• you can reuse views and code
• It’s work well when your working as a team
• It provide visual content and layout of a view
• you can create custom inits

what is disadvantage of XIB?

• Need to create xib for views and custom class separately
• Resolving merge conflicts in xibs is error-prone
• We need to write code for loading xib and establishing relationship between class and xib.
• To get a full picture of a UI component, you need to inspect both an Interface Builder file and a source code file
• There are too many ways of configuring a component via IB: Runtime attributes, multiple tabs with different settings, size-class-specific overrides, etc. This makes it difficult to spot which settings are overridden.

To know more about the code and flow please download the sample project from GitHub here

Creating Custom Views programatically

1. Open Xcode ▸ File ▸ New ▸ File ▸ Cocoa Touch class ▸ Add your class name ▸ Select UIView or subclass of UIView under Subclass of ▸ Select language ▸ Next ▸ Select target ▸ Create the source file under your project directory.
2. Programatically create subviews, layout and design your custom view as per requirement.
3. No need to create any xib for this.
4. Add layouts for each subviews and call the custom view from parent view or embed the view in another xib/storyboard.

1. Creating view programatically, 2. Result.

My suggestion is try to create view programatically. It’s easier for managing constraints and changing logic as well. Finally you’re the one need to decide which way is suitable for your project.

Creating custom view includes creating any type of view’s subclass that means creating custom button, textfield, textview etc.

To know more about the code and flow please download the sample project from GitHub here

I hope you find this blog helpful. If you enjoyed it, feel free to hit the clap button below 👏 to help others find it! and follow me on Medium. Thanks for reading. ❤❤❤❤