Utapass iOS 工程師 QQ 分享 影片位置 https://youtu.be/D83qkoGNoF4 相關 Sessions - [What's New in Cocoa Touch] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/201/) - [The Keys to a Better Text Input Experience] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/242/) - [Introducing Password AutoFill for Apps] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/206/) - [Building Apps with Dynamic Type] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/245/) - [Updating Your App for iOS 11] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/204/) - [Advanced Animations with UIKit] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/230/)

1. WWDC17 讀書會
QQ Shih
UIKit
2017/07/07

2. • 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

3. What’s new in Cocoa Touch

4. •
Drag and Drop

5. Drag and Drop
Enabling drags
let drag = UIDragInteraction(delegate: self)
iconView.addInteraction(drag)
UIDragInteractionDelegate
• Provide data for dragged item
• Customize lift animation
• Customize preview

6. 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

7. 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

8. File management

9. 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?
}

11. class UINavigationBar {
var prefersLargeTitle: Bool
}
Enabling Large Titles
class UINavigationItem {
var largeTitleDisplayMode: LargeTitleDisplayMode
}

12. Enabling Unified Search
class UINavigationItem {
var searchController: UISearchController?
}

13. Safe Area Insets
class UIView {
// auto layout
var safeAreaLayoutGuide: UILayoutGuide { get }
// manual layout
var safeAreaInsets: UIEdgeInsets { get }
func safeAreaInsetsDidChange()
}

14. class UIViewController {
func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge
}

15. Asset Catalogs
Colors and icons
class UIColor {
init?(named name: String)
}
Wide gamut color support
Wide gamut colors for icons
App thinning for icons

16. Asset Catalogs
PDF-backed images
Preserve vector data if
• Image used at multiple sizes
• Symbolic glyph that resizes with dynamic type
• Tab bar image

17. Localization Guide https://developer.apple.com/internationalization

18. The keys to a better
text input experiece

19. 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

20. Content Types for Password AutoFill
Introducing Password AutoFill for Apps WWDC 2017
NEW
Log In
UITextContentTypeUsername
UITextContentTypePassword

21. 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

22. New APIs in iOS 11
Selected text
documentIdentifier handle
Ability to query for full access
NEW

23. 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

24. Introducing password autofill
for apps

25. 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

27. Associated Domains File
Where to serve the file
https://example.com/.well-known/apple-app-site-association
https://example.com/apple-app-site-association

29. Building app with
dynamic type

30. Goals
Text is large enough for the user to read
Text is fully readable
App UI looks beautiful
Design For Everyone WWDC 2017

31. •
Scaling Font Sizes

36. Text Styles
Standard Sizes Accessibility Sizes
NEW

37. Text Styles NEW

38. Custom Fonts
label.font = UIFontMetrics.default.scaledFont(for: customFont)
NEW

39. •
Accommodating Large Text

41. .extraSmall .extraExtraExtraLarge
.large
traitCollection.preferredContentSizeCategory
UIApplication.shared.preferredContentSizeCategory

42. Make Layout Decisions Based on Text Size
if traitCollection.preferredContentSizeCategory.isAccessibilityCategory {
// Vertically stack
} else {
// Lay out side by side
}
NEW

43. Make Layout Decisions Based on Text Size
if traitCollection.preferredContentSizeCategory > .extraExtraLarge {
// Vertically stack
} else {
// Lay out side by side
}
NEW

44. Default Table View Behaviors in iOS 11
Standard table view cells adapt layout for Dynamic Type
Cell heights are based on their content
NEW

45. •
Images

46. Allow Images to Scale Up
Provide PDF at 1x scale
NEW

47. Allow Images to Scale Up NEW

48. Allow Bar Item Images to Scale Smoothly NEW

49. Updating your app for
iOS 11

51. UIBarItem
UIBarItem.landscapeImagePhone
UIBarItem.largeContentSizeImage

52. Manage margin and
insets

53. 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
layoutMargins
directionalLayoutMargins

54. 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

55. 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

56. 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

57. 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
}
}

58. safeAreaInsets.bottom
safeAreaInsets.top

59. Safe Area
Describes area of view not occluded
by ancestors
Available as insets or layout guide
Incorporates overscan compensation insets
NEW
UIView.safeAreaInsets

60. Safe Area
Describes area of view not occluded
by ancestors
Available as insets or layout guide
Incorporates overscan compensation insets
NEW
UIView.safeAreaLayoutGuide

61. Safe Area
Describes area of view not occluded
by ancestors
Available as insets or layout guide
Incorporates overscan compensation insets
NEW
UIScreen.overscanCompensationInsets

62. Extending the Safe Area Insets
UIViewController.additionalSafeAreaInsets
UIView.safeAreaInsetsDidChange()
UIViewController.viewSafeAreaInsetsDidChange()
NEW

63. Title
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.
NEW
101 words • Modified today
adjustedContentInset.top
contentInset.top

64. Safe Area Insets
class UIScrollView {
var contentInsetAdjustmentBehavior: UIScrollViewContentInsetAdjustmentBehavior
var adjustedContentInset: UIEdgeInsets { get }
}

65. 101 words • Modified today
NEWTitle
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.
contentLayoutGuide
Page 1
frameLayoutGuide

66. 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

67. 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

68. separatorInset.left = 60
class MyViewController: UITableViewController {
override func viewDidLoad() {
tableView.separatorInsetReference = .fromCellEdges // default
}
}
Table view cell
NEW

69. separatorInset.left = 60
class MyViewController: UITableViewController {
override func viewDidLoad() {
tableView.separatorInsetReference = .fromAutomaticInsets
}
}
Table view cell
NEW

70. 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

71. Advanced Animations
With UIKit

72. UIViewPropertyAnimator
Features
Custom timing
Interactive
Interruptible
Responsive

73. UIViewPropertyAnimator
let animator = UIViewPropertyAnimator(duration: 2.5, curve: .linear) {
circle.frame = circle.frame.offsetBy(dx: 100, dy: 0)
}
animator.startAnimation()
0 100x

74. 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

75. 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

76. •
Interactively Animating

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

78. 1.0
0.0 1.0
0.5
0.5
animator.fractionComplete = translation.x / distance
Progress
Time

79. 1.0
0.0 1.0
0.5
0.5
animator.fractionComplete = translation.x / distance
Progress
Time

80. 1.0
0.0 1.0
0.5
0.5
Progress
Time
animator.continueAnimation(withTimingParameters: nil, durationFactor: 0)
running
true
fractionComplete
10%
animationState
.active

81. •
New Animator Behaviors

82. UIViewPropertyAnimator
New in iOS 11
var scrubsLinearly: Bool
var pausesOnCompletion: Bool
NEW

83. .Inactive
Animations finish
.pausesOnCompletion
.Active
Start / pause
animator.addObserver(self, forKeyPath: "running", options: [.new], context: nil)

84. 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

85. .cornerRadius
Now animatable in UIKit
CALayer
var .cornerRadius: CGFloat
circle.clipsToBounds = true
UIViewPropertyAnimator(duration: 1, curve: .linear) {
circle.layer.cornerRadius = 12
}.startAnimation()
NEW

86. .maskedCorners
New in iOS 11
CALayer
var .maskedCorners: CACornerMask
circle.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
NEW

87. Thank You