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.

KKBOX WWDC17 UIKit - QQ

3,991 views

Published on

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/)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

KKBOX WWDC17 UIKit - QQ

  1. 1. WWDC17 讀書會 QQ Shih UIKit 2017/07/07
  2. 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. 3. What’s new in Cocoa Touch
  4. 4. • Drag and Drop
  5. 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. 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. 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. 8. File management
  9. 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? }
  10. 10. class UINavigationBar { var prefersLargeTitle: Bool } Enabling Large Titles class UINavigationItem { var largeTitleDisplayMode: LargeTitleDisplayMode }
  11. 11. Enabling Unified Search class UINavigationItem { var searchController: UISearchController? }
  12. 12. Safe Area Insets class UIView { // auto layout var safeAreaLayoutGuide: UILayoutGuide { get } // manual layout var safeAreaInsets: UIEdgeInsets { get } func safeAreaInsetsDidChange() }
  13. 13. class UIViewController { func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge }
  14. 14. Asset Catalogs Colors and icons class UIColor { init?(named name: String) } Wide gamut color support Wide gamut colors for icons App thinning for icons
  15. 15. Asset Catalogs PDF-backed images Preserve vector data if • Image used at multiple sizes • Symbolic glyph that resizes with dynamic type • Tab bar image
  16. 16. Localization Guide https://developer.apple.com/internationalization
  17. 17. The keys to a better text input experiece
  18. 18. 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
  19. 19. Content Types for Password AutoFill Introducing Password AutoFill for Apps WWDC 2017 NEW Log In UITextContentTypeUsername UITextContentTypePassword
  20. 20. 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
  21. 21. New APIs in iOS 11 Selected text documentIdentifier handle Ability to query for full access NEW
  22. 22. 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
  23. 23. Introducing password autofill for apps
  24. 24. 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
  25. 25. Associated Domains File Where to serve the file https://example.com/.well-known/apple-app-site-association https://example.com/apple-app-site-association
  26. 26. Building app with dynamic type
  27. 27. Goals Text is large enough for the user to read Text is fully readable App UI looks beautiful Design For Everyone WWDC 2017
  28. 28. • Scaling Font Sizes
  29. 29. Text Styles Standard Sizes Accessibility Sizes NEW
  30. 30. Text Styles NEW
  31. 31. Custom Fonts label.font = UIFontMetrics.default.scaledFont(for: customFont) NEW
  32. 32. • Accommodating Large Text
  33. 33. .extraSmall .extraExtraExtraLarge .large traitCollection.preferredContentSizeCategory UIApplication.shared.preferredContentSizeCategory
  34. 34. Make Layout Decisions Based on Text Size if traitCollection.preferredContentSizeCategory.isAccessibilityCategory { // Vertically stack } else { // Lay out side by side } NEW
  35. 35. Make Layout Decisions Based on Text Size if traitCollection.preferredContentSizeCategory > .extraExtraLarge { // Vertically stack } else { // Lay out side by side } NEW
  36. 36. Default Table View Behaviors in iOS 11 Standard table view cells adapt layout for Dynamic Type Cell heights are based on their content NEW
  37. 37. • Images
  38. 38. Allow Images to Scale Up Provide PDF at 1x scale NEW
  39. 39. Allow Images to Scale Up NEW
  40. 40. Allow Bar Item Images to Scale Smoothly NEW
  41. 41. Updating your app for iOS 11
  42. 42. UIBarItem UIBarItem.landscapeImagePhone UIBarItem.largeContentSizeImage
  43. 43. Manage margin and insets
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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 } }
  49. 49. safeAreaInsets.bottom safeAreaInsets.top
  50. 50. Safe Area Describes area of view not occluded
 by ancestors Available as insets or layout guide Incorporates overscan compensation insets NEW UIView.safeAreaInsets
  51. 51. Safe Area Describes area of view not occluded
 by ancestors Available as insets or layout guide Incorporates overscan compensation insets NEW UIView.safeAreaLayoutGuide
  52. 52. Safe Area Describes area of view not occluded
 by ancestors Available as insets or layout guide Incorporates overscan compensation insets NEW UIScreen.overscanCompensationInsets
  53. 53. Extending the Safe Area Insets UIViewController.additionalSafeAreaInsets UIView.safeAreaInsetsDidChange() UIViewController.viewSafeAreaInsetsDidChange() NEW
  54. 54. 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
  55. 55. Safe Area Insets class UIScrollView { var contentInsetAdjustmentBehavior: UIScrollViewContentInsetAdjustmentBehavior var adjustedContentInset: UIEdgeInsets { get } }
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. separatorInset.left = 60 class MyViewController: UITableViewController { override func viewDidLoad() { tableView.separatorInsetReference = .fromCellEdges // default } } Table view cell NEW
  60. 60. separatorInset.left = 60 class MyViewController: UITableViewController { override func viewDidLoad() { tableView.separatorInsetReference = .fromAutomaticInsets } } Table view cell NEW
  61. 61. 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
  62. 62. Advanced Animations With UIKit
  63. 63. UIViewPropertyAnimator Features Custom timing Interactive Interruptible Responsive
  64. 64. UIViewPropertyAnimator let animator = UIViewPropertyAnimator(duration: 2.5, curve: .linear) { circle.frame = circle.frame.offsetBy(dx: 100, dy: 0) } animator.startAnimation() 0 100x
  65. 65. 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
  66. 66. 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
  67. 67. • Interactively Animating
  68. 68. 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) } }
  69. 69. 1.0 0.0 1.0 0.5 0.5 animator.fractionComplete = translation.x / distance Progress Time
  70. 70. 1.0 0.0 1.0 0.5 0.5 animator.fractionComplete = translation.x / distance Progress Time
  71. 71. 1.0 0.0 1.0 0.5 0.5 Progress Time animator.continueAnimation(withTimingParameters: nil, durationFactor: 0) running true fractionComplete 10% animationState .active
  72. 72. • New Animator Behaviors
  73. 73. UIViewPropertyAnimator New in iOS 11 var scrubsLinearly: Bool var pausesOnCompletion: Bool NEW
  74. 74. .Inactive Animations finish .pausesOnCompletion .Active Start / pause animator.addObserver(self, forKeyPath: "running", options: [.new], context: nil)
  75. 75. 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
  76. 76. .cornerRadius Now animatable in UIKit CALayer var .cornerRadius: CGFloat circle.clipsToBounds = true UIViewPropertyAnimator(duration: 1, curve: .linear) { circle.layer.cornerRadius = 12 }.startAnimation() NEW
  77. 77. .maskedCorners New in iOS 11 CALayer var .maskedCorners: CACornerMask circle.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner] NEW
  78. 78. Thank You

×