Why Learn How to Create Custom View with Swift

Since one point, you might feel the UIs from CocoaTouch are not enough for you to provide excellent user experience.

So, you are looking for some ways to create your own.

And you might put your eye on custom view, write subclass of UIView or UIControl.

However, If you didn’t have the experience working with xib file.

That would be pain for reason about the concept and spend a lot time on it.

And….

Since I’ve been through this,

I feel that I’ve to write down my path of learning all this.

Let’s Start

Now, I want to say, It’s not hard or complex at all.

And for design the nice UI,

I’ll talk about four concepts in this post:

  1. How to load xib file
  2. How to use @IBDesignable
  3. How to use @IBInspectable
  4. Use custom view in storyboard

1. How to load xib file

So, first thing first,

if you want to create your own UIView subclass with xib,

you have to figure out how to connect the custom class with the xib file.

Now, That’s create and set up our custom class and xib.

Create new CocoaTouch Class, choose Subclass of UIView, language Swift Implement both init methods
  • init(frame:) will be implemented if you initialize this class programmatically
  • init?(coder:) will be implemented if create in xib or storyboard
import UIKit

class CustomView: UIView {

required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}

override init(frame: CGRect) {
super.init(frame: frame)
}
}
Create xib file associate with the class select User Interface and choose View then, go to the identity inspector of File's Owner Change custom class's class to CustomView
  • the name of xib have to be the same with the class
Screen Shot 2016-03-11 at 3.55.45 PM.png

Now, this xib file has recognize the class,

however, the class CustomView didn't know the xib yet, let's finish it! And, in my opinion, this is the most fun part, also most important!!

We have to add some methods into CustomView.swift

  • set up constant nibName as the same name with the class
let nibName = "WordDetailView"
  • create a method to load nib(nib == xib) file and return a UIView
func loadViewFromNib() -> UIView {
// grabs the appropriate bundle
let bundle = NSBundle(forClass: self.dynamicType)
let nib = UINib(nibName: nibName, bundle: bundle)
let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
return view
}
Here is the most interesting part, now you declare a view, which be the content view of your custom view. create new method to set up the view, and set the view's frame same as our CustomView's bounds, finally, the autoresizingMask for autolayout
  • There are different way to do this, I’m still learning, so if you have any opinion, please leave in the comment.
var view: UIView!
func xibSetUp() {
// setup the view from .xib
view = loadViewFromNib()
view.frame = self.bounds
view.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]
addSubview(view)
}
Finally, implement xibSetUp() in both init method
class CustomView: UIView {

let nibName = "CustomView"
var view : UIView!

required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
xibSetUp()
}

override init(frame: CGRect) {
super.init(frame: frame)
xibSetUp()
}

func xibSetUp() {
view = loadViewFromNib()
view.frame = self.bounds
view.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]
addSubview(view)
}

func loadViewFromNib() ->UIView {
let bundle = NSBundle(forClass: self.dynamicType)
let nib = UINib(nibName: nibName, bundle: bundle)
let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
return view
}
}

Now, you are good to go!

Your class now recognize the xib and will automatically load it whichever the init method been called.

Let’s us keep going…

Here is the github


Next article will include…

2. How to use @IBDesignable

3. How to use @IBInspectable

4. Use custom view in storyboard

Show your support

Clapping shows how much you appreciated Victor Lee’s story.