Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
【Swift】 それ、enumとstructでやってみましょう!!
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

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

  1. 1. IBDesignable / IBInspectable で UIプロトタイピンガブル
  2. 2. 自己紹介 @starfruits_j (Little Gleam)
  3. 3. 自己紹介 @starfruits_j (Oshikawa)
  4. 4. 自己紹介 hackadl
  5. 5. 株式会社Azione 元Webデザイナーのプログラマー、管理職 デコメーラー、モバスペブック 個人でもアプリ
  6. 6. Swift!?
  7. 7. Swift 採用決定!
  8. 8. Swift 2.0 採用決定!
  9. 9. Swift 処理が高速化される!? 安全! コーディングが高速化! コーディングデザインばっかり考えてしまって進まない!
  10. 10. 本題
  11. 11. IBDesignable / IBInspectable 使ってますか? XCode 6 から使える Interface Builder で修正できないものを変更可能に 変更内容をInterface Builder で確認できる
  12. 12. 使い方 import UIKit @IBDesignable class DesignableView: UIView { @IBInspectable var cornerRadius: CGFloat = 0 { didSet { layer.cornerRadius = cornerRadius } } }
  13. 13. Extension でも実装できます ! Extensions may not contain stored properties
  14. 14. Extension でも実装できます ※ (conputed propertyで) extension UIView { @IBInspectable var cornerRadius: CGFloat { get { return layer.cornerRadius }
  15. 15. set { layer.cornerRadius = newValue if newValue > 0 { layer.masksToBounds = true } } } }
  16. 16. やりすぎるとIBが大変 extensionは計画的に
  17. 17. 他にもこんな値が割り振れます * Bool * Int * CGFloat * Double * String * CGPoint * CGSize * CGRect * UIColor * UIImage
  18. 18. プロトタイピングツールとして Interface Builderを使う 去年くらいに話題になりました。
  19. 19. 画像を登録して、UIImage.imageNamedにセットしたり デザイナには少し敷居が高い そもそも画像を用意するなら、Illustratorでおk
  20. 20. IBDesignableを使えば より具体的なデザインが可能に
  21. 21. おすすめInspecterble
  22. 22. UIImageView.SVGNamed(named: String) UIImage+SVG等を利用してSVGのファイル名から画像表示。 xmlから作成もできるかも @IBDesignable class SVGImageView: UIImageView { @IBInspectable var SVGNamed: NSString? @IBInspectable var SVGImageSize: CGSize? @IBInspectable var SVGColor: UIColor?
  23. 23. override func awakeFromNib() { super.awakeFromNib() let size = SVGImageSize ?? frame.size image = UIImage(SVGNamed: SVGNamed, targetSize: size, fillColor: SVGColor) } }
  24. 24. UIImageView.iconFontNamed FontAwesomeKitを利用してFontIconの名前で画像表示。 @IBDesignable class IconFontImageButton: UIButton { @IBInspectable var iconFontNamed: String? { didSet { self.iconFont = IconFont(rawValue: iconFontNamed!)! } }
  25. 25. 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)
  26. 26. enumが使えないのが残念。一個一個マッピングして使ってま す enum IconFont: String { case None = "none" case ArrowBack = "ArrowBack"
  27. 27. 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) } }
  28. 28. UIButton.highlightedBackgroundColor @IBDesignable class DesignableButton: UIButton { @IBInspectable var highlightedBackgroundColor: UIColor? private var defaultBackgroundColor: UIColor?
  29. 29. override var highlighted: Bool { didSet { if highlighted { backgroundColor = highlightedBackgroundColor } else { backgroundColor = defaultBackgroundColor } } }
  30. 30. override func awakeFromNib() { super.awakeFromNib() defaultBackgroundColor = backgroundColor } }
  31. 31. 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になります あくまでも仮で表示したい場合に。
  32. 32. UIImageView.imageOrientation @IBInspectable var imageOrientation: Int = 0 { didSet { let orientation = UIImageOrientation(rawValue: imageOrientation)! image = UIImage(CGImage: image?.CGImage, scale: 0, orientation: orient } }
  33. 33. 他にも * UIButton.imageSize: insetで引き算するより使いやすい * UIImageView.placeHolderImage: SDWebImage等の非同期読み込み時の画像 * gradation, gradationDirection: UIColor 2つ と グラデーションする方向 * cornerRadius: CGFloat * borderCurcle: Bool * backgroundBlur: Bool (未確認) * borderColor * shadowColor * などなど
  34. 34. ところで
  35. 35. Swift 2.0 : 主な変更点 guard defer Error Handling Protocol Extension
  36. 36. Swift 2.0 : 主な変更点 guard defer Error Handling Protocol Extension
  37. 37. Protocol Extension Protocolに実装を持たせられる optionalなdelegateがSwiftでも書けるように Appleが積極的に採用 クラス継承->プロトコル継承に
  38. 38. 既存のクラスに横から差し込むように 実装を追加できる
  39. 39. 注意点 インスタンス変数は作れない 既存コードのオーバーライドは無理 名前の衝突の可能性 global functionの代わりと考える
  40. 40. なんとかブルって名前が多い Comparable, Reflectable, Printable, Sliceable...
  41. 41. こんなブルができたら 最高じゃないですか? @IBDesignable class RoundizeView: UIView, Roundable { }
  42. 42. BlurEffectable @IBDesignable class AccountCell: UITableViewCell, BlurEffectable { }
  43. 43. FontIconable @IBDesignable class UserView: UIView, FontIconable { }
  44. 44. できませんでした!
  45. 45. protocol Roundable: class { var cornerRadius: CGFloat { get set } }
  46. 46. extension Roundable where Self : UIView { @IBInspectable var cornerRadius: CGFloat { get { return layer.cornerRadius }
  47. 47. set { layer.cornerRadius = newValue if newValue > 0 { layer.masksToBounds = true } } } }
  48. 48. @IBDesignable class RoundableView: UIView, Roundable { override func awakeFromNib() { super.awakeFromNib() } }
  49. 49. @IBDesignable class RoundableImageView: UIImageView, Roundable { override func awakeFromNib() { super.awakeFromNib() } }
  50. 50. 理由 IBInspectableはinstance propertyにのみ設定可能 Protocol Extension にはインスタンス変数は作れない extension ならcomputed propertyで可能です
  51. 51. おわり 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
  • ShoheiOhno

    Mar. 3, 2016

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

Views

Total views

2,861

On Slideshare

0

From embeds

0

Number of embeds

318

Actions

Downloads

5

Shares

0

Comments

0

Likes

1

×