kkbox wwdc17 uikit - qq
TRANSCRIPT
![Page 1: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/1.jpg)
WWDC17 讀書會
QQ Shih
UIKit
2017/07/07
![Page 2: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/2.jpg)
• What’s new in Cocoa Touch
• The keys to a better text input experience
• Introducing password autofill for apps
• Building apps with dynamic type
• Updating your app for iOS 11
• Advanced animations with UIKit
![Page 3: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/3.jpg)
What’s new in Cocoa Touch
![Page 4: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/4.jpg)
•Drag and Drop
![Page 5: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/5.jpg)
Drag and Drop Enabling drags
let drag = UIDragInteraction(delegate: self) iconView.addInteraction(drag)
UIDragInteractionDelegate • Provide data for dragged item • Customize lift animation • Customize preview
![Page 6: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/6.jpg)
Drag and Drop Enabling drops
let drop = UIDropInteraction(delegate: self) iconContainerView.addInteraction(drop)
UIDropInteractionDelegate • Update UI as drag moves • Receive data on drop • Customize drop animation
![Page 7: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/7.jpg)
Drag and Drop Easy to adopt
Introducing Drag and Drop Hall 3 Tuesday 11:20AM
Mastering Drag and Drop Executive Ballroom Wednesday 11:00AM
Drag and Drop with Collection and Table View Hall 2 Thursday 9:00AM
Data Delivery with Drag and Drop Hall 2 Thursday 10:00AM
Built-in support • TableView, CollectionView, TextView, TextField, WebView
Integration with UIPasteConfiguration
![Page 8: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/8.jpg)
File management
![Page 9: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/9.jpg)
Highly customizable
Access to local documents and cloud storage
Be sure to coordinate file access• NSFileCoordinator or UIDocument
File Management UIDocumentBrowserViewController
Building Great Document-Based Apps in iOS 11 Hall 2 Thursday 1:50PM
class UIDocumentBrowserViewController { init(forOpeningFilesWithContentTypes: [String]?) var delegate: UIDocumentBrowserViewControllerDelegate?
}
![Page 10: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/10.jpg)
![Page 11: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/11.jpg)
class UINavigationBar { var prefersLargeTitle: Bool
}
Enabling Large Titles
class UINavigationItem { var largeTitleDisplayMode: LargeTitleDisplayMode
}
![Page 12: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/12.jpg)
Enabling Unified Search
class UINavigationItem { var searchController: UISearchController?
}
![Page 13: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/13.jpg)
Safe Area Insets
class UIView {
// auto layout var safeAreaLayoutGuide: UILayoutGuide { get }
// manual layout var safeAreaInsets: UIEdgeInsets { get }
func safeAreaInsetsDidChange()
}
![Page 14: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/14.jpg)
class UIViewController { func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge
}
![Page 15: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/15.jpg)
Asset Catalogs Colors and icons
class UIColor { init?(named name: String)
}
Wide gamut color support
Wide gamut colors for icons
App thinning for icons
![Page 16: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/16.jpg)
Asset Catalogs PDF-backed images
Preserve vector data if• Image used at multiple sizes• Symbolic glyph that resizes with dynamic type• Tab bar image
![Page 17: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/17.jpg)
Localization Guide https://developer.apple.com/internationalization
![Page 18: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/18.jpg)
The keys to a better text input experiece
![Page 19: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/19.jpg)
Text Input Context Identifier
class ConversationViewController: UITableViewController, UITextViewDelegate {
// ... other code ...
override var textInputContextIdentifier: String? {
// Returning some unique identifier here allows the keyboard to remember
// which language the user was typing in when they were last communicating
// with this person.
// It can be anything, as long as it's unique to each
// recipient (here we're just returning the name)
return self.conversation?.otherParticipant
}
// ... other code ...
}
Multilingual
![Page 20: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/20.jpg)
Content Types for Password AutoFill
Introducing Password AutoFill for Apps WWDC 2017
NEW
Log In
UITextContentTypeUsername
UITextContentTypePassword
![Page 21: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/21.jpg)
Smart Quote and Smart Dash
Hyphen: 1-dash - ➜ -
En dash: 2-dash - - ➜ –
Em dash: 3-dash - - - ➜ —
SF Hello "a" “a”
Helvetica Neue "a" “a”
Lucida Grande "a" “a”Avenir "a" “a”
Myriad Set "a" “a”
NEW
![Page 22: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/22.jpg)
New APIs in iOS 11
Selected text
documentIdentifier handle
Ability to query for full access
NEW
![Page 23: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/23.jpg)
Full Access and Privacy
Value in not asking for full access
Communicating with your main app
Networking
Current location
Address book
Keyboard needs to work without it
![Page 24: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/24.jpg)
Introducing password autofill for apps
![Page 25: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/25.jpg)
Make the QuickType Bar Appear Use UITextContentType
Deploy content types to guarantee AutoFill is available
Can set in code or through Interface Builder
UITextContentType.username enables AutoFill for two-screen login
You can combine UITextContentType.username and UIKeyboardType.emailAddress
UITextContentType.password enables AutoFill for “revealed” passwords
![Page 26: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/26.jpg)
![Page 27: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/27.jpg)
Associated Domains File Where to serve the file
https://example.com/.well-known/apple-app-site-association
https://example.com/apple-app-site-association
![Page 28: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/28.jpg)
![Page 29: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/29.jpg)
Building app with dynamic type
![Page 30: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/30.jpg)
Goals
Text is large enough for the user to read
Text is fully readable
App UI looks beautiful
Design For Everyone WWDC 2017
![Page 31: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/31.jpg)
•Scaling Font Sizes
![Page 32: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/32.jpg)
![Page 33: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/33.jpg)
![Page 34: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/34.jpg)
![Page 35: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/35.jpg)
![Page 36: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/36.jpg)
Text Styles
Standard Sizes Accessibility Sizes
NEW
![Page 37: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/37.jpg)
Text Styles NEW
![Page 38: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/38.jpg)
Custom Fonts
label.font = UIFontMetrics.default.scaledFont(for: customFont)
NEW
![Page 39: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/39.jpg)
•Accommodating Large Text
![Page 40: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/40.jpg)
![Page 41: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/41.jpg)
.extraSmall .extraExtraExtraLarge
.large
traitCollection.preferredContentSizeCategoryUIApplication.shared.preferredContentSizeCategory
![Page 42: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/42.jpg)
Make Layout Decisions Based on Text Size
if traitCollection.preferredContentSizeCategory.isAccessibilityCategory { // Vertically stack } else { // Lay out side by side }
NEW
![Page 43: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/43.jpg)
Make Layout Decisions Based on Text Size
if traitCollection.preferredContentSizeCategory > .extraExtraLarge { // Vertically stack } else { // Lay out side by side }
NEW
![Page 44: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/44.jpg)
Default Table View Behaviors in iOS 11
Standard table view cells adapt layout for Dynamic Type
Cell heights are based on their content
NEW
![Page 45: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/45.jpg)
•Images
![Page 46: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/46.jpg)
Allow Images to Scale Up
Provide PDF at 1x scale
NEW
![Page 47: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/47.jpg)
Allow Images to Scale UpNEW
![Page 48: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/48.jpg)
Allow Bar Item Images to Scale SmoothlyNEW
![Page 49: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/49.jpg)
Updating your app for iOS 11
![Page 50: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/50.jpg)
![Page 51: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/51.jpg)
UIBarItem
UIBarItem.landscapeImagePhoneUIBarItem.largeContentSizeImage
![Page 52: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/52.jpg)
Manage margin and insets
![Page 53: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/53.jpg)
NEW
Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.
TitlelayoutMargins
directionalLayoutMargins
![Page 54: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/54.jpg)
NEW
Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.
Title
.trailing
.left
.leading
.right
![Page 55: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/55.jpg)
NEW
Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.
Title
.trailing = 30
![Page 56: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/56.jpg)
NEW
Here’s to the crazy ones. The misfits. The rebels. The
troublemakers. The round pegs in the square holes. The ones who see
things differently. They’re not fond of rules. And they have no respect
for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you
can’t do is ignore them. Because they change things. They push the
human race forward. And while some may see them as the crazy
ones, we see genius. Because the people who are crazy enough to
think they can change the world, are the ones who do.
כותרת
.left = 30
.trailing = 30
![Page 57: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/57.jpg)
NEW
Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the
Title
systemMinimumLayoutMargins
directionalLayoutMargins
class MyViewController: UIViewController { override func viewDidLoad() { viewRespectsSystemMinimumLayoutMargins = true // default
} }
![Page 58: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/58.jpg)
safeAreaInsets.bottom
safeAreaInsets.top
![Page 59: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/59.jpg)
Safe Area
Describes area of view not occludedby ancestors
Available as insets or layout guide
Incorporates overscan compensation insets
NEW
UIView.safeAreaInsets
![Page 60: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/60.jpg)
Safe Area
Describes area of view not occludedby ancestors
Available as insets or layout guide
Incorporates overscan compensation insets
NEW
UIView.safeAreaLayoutGuide
![Page 61: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/61.jpg)
Safe Area
Describes area of view not occludedby ancestors
Available as insets or layout guide
Incorporates overscan compensation insets
NEW
UIScreen.overscanCompensationInsets
![Page 62: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/62.jpg)
Extending the Safe Area Insets
UIViewController.additionalSafeAreaInsets UIView.safeAreaInsetsDidChange() UIViewController.viewSafeAreaInsetsDidChange()
NEW
![Page 63: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/63.jpg)
TitleHere’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.
NEW
101 words • Modified today
adjustedContentInset.topcontentInset.top
![Page 64: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/64.jpg)
Safe Area Insets
class UIScrollView {
var contentInsetAdjustmentBehavior: UIScrollViewContentInsetAdjustmentBehavior
var adjustedContentInset: UIEdgeInsets { get }
}
![Page 65: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/65.jpg)
101 words • Modified today
NEWTitleHere’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the square holes. The ones who see things differently. They’re not fond of rules. And they have no respect for the status quo. You can quote them, disagree with them, glorify or vilify them. About the only thing you can’t do is ignore them. Because they change things. They push the human race forward. And while some may see them as the crazy ones, we see genius. Because the people who are crazy enough to think they can change the world, are the ones who do.
contentLayoutGuidePage 1
frameLayoutGuide
![Page 66: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/66.jpg)
Self-Sizing by Default
Link on iOS 11, all estimated heights default to UITableViewAutomaticDimension
Headers, footers, and cells use self-sizing by default
iOS only—behavior is not changed on tvOS
Ensure all views have sufficient internal constraints
Return fixed sizes from delegate methods
NEW
![Page 67: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/67.jpg)
Opting Out of New Behavior
Set table view estimated height properties to zero
Also disables self-sizing
override func viewDidLoad() { tableView.estimatedRowHeight = 0 tableView.estimatedSectionHeaderHeight = 0 tableView.estimatedSectionFooterHeight = 0 }
NEW
![Page 68: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/68.jpg)
separatorInset.left = 60
class MyViewController: UITableViewController { override func viewDidLoad() { tableView.separatorInsetReference = .fromCellEdges // default
} }
Table view cell
NEW
![Page 69: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/69.jpg)
separatorInset.left = 60
class MyViewController: UITableViewController { override func viewDidLoad() { tableView.separatorInsetReference = .fromAutomaticInsets
} }
Table view cell
NEW
![Page 70: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/70.jpg)
Swipe Actions
New look-and-feel automatically for all table views
Supports full swipe-to-delete for iOS 11-linked apps
New features with API adoption • Images • Leading and trailing actions • Completion handler and cancellation
NEW
![Page 71: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/71.jpg)
Advanced Animations With UIKit
![Page 72: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/72.jpg)
UIViewPropertyAnimator Features
Custom timing
Interactive
Interruptible
Responsive
![Page 73: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/73.jpg)
UIViewPropertyAnimator
let animator = UIViewPropertyAnimator(duration: 2.5, curve: .linear) { circle.frame = circle.frame.offsetBy(dx: 100, dy: 0) } animator.startAnimation()
0 100x
![Page 74: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/74.jpg)
Progress 1.0
0.0 1.0
0.5
0.5 Time
Ease In Ease Out
.easeIn
1.0
0.0 1.0
0.5
0.5
.easeOut
Timing Curves
![Page 75: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/75.jpg)
UICubicTimingParameters(controlPoint1: CGPoint(x: 0.75, y: 0.1), controlPoint2: CGPoint(x: 0.9, y: 0.25))
(0.75, 0.1)
(0.9, 0.25)
Custom Curves
Progress
Custom Ease In
1.0
0.0 1.0
0.5
0.5 Time
![Page 76: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/76.jpg)
•Interactively Animating
![Page 77: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/77.jpg)
var animator: UIViewPropertyAnimator!
func handlePan(recognizer: UIPanGestureRecognizer) { switch recognizer.state { case .began: animator = UIViewPropertyAnimator(duration: 1, curve: .easeOut, animations: { circle.frame = circle.frame.offsetBy(dx: 100, dy: 0) }) animator.pauseAnimation() case .changed: let translation = recognizer.translation(in: circle) animator.fractionComplete = translation.x / 100 case .ended: animator.continueAnimation(withTimingParameters: nil, durationFactor: 0) } }
![Page 78: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/78.jpg)
1.0
0.0 1.0
0.5
0.5
animator.fractionComplete = translation.x / distance
Progress
Time
![Page 79: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/79.jpg)
1.0
0.0 1.0
0.5
0.5
animator.fractionComplete = translation.x / distance
Progress
Time
![Page 80: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/80.jpg)
1.0
0.0 1.0
0.5
0.5
Progress
Time
animator.continueAnimation(withTimingParameters: nil, durationFactor: 0)
running true
fractionComplete 10%
animationState .active
![Page 81: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/81.jpg)
•New Animator Behaviors
![Page 82: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/82.jpg)
UIViewPropertyAnimator New in iOS 11
var scrubsLinearly: Bool var pausesOnCompletion: Bool
NEW
![Page 83: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/83.jpg)
.Inactive
Animations finish
.pausesOnCompletion
.Active
Start / pause
animator.addObserver(self, forKeyPath: "running", options: [.new], context: nil)
![Page 84: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/84.jpg)
Starting as Paused
let animator = UIViewPropertyAnimator(duration: 1, curve: .easeIn) animator.startAnimation() // ... animator.addAnimations { // will run immediately circle.frame = circle.frame.offsetBy(dx: 100, dy: 0) }
No escaping for animation blocks
NEW
![Page 85: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/85.jpg)
.cornerRadius Now animatable in UIKit
CALayer var .cornerRadius: CGFloat
circle.clipsToBounds = true UIViewPropertyAnimator(duration: 1, curve: .linear) { circle.layer.cornerRadius = 12 }.startAnimation()
NEW
![Page 86: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/86.jpg)
.maskedCorners New in iOS 11
CALayer var .maskedCorners: CACornerMask
circle.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
NEW
![Page 87: KKBOX WWDC17 UIKit - QQ](https://reader034.vdocuments.mx/reader034/viewer/2022052117/5a651cbd7f8b9aa2548b7371/html5/thumbnails/87.jpg)
Thank You