Xcode6から新たに導入されたIBInspectableというのを使って、コードを一切書かずに値を設定できるようにする方法を紹介します。

自作Viewを作っている人には嬉しいことだと思います。

なにより、ソースコードを書かなくてよくなりますからね。

ちなみにXcode6の新機能ですが、Objective-CでもSwiftでも使えます。

とっても簡単に導入できるので、ぜひ使ってみてください。

SwiftでIBInspectableを使う

まだSwiftを使って、自作Viewを作る人はいないのかな。

まずはソースコードになります。

NACustomSwift.swift
1
2
3
4
5
6
7
import UIKit
class NACustomViewSwift: UIView {
@IBInspectable var string: String = "HOGE";
@IBInspectable var point: CGPoint = CGPointZero;
@IBInspectable var size: CGSize = CGSizeZero;
@IBInspectable var rect: CGRect = CGRectZero;
}

そしてNACustomSwiftクラスをstoryboard上でCustomClassに指定します。

そうすると以下のスクショみたいになると思います。

ScreenShot21

ごめんさない。値を代入した後のスクショになってしまってました…。

ちなみにCustomClassはこのような感じです。

ScreenShot22

というように裏でUser Defined Runtime Attributesに値が代入されています。

では次はObjective-Cで書きます。

Objective-CでIBInspectableを使う

NACustomView.h
1
2
3
4
5
6
7
#import <UIKit/UIKit.h>
@interface NACustomView : UIView
@property (nonatomic, copy) IBInspectable NSString *string;
@property (nonatomic) IBInspectable CGPoint point;
@property (nonatomic) IBInspectable CGSize size;
@property (nonatomic) IBInspectable CGRect rect;
@end
NACustomView.m
1
2
3
4
5
#import "NACustomView.h"
@interface NACustomView()
@end
@implementation NACustomView
@end

とほとんど代わり映えはありません。

そうするとSwiftの時と同じようなスクショになりますが、以下のようになります。

ScreenShot20

ちなみにCustomClassはこのような感じです。

ScreenShot23

確認してみる

こんな事して本当に値が入っているのかよって思う人用に、ログとって見ました。

ViewController.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
class ViewController: UIViewController, NAAdViewDelegate {
@IBOutlet weak var customView: NACustomView!
@IBOutlet weak var sCustomView: NACustomViewSwift!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
println("NACustomView IBInspectable")
println("string = \(self.customView.string)")
println("point = \(self.customView.point)")
println("size = \(self.customView.size)")
println("rect = \(self.customView.rect)")
println("NACustomViewSwift @IBInspectable")
println("string = \(self.sCustomView.string)")
println("point = \(self.sCustomView.point)")
println("size = \(self.sCustomView.size)")
println("rect = \(self.sCustomView.rect)")
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

出力結果は以下のようになります。

1
2
3
4
5
6
7
8
9
10
NACustomView IBInspectable
string = HOGE
point = (5.0,0.0)
size = (0.0,7.0)
rect = (7.0,4.0,5.0,6.0)
NACustomViewSwift @IBInspectable
string = HOGE
point = (6.0,0.0)
size = (0.0,7.0)
rect = (7.0,4.0,1.0,2.0)

あ、Objective-Cのクラスを使うときはちゃんとBridging-Headerファイルを用意してください。

こんな感じで簡単に値をUIで設定できるので、結構必須の機能かと思いますので紹介しました。

終わりに

これを発見したのは本当にたまたまです。

Swiftではこの機能とIBDesignableなるものを使ってstoryboard上で描画まで出来るようになっているらしいです。

気になる方は参考のURLをご覧くださいませ。

以上になります。

参考

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

iOS

「iOS」のおすすめ記事