Suche senden
Hochladen
IBDesignable / IBInspectable で UIプロトタイピンガブル
•
1 gefällt mir
•
2,929 views
Masaki Oshikawa
Folgen
IBDesignable / IBInspectable を Swift2 の Protocol Extension で UIプロトタイピングに利用しようという話です。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 53
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Obj-CをSwiftにリプレースするお話
Obj-CをSwiftにリプレースするお話
Hitoshi Saito
iOSで動画からスクショを撮る方法
iOSで動画からスクショを撮る方法
Tomo Ita
UI要素を動的に利用する
UI要素を動的に利用する
HideoMiyake
ピタゴラスイッチでAWS自動化(JAWS-UG-LT @shimy_net )
ピタゴラスイッチでAWS自動化(JAWS-UG-LT @shimy_net )
崇之 清水
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
Hiroyuki Kusu
AWSはとんでもないものを盗んでいきました(JawsDays2013@shimy_net)
AWSはとんでもないものを盗んでいきました(JawsDays2013@shimy_net)
崇之 清水
東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会
Kazuyuki Honda
類似画像検索APIを作ってみた話
類似画像検索APIを作ってみた話
K Kimura
Empfohlen
Obj-CをSwiftにリプレースするお話
Obj-CをSwiftにリプレースするお話
Hitoshi Saito
iOSで動画からスクショを撮る方法
iOSで動画からスクショを撮る方法
Tomo Ita
UI要素を動的に利用する
UI要素を動的に利用する
HideoMiyake
ピタゴラスイッチでAWS自動化(JAWS-UG-LT @shimy_net )
ピタゴラスイッチでAWS自動化(JAWS-UG-LT @shimy_net )
崇之 清水
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
Hiroyuki Kusu
AWSはとんでもないものを盗んでいきました(JawsDays2013@shimy_net)
AWSはとんでもないものを盗んでいきました(JawsDays2013@shimy_net)
崇之 清水
東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会
Kazuyuki Honda
類似画像検索APIを作ってみた話
類似画像検索APIを作ってみた話
K Kimura
ふくあず#8
ふくあず#8
Atsushi Kojima
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
JqueryMobile
JqueryMobile
Hazuki Wakabayashi
Amplify Console使ってみたらいい感じ
Amplify Console使ってみたらいい感じ
Osamu Hashimoto
エンジニアのUI/UXはじめの一歩
エンジニアのUI/UXはじめの一歩
HonMarkHunt
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
ここにハマった!Dockerコンテナホスティング「Arukas」の裏側
ここにハマった!Dockerコンテナホスティング「Arukas」の裏側
Shuji Yamada
現場!実物!実践!マルチクラスタを運用するときの課題とコツ
現場!実物!実践!マルチクラスタを運用するときの課題とコツ
Shuji Yamada
Core Animation 使って見た
Core Animation 使って見た
OCHI Shuji
20121201yidev hirobe iPad miniでRetina
20121201yidev hirobe iPad miniでRetina
Kazuya Hirobe
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
Fumiya Sakai
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
佐藤 俊太郎
Wolcome to swift
Wolcome to swift
Kyohei Ito
FlutterをRenderObjectまで理解する
FlutterをRenderObjectまで理解する
KeisukeKiriyama
Unityの夕べ in Fukuoka
Unityの夕べ in Fukuoka
Shinobu Izumi
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
日本マイクロソフト株式会社
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
Yusuke Tochigi
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜
Yusuke SAITO
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
機械学習 (AI/ML) 勉強会 #1 基本編
機械学習 (AI/ML) 勉強会 #1 基本編
Fujio Kojima
iOS WebView App
iOS WebView App
hagino 3000
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
Fumiya Sakai
Weitere ähnliche Inhalte
Was ist angesagt?
ふくあず#8
ふくあず#8
Atsushi Kojima
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
JqueryMobile
JqueryMobile
Hazuki Wakabayashi
Amplify Console使ってみたらいい感じ
Amplify Console使ってみたらいい感じ
Osamu Hashimoto
エンジニアのUI/UXはじめの一歩
エンジニアのUI/UXはじめの一歩
HonMarkHunt
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
ここにハマった!Dockerコンテナホスティング「Arukas」の裏側
ここにハマった!Dockerコンテナホスティング「Arukas」の裏側
Shuji Yamada
現場!実物!実践!マルチクラスタを運用するときの課題とコツ
現場!実物!実践!マルチクラスタを運用するときの課題とコツ
Shuji Yamada
Core Animation 使って見た
Core Animation 使って見た
OCHI Shuji
Was ist angesagt?
(9)
ふくあず#8
ふくあず#8
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
JqueryMobile
JqueryMobile
Amplify Console使ってみたらいい感じ
Amplify Console使ってみたらいい感じ
エンジニアのUI/UXはじめの一歩
エンジニアのUI/UXはじめの一歩
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
ここにハマった!Dockerコンテナホスティング「Arukas」の裏側
ここにハマった!Dockerコンテナホスティング「Arukas」の裏側
現場!実物!実践!マルチクラスタを運用するときの課題とコツ
現場!実物!実践!マルチクラスタを運用するときの課題とコツ
Core Animation 使って見た
Core Animation 使って見た
Ähnlich wie IBDesignable / IBInspectable で UIプロトタイピンガブル
20121201yidev hirobe iPad miniでRetina
20121201yidev hirobe iPad miniでRetina
Kazuya Hirobe
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
Fumiya Sakai
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
佐藤 俊太郎
Wolcome to swift
Wolcome to swift
Kyohei Ito
FlutterをRenderObjectまで理解する
FlutterをRenderObjectまで理解する
KeisukeKiriyama
Unityの夕べ in Fukuoka
Unityの夕べ in Fukuoka
Shinobu Izumi
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
日本マイクロソフト株式会社
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
Yusuke Tochigi
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜
Yusuke SAITO
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
機械学習 (AI/ML) 勉強会 #1 基本編
機械学習 (AI/ML) 勉強会 #1 基本編
Fujio Kojima
iOS WebView App
iOS WebView App
hagino 3000
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
Fumiya Sakai
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
WKWebViewとUIWebView
WKWebViewとUIWebView
Yuki Hirai
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
Nobuhiro Sue
vImageのススメ(改訂版)
vImageのススメ(改訂版)
Shuichi Tsutsumi
Xamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみた
Hironov OKUYAMA
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
yoshikawa_t
Ähnlich wie IBDesignable / IBInspectable で UIプロトタイピンガブル
(20)
20121201yidev hirobe iPad miniでRetina
20121201yidev hirobe iPad miniでRetina
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
RxDataSourceをNSDiffableDataSourceへ置き換える際のTips集紹介
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
Wolcome to swift
Wolcome to swift
FlutterをRenderObjectまで理解する
FlutterをRenderObjectまで理解する
Unityの夕べ in Fukuoka
Unityの夕べ in Fukuoka
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
LabVIEW NXG Web Module Training Slide
LabVIEW NXG Web Module Training Slide
iPhoneアプリ開発の歩き方〜Swift編〜
iPhoneアプリ開発の歩き方〜Swift編〜
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
機械学習 (AI/ML) 勉強会 #1 基本編
機械学習 (AI/ML) 勉強会 #1 基本編
iOS WebView App
iOS WebView App
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
試して感覚を掴んでみるUICollectionViewCompositionalLayout & Combine
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Css nite(2010.09.23)
Css nite(2010.09.23)
WKWebViewとUIWebView
WKWebViewとUIWebView
20111031 MobileWeb at TDC
20111031 MobileWeb at TDC
vImageのススメ(改訂版)
vImageのススメ(改訂版)
Xamarin で ReactiveUI を使ってみた
Xamarin で ReactiveUI を使ってみた
jQuery Mobileカスタマイズ自由自在 v1.2
jQuery Mobileカスタマイズ自由自在 v1.2
Kürzlich hochgeladen
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Kürzlich hochgeladen
(11)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
IBDesignable / IBInspectable で 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 } } }
13.
14.
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
Jetzt herunterladen