Help us understand the problem. What is going on with this article?

StoryboardやNibを超絶便利に使う技

More than 3 years have passed since last update.

はじめに

Storyboardを使って枠線をいじるとき、こんなことしてませんか?
スクリーンショット 2015-10-18 22.40.14.png
謎のKeyPathとTypeを設定する方法しかなかったと思います。
自分もこの方法を使って実現させていました。

しかし!!

もうこんな不毛な作業をやる必要がなくなる便利機能があります!
というわけで@IBInspectable@IBDesignableという便利な機能について紹介します!
これらはXcode6以上で使えるようになったものです。

@IBInspectableについて

@IBInspectableとは、これを指定したプロパティは
IBを表示した時の右カラムにプロパティとして表示されることが出来ます。

例として、UIViewのサブクラスのCustomViewにプロパティ定義してみました。

CustomView.swift
import UIKit

class CustomView: UIView {
    @IBInspectable var customBool   : Bool      = false
    @IBInspectable var customInt    : Int       = 0
    @IBInspectable var customFloat  : CGFloat   = 0.0
    @IBInspectable var customDouble : Double    = 0.0
    @IBInspectable var customString : String    = ""
    @IBInspectable var customPoint  : CGPoint   = CGPointZero
    @IBInspectable var customSize   : CGSize    = CGSizeZero
    @IBInspectable var customRect   : CGRect    = CGRectZero
    @IBInspectable var customColor : UIColor   = UIColor.clearColor()
    @IBInspectable var customImage  : UIImage   = UIImage()
}

IB上でCustomView.swiftをCustomClassに入れると、、、
スクリーンショット_2015-10-18_15_34_24.png
このように表示されます。
スクリーンショット 2015-10-18 15.35.55.png

ちなみに追加出来る型はコチラです。

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

これはExtensionクラスでも出来ます。
ただしComputed Propertyのみに限られます(getとsetがあるプロパティです)
こんな感じでやれば、、、

UIView+Extension.swift
import UIKit

extension UIView {
    @IBInspectable var extensionBool : Bool {
        get {
            return self.extensionBool
        }
        set (newValue) {
            self.extensionBool = newValue
        }
    }
    @IBInspectable var extensionInt : Int {
        get {
            return self.extensionInt
        }
        set (newValue) {
            self.extensionInt = newValue
        }
    }
}

UIViewのプロパティとしてIB上に出てくれます。
スクリーンショット 2015-10-18 20.55.10.png

IB上からプロパティの値をいじりたい時は重宝しますね!

@IBDesignableについて

@IBDesignable@IBInspectableと併用して使うことで
いちいちビルドしてUI確認する作業を減らすことが出来ます!
IB上に出てきたプロパティをいじるとライブレンダリングしてくれるからです!

使い方は簡単。
こんな感じでクラスの前に@IBDesignableをつけるだけです。
このクラスはViewの枠線や色のプロパティをIB上でいじれるようになってます。

CustomView.swift
import UIKit

@IBDesignable
class CustomView : UIView {
    @IBInspectable var borderWidth : CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var borderColor : UIColor = UIColor.clearColor() {
        didSet {
            layer.borderColor = borderColor.CGColor
        }
    }

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

例の如くCustom ClassにCustomViewを設定します。
スクリーンショット_2015-10-18_21_57_32.png

プロパティをセットできるので、セットしてみると、、、
スクリーンショット_2015-10-18_21_59_54.png

その場でプロパティが反映されます!!
ほらほらほら!
スクリーンショット_2015-10-18_22_00_59.png

と、いうわけでこれで便利にStoryboardを使った開発ができますね!

終わりに

今まではIB上でlayer系の作業をするときはKeyPathとTypeを指定していた
or
そこだけコードで定義していたかと思います。
今回のこの方法を使えば、いちいちビルドしてUI確認をすることなく、
IB上でプロパティをいじるだけでUI確認が出来るのです!
難しくないので是非、使ってみてください!

サンプルコード

Githubにサンプルプロジェクトを置いておきました。
ご自由にお使い下さい。
https://github.com/AcaiBowl/LiveRenderingSample

質問や指摘があればコメントでお待ちしております!

trsxxii
iOS/Android Developer. Swift, Objective-C, Java... Follow me!!!
recruitlifestyle
飲食・美容・旅行領域の情報サイトや『Airレジ』などの業務支援サービスなど、日常消費領域に関わるサービスの提供するリクルートグループの中核企業
http://www.recruit-lifestyle.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした