IBDesignable / IBInspectable を Swift2 の Protocol Extension で UIプロトタイピングに利用しようという話です。

1. IBDesignable / IBInspectable で
UIプロトタイピンガブル

2. 自己紹介
@starfruits_j (Little Gleam)

3. 自己紹介
@starfruits_j (Oshikawa)

4. 自己紹介
hackadl

5. 株式会社Azione
元Webデザイナーのプログラマー、管理職
デコメーラー、モバスペブック
個人でもアプリ

6. Swift!?

7. Swift 採用決定！

8. Swift 2.0 採用決定！

9. Swift
処理が高速化される！？
安全！
コーディングが高速化！
コーディングデザインばっかり考えてしまって進まない！

10. 本題

11. IBDesignable / IBInspectable
使ってますか？
XCode 6 から使える
Interface Builder で修正できないものを変更可能に
変更内容をInterface Builder で確認できる

12. 使い方
import UIKit
@IBDesignable class DesignableView: UIView {
@IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
}
}
}

15. Extension でも実装できます
! Extensions may not contain stored properties

16. Extension でも実装できます
※ (conputed propertyで)
extension UIView {
@IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}

17. set {
layer.cornerRadius = newValue
if newValue > 0 {
layer.masksToBounds = true
}
}
}
}

18. やりすぎるとIBが大変
extensionは計画的に

19. 他にもこんな値が割り振れます
* Bool
* Int
* CGFloat
* Double
* String
* CGPoint
* CGSize
* CGRect
* UIColor
* UIImage

20. プロトタイピングツールとして
Interface Builderを使う
去年くらいに話題になりました。

21. 画像を登録して、UIImage.imageNamedにセットしたり
デザイナには少し敷居が高い
そもそも画像を用意するなら、Illustratorでおk

22. IBDesignableを使えば
より具体的なデザインが可能に

23. おすすめInspecterble

24. UIImageView.SVGNamed(named: String)
UIImage+SVG等を利用してSVGのファイル名から画像表示。
xmlから作成もできるかも
@IBDesignable class SVGImageView: UIImageView {
@IBInspectable var SVGNamed: NSString?
@IBInspectable var SVGImageSize: CGSize?
@IBInspectable var SVGColor: UIColor?

25. override func awakeFromNib() {
super.awakeFromNib()
let size = SVGImageSize ?? frame.size
image = UIImage(SVGNamed: SVGNamed,
targetSize: size,
fillColor: SVGColor)
}
}

26. UIImageView.iconFontNamed
FontAwesomeKitを利用してFontIconの名前で画像表示。
@IBDesignable class IconFontImageButton: UIButton {
@IBInspectable var iconFontNamed: String? {
didSet {
self.iconFont = IconFont(rawValue: iconFontNamed!)!
}
}

27. var iconFont: IconFont = .None {
didSet {
updateImage()
}
}
@IBInspectable var iconPoint: CGFloat = CGFloat.NaN {
didSet {
updateImage()
}
}
private func updateImage() {
let point = iconPoint.isNaN ? min(frame.size.width, frame.size.height) : icon
let img = iconFont.image(point: point, outSize: frame.size)

28. enumが使えないのが残念。一個一個マッピングして使ってま
す
enum IconFont: String {
case None = "none"
case ArrowBack = "ArrowBack"

29. func image(point point: CGFloat, outSize: CGSize) -> UIImage? {
var icon: FAKIonIcons? = nil
switch self {
case .None:
break
case .ArrowBack:
icon = FAKIonIcons.iosArrowBackIconWithSize(point)
}
return icon?.imageWithSize(outSize)
}
}

30. UIButton.highlightedBackgroundColor
@IBDesignable class DesignableButton: UIButton {
@IBInspectable var highlightedBackgroundColor: UIColor?
private var defaultBackgroundColor: UIColor?

31. override var highlighted: Bool {
didSet {
if highlighted {
backgroundColor = highlightedBackgroundColor
} else {
backgroundColor = defaultBackgroundColor
}
}
}

32. override func awakeFromNib() {
super.awakeFromNib()
defaultBackgroundColor = backgroundColor
}
}

33. UIImageView.imageURLString
@IBDesignable class DesignableImageView: UIImageView {
@IBInspectable var imageURLString: String = "" {
didSet {
if let URL = NSURL(string: imageURLString) {
image = UIImage(data: NSData(contentsOfURL: URL)!)
}
}
}
}
※ レンダリングの処理が200msを超えるとtimeoutになります
あくまでも仮で表示したい場合に。

34. UIImageView.imageOrientation
@IBInspectable var imageOrientation: Int = 0 {
didSet {
let orientation = UIImageOrientation(rawValue: imageOrientation)!
image = UIImage(CGImage: image?.CGImage, scale: 0, orientation: orient
}
}

35. 他にも
* UIButton.imageSize: insetで引き算するより使いやすい
* UIImageView.placeHolderImage: SDWebImage等の非同期読み込み時の画像
* gradation, gradationDirection: UIColor 2つ と グラデーションする方向
* cornerRadius: CGFloat
* borderCurcle: Bool
* backgroundBlur: Bool (未確認)
* borderColor
* shadowColor
* などなど

36. ところで

37. Swift 2.0 : 主な変更点
guard
defer
Error Handling
Protocol Extension

38. Swift 2.0 : 主な変更点
guard
defer
Error Handling
Protocol Extension

39. Protocol Extension
Protocolに実装を持たせられる
optionalなdelegateがSwiftでも書けるように
Appleが積極的に採用
クラス継承->プロトコル継承に

40. 既存のクラスに横から差し込むように
実装を追加できる

41. 注意点
インスタンス変数は作れない
既存コードのオーバーライドは無理
名前の衝突の可能性
global functionの代わりと考える

42. なんとかブルって名前が多い
Comparable, Reflectable, Printable, Sliceable...

43. こんなブルができたら
最高じゃないですか？
@IBDesignable class RoundizeView: UIView, Roundable {
}

44. BlurEffectable
@IBDesignable class AccountCell: UITableViewCell, BlurEffectable {
}

45. FontIconable
@IBDesignable class UserView: UIView, FontIconable {
}

46. できませんでした！

47. protocol Roundable: class {
var cornerRadius: CGFloat { get set }
}

48. extension Roundable where Self : UIView {
@IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}

49. set {
layer.cornerRadius = newValue
if newValue > 0 {
layer.masksToBounds = true
}
}
}
}

50. @IBDesignable class RoundableView: UIView, Roundable {
override func awakeFromNib() {
super.awakeFromNib()
}
}

51. @IBDesignable class RoundableImageView: UIImageView, Roundable {
override func awakeFromNib() {
super.awakeFromNib()
}
}

52. 理由
IBInspectableはinstance propertyにのみ設定可能
Protocol Extension にはインスタンス変数は作れない
extension ならcomputed propertyで可能です

53. おわり
Protocol ExtensionについてはTomohiro Kumagai @es_kumagai
さんの資料が参考になります
Swift 2.0 大域関数の行方から#swift2symposium
プロトコル拡張の話？ #WWDC21cafe
http://www.slideshare.net/tomohirokumagai54/swift-20-
49927701
http://www.slideshare.net/tomohirokumagai54/wwdc21cafe