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

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

自己紹介
@starfruits_j (Little Gleam)

自己紹介
@starfruits_j (Oshikawa)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)

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

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)
}
}

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

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

defaultBackgroundColor = backgroundColor
}
}

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になります
あくまでも仮で表示したい場合に。

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

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

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

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

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

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

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

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

BlurEffectable
@IBDesignable class AccountCell: UITableViewCell, BlurEffectable {
}

FontIconable
@IBDesignable class UserView: UIView, FontIconable {
}

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

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

@IBDesignable class RoundableView: UIView, Roundable {
}
}

@IBDesignable class RoundableImageView: UIImageView, Roundable {
}
}

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

おわり
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

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

More Related Content

What's hot (9)

Similar to IBDesignable / IBInspectable で UIプロトタイピンガブル (20)

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