Date post: | 13-Jan-2017 |
Category: |
Engineering |
Upload: | istanbul-tech-talks |
View: | 298 times |
Download: | 3 times |
Mastering Interface Builder— Or how to stop cursing and love IB —
Dimitri Dupuis-Latour — @dupuislatour
Once Upon a TimeA brief History of IB
Interface Builder1986
IB History A Brief Story of Time…
2001
Mac OS X
1986
NeXT
2008
iPhone SDK
Modern IB History A Dramatic Acceleration of Features
2011iOS 5
AutoLayout(OSX)Storyboards
Segue
2010iOS 4
Xcode IntegrationAll-in-one window
2014iOS 8
IBDesignableIBInspectableSize ClassesCustom FontsLocalisation
2013iOS 7
New AutoLayoutiOS7 makeoverAsset Catalogs
2012iOS 6
AutoLayout(iOS)
Don’t use IB like your Grandfather ! It’s 2015
AgendaStoryboards
TableView ControllersStatic TableViews
Unwind SegueCustom Segue Icon Font
Vector artworkSecret shortcuts
StoryboardsMore than just a meta XIB
Storyboard
Storyboard• Bird’s eye view • Visual way describe workflow • Communication Tool • Living Documentation
Not Approved
• Split by Feature / Tab / Unit of workflow (eg: Login, Creation)
Split Your Storyboards ! No « One Storyboard to Rule Them All »
// STORYBOARD - Instantiate from code let storyboard = UIStoryboard(name:"LoginScreens", bundle:nil) let vc = storyboard.instantiateViewControllerWithIdentifier("MyCustomVC")
as MyCustomVC
• Chain your screens in IB
• Takes out the simpler .push() .presentViewController(), didSelectRowAtIndexPath()
• Handle the more complex ones in - prepareForSegue: (iOS) - contextForSegue: (WatchKit, iOS 9 ?)
Build Navigation Hierarchy in IB
• Design / communication tool
• Split them
• Removes some push() / present() code
• best feature…
Storyboards : Recap More than just a meta XIB
TableView ControllerMore than just a TableView + a Controller
• TableView Controllers = awesome
• TableView Controllers + Storyboard = Even Better !
TableView Controller
• Common setup for free: .delegate, .datasource, autoresizingMasks, editButton…
• Design your cell directly in the tableViewNo more extra xib just for a cell No more registerCell / registerClass
• Pull-to-Refresh for (almost) free
• Keyboard handling for free:Textfield at bottom of a form : will scroll up automagically
TableViewController Whether in a XIB or Storyboard
• Table-View like layoutwith known number of items
• Good examples:- Settings Screen- Detail View of a List View
Static TableView Cells Only within a Storyboard
Static TableView Cells Only within a Storyboard
• No dequeing
• No delegate to implement
• Directly set the number of cells & sections header/footer section title, etc…
• Outlet directly to a cell or a cell subview
• Mix static and dynamic cellsImplement delegates and call [super ] for static rows
Static TableView Cells Only within a Storyboard
Unwind SeguePush-pop-dismiss : sooo 2011
What are Unwind Segue ?
Auto-rewind to a specific screen
A B C D
E F GSubmit
navController.pop().pop() presentingController.dismiss() presentingController.navController.pop().pop().pop()
Problem 1: hardcoding Hierarchy in code
=> write custom @protocols => Store global variable / Singleton
Problem 2: passing data back to A
A B C D
E F GSubmit
A B C D
E F GSubmit
@IBAction func unwindTo### @IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}
Step 1
A B C D
E F GSubmit
a) manually (eg: immediate action) b) programmatically (eg: deferred action)Step 2
@IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}
A B C D
E F GSubmit
Step 2a - Manually
@IBAction func unwindToMyScreenA(segue: UIStoryboardSegue) {}
• Create a manual segue • ctrl-drag from File's Owner (VC) to Exit • choose Manual Segue • Select it in the outline view • Give it an Identifier "backToAPlease"
• Call it from Code
Step 2b - Programmatically
self.performSegueWithIdentifier("backToAPlease", sender:nil)
File's Owner Exit
• "Unwind" the navigation stack
• Including through push, modal, popover, tabs, etc…
• Passes data back (replacing custom @protocols)
• Less code
Unwind Segue : Recap
Custom SegueGo beyond push and modal
• Step 1) Select • Step 2) Set your class • Step 3) Enjoy !
Setup a Custom Segue
3DFlip Seguegithub.com/GlennChiu/
GC3DFlipTransitionStyleSegue
Fold Seguehttps://github.com/mpospese/
MPFoldTransition
DoorwaySeguegithub.com/jsmecham/DoorwaySegue
• Create your own transitions by subclassing UIStoryBoardSegue
• Componentize transistions in reusable blocks
• Share and reuse them !
Custom Segue : Recap Go beyond push & pop
Icon FontVector artwork, everywhere
Stop Using PNGs, Start using Vector Icons
with Icon Fonts
FontAwesome479 icons. 86 Ko.
IonIcon733 icons. 180 Ko. iOS7 style
Google Material Design
Custom FontMake Your Own !
• Vector !
• Light
• Change color, size, state, shadows… on the fly
• Works on the Web & Android too !
• No need for 3 resolutions for each icon
Advantages
Resolution Hell
RetinaRetina HD
Normal
Android : 2 more sizes !
Handle all color, size, state
! Record
! Recording…
! recorded: Today, 7:00pmEnregistrement #1 "
! recorded: Today, 7:00pmEnregistrement #1 "
!
2x
!
!
!
!
3x
!
!
!
!
1x
!
!
!
• Use directly • in IB • in Code (NSAttributedString)
• Use a helper framework : • FontAwesomeKit (iOS) • Iconify (Android)
Helper Frameworks
New in Interface Builder 6
• iOS library to ease FontAwesome Integration
• pod ‘FontAwesomeKit’
• Create / Modify / Stack icons from code
• Generates UIImage or NSAttributedString
• Bundles 4 popular Icon Fonts (1594 icons, 380Ko)
FontAwesomeKit github.com/PrideChung/FontAwesomeKit
Example: Attributed Text
Nom Prénom
# Paris, France⋆ ⋆ ⋆ ⋆ ⋆ 10 reviews&
@IBOutlet private weak var locationLabel: UILabel!
// …
let icon = FAKFontAwesome.locationArrowIconWithSize(30) locationLabel.attributedText = icon.attributedString()
Example: Attributed TextNom Prénom
# Paris, France⋆ ⋆ ⋆ ⋆ ⋆ 4,5&
@IBOutlet private weak var userPicture: UIImageView!
// …
let icon = FAKFontAwesome.userIconWithSize(30) icon.addAttribute(NSForegroundColorAttributeName, value:UIColor.lightGrayColor())
userPicture.image = icon.imageWithSize(CGSize(width: 44, height: 44)) userPicture.layer.borderColor = UIColor.darkGrayColor().CGColor userPicture.layer.borderWidth = 1 userPicture.layer.cornerRadius = 22
Example: User Picture Placeholder
Nom Prénom# Paris 9ème⋆ ⋆ ⋆ ⋆ ⋆ 4,5&
Example: Stacked Icons
// No Photos please ! let icons = [ FAKFontAwesome.photoIconWithSize(30), FAKFontAwesome.banIconWithSize(30) ]
let noPhotosPlease = UIImage(stackedIcons:icons, imageSize:CGSizeMake(30, 30))
• Great to centralize your assets, across your properties (website, iOS app, android app)
• Desktop Tools (Glyphs.app, FontLab…)
• Online Tools (icomoon.io, prototypo.io…)
• Check thenounproject.com
Creating your own Font Icons
The Noun Project Google Image for Icons
— Joan Zapata, Creator of Iconify Library
« If, like me, you're tired of copying 3 images (@1x, @2x, @3x) for each icon you want to use in your app, for each color you
want to use them with, and bang your head on the wall when you suddenly need to change their color or size, then I think
Icon Font can help you. »
Icon Fonts: One-sentence Summary
One More ThingKeybord Shortcuts
Click Through Views
+ctrl + click⏏ shift
Measure distances
⌥alt + mouse over
! Insert Emoji " Or any symbol really©�✔
+ctrl + space⌘ cmd
println("⛔ Found Error: ") println("⚠ Warning: ") println("✅ All Good: ")
RecapStoryboards
TableView ControllersStatic TableViews
Unwind SegueCustom Segue Icon Font
Vector artworkSecret shortcuts
Dimitri Dupuis-Latour ' @dupuislatour
Thank You !