Category Archives: General

How to make awesome UI components in iOS 8 using Swift and XCode 6

In Xcode 6 two new interface builder declaration attributes were introduced: IBInspectable and IBDesignableIBInspectable exposes class properties in the interface builder Attribute Inspector, and IBDesignable updates the view in realtime! They are pure magic!

Here is a short tutorial on how to use IBInspectable and IBDesignable. It should take you around 10 minutes to go through all the steps. Get the code on GitHub.


These are the valid types for IBInspectable I found so far:

  • Int
  • CGFloat
  • Double
  • String
  • Bool
  • CGPoint
  • CGSize
  • CGRect
  • UIColor
  • UIImage


class DesignableView : UIView {
    @IBInspectable var integer: Int = 0
    @IBInspectable var float: CGFloat = 0
    @IBInspectable var double: Double = 0
    @IBInspectable var point: CGPoint = CGPointZero
    @IBInspectable var size: CGSize = CGSizeZero
    @IBInspectable var customFrame: CGRect = CGRectZero
    @IBInspectable var color: UIColor = UIColor.clearColor()
    @IBInspectable var string: String = "We ❤ Swift"
    @IBInspectable var bool: Bool = false

In the Attribute Inspector you will see this on top:


All this does is add some user defined runtime attributes that will set the initial values of the view when it loads.

The runtime attributes created:



Now for the fun part. IBDesignable tells Interface Builder that it can load the view and render it. The view class must be in a framework for this to work. But that is not a big inconvenience, as we will soon see. I think that under the hood Interface Builder converts your UIView code into NSView code so that it could dynamically load the framework and render the component.

Create a new project

Open Xcode 6, create a new “Single Page Application” and select Swift as the programming language.

Add a new target to you project

Select your project file from the navigator and add a new target by pressing the + button.


Select Framework & Application Library and choose the Cocoa Touch Framework.



Name it MyCustomView. Xcode will automatically link the MyCustomView.framework to your project.

Create a custom view class

Create a new swift file and add it in MyCustomView framework.

Right click on the framework’s directory.


Select Cocoa Touch File


Name it CustomView and make it a subclass of UIView


CustomView.swift should contain:

import UIKit

class CustomView: UIView {

    init(frame: CGRect) {
        super.init(frame: frame)
        // Initialization code

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect)
        // Drawing code


Remove the generated methods.

import UIKit

class CustomView: UIView {


Tell Xcode to render your view with the @IBDesignable keyword.

Add three properties: borderColor: UIColorborderWidth: CGFloatcornerRadius: CGFloat.

Set the default values and make them inspectable.

@IBDesignable class CustomView : UIView {
    @IBInspectable var borderColor: UIColor = UIColor.clearColor() 
    @IBInspectable var borderWidth: CGFloat = 0 
    @IBInspectable var cornerRadius: CGFloat = 0 

Add logic for the layer properties

Add property observers for each property and update the layer accordingly.

class CustomView : UIView {
    @IBInspectable var borderColor: UIColor = UIColor.clearColor() {
        didSet {
            layer.borderColor = borderColor.CGColor

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth

    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet {
            layer.cornerRadius = cornerRadius

Build the framework by pressing ⌘ Cmd + B.

Test the custom view

Open Main.storyboard and add a view from the component library.

Change the view class to CustomView using the Identity Inspector.


Arrange the view and add any autolayout constraints that are needed.

Tip: Hold Crtl + ⌘ Cmd then click and drag the mouse cursor from a view to another to add autolayout constraints.

After playing a bit with the cornerRadius I found out that it creates some interesting patterns when you add big values.


Get the code on GitHub

Happy coding 🙂 Have fun 🙂

Welcome to AppMills


Thank you for visiting our blog .

AppMills is a technology blog dedicated for mobile apps. We are a team of programmers who develop mobile apps for all platforms including iOS, Android and Blackberry. We develop apps for iPhone, iPad, Android phones and and other smartphones.

For the past 3 years we were working in mobile platforms and developed both native and hybrid apps. Through this blog we are planning to showcase our skills and experience from the past years and to help other mobile programmers. In our free time we write tutorials along with sample code for both native iOS, Android app and hybrid apps in html.