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 Notification and Autolayout - Jefferey

3,385 views

Published on

Utapass iOS 工程師 Jefferey 分享
影片位置 https://youtu.be/cv9IKPJY91U
相關 Sessions
- [Rich Notifications] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/817/)
- [Best Practices and What’s New in User Notifications] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/708/)
- [Size Classes and Core Components] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/812/)
- [Auto Layout Techniques in Interface Builder] (https://developer.apple.com/videos/wwdc2017/videos/play/wwdc2017/412/)

Published in: Technology
  • Be the first to comment

  • Be the first to like this

KKBOX WWDC17 Notification and Autolayout - Jefferey

  1. 1. This presentation is provided on a strictly private and confidential basis for information purposes only. Notification, Auto Layout presented by Jeffery Kao 2017/07/07
  2. 2. Rich Notifications
  3. 3. Notification Short Look What is this notification about? Long Look What extra information is helpful? Quick Actions What actions are appropriate?
  4. 4. Rich Notification Short Look Long Look
  5. 5. Rich Notification - Mail
  6. 6. Rich Notification - Photos
  7. 7. Rich Notification - Tips
  8. 8. Rich Notification - Phone
  9. 9. Rich Notification - Find Friends
  10. 10. Rich Notification - Messages
  11. 11. Rich Notification - KUNA APP In our new iOS app you now have the ability to 3D touch (Force touch) notifications that arrive from Kuna – this will immediately display an animated image of what caused that notification. You can then snooze alerts for two hours, or play a pre-recorded message. If you do not have 3D touch on your phone – you can still swipe left on the notification to view this new feature (iOS 10 only!)
  12. 12. Rich Notification - KUNA APP
  13. 13. Design - Recap Clear description in the short looks Provide extra context in beautifully designed long looks Relevant quick actions
  14. 14. Best Practices and What’s New in User Notifications
  15. 15. API - Notification Notification Type: - Local Notification - Remote Notification Notification Extension: - Notification Service Extension - Notification Content Extension Purpose: - Location-based, time-based or reminder - Silence Notification
  16. 16. Hidden Notification Content Hidden Notification Content: - Extended support all apps - Global setting - Settings per app - API to customize notification content init(identifier: String, actions: [UNNotificationAction], intentIdentifiers: [String], hiddenPreviewsBodyPlaceholder: String, options: UNNotificationCategoryOptions = []) NEW
  17. 17. Hidden Notification Content // hiddent notification content let commentCategory = UNNotificationCategory(identifier: "comment-category", actions: [], intentIdentifiers: [], hiddenPreviewsBodyPlaceholder: "Comment" // 隱藏後仍然可以看到的body ) NEW
  18. 18. Hidden Notification Content // hiddent notification content let commentCategory = UNNotificationCategory(identifier: "comment-category", actions: [], intentIdentifiers: [], hiddenPreviewsBodyPlaceholder: "%u Comments" // 隱藏後仍然可以看到的body ) NEW
  19. 19. Hidden Notification Content // how about using localization for plural noun? let commentCategory = UNNotificationCategory(identifier: "comment-category", actions: [], intentIdentifiers: [], hiddenPreviewsBodyPlaceholder: NSLocalizedString("COMMENT_KEY", comment: ""), options:[.hiddenPreviewsShowTitle]) NEW
  20. 20. Hidden Notification Content - Set “Show Preview” to “Never” or “Authenticated” - Only show “Body placeholder” NEW
  21. 21. Customizing Rich Notification
  22. 22. Customizing Rich Notification - Content extension: init content size ratio - Customized input view - Media button in UNNotificationContentExtension
  23. 23. Size Classes and Core Components
  24. 24. Table ● Size Classes ● Dynamic Type ● UIKit Components
  25. 25. Multiple Screen Sizes
  26. 26. Multiple Screen Sizes
  27. 27. Multiple Screen Sizes Compact Width Compact Height
  28. 28. Layout with Different Screen and Font Size Different Screen Size
  29. 29. Dynamic Type
  30. 30. Dynamic Type ● Making custom fonts dynamic ● Example: Etsy
  31. 31. UIKit Components
  32. 32. UIKit Components
  33. 33. Auto Layout Techniques in Interface Builder
  34. 34. Table ● Changing Layout At Runtime ● Tracking Touch ● Dynamic Type ● Safe Areas ● Rest of Topics
  35. 35. Changing Layout at Runtime BOOL shouldShow = !self.edgeConstraint.active; // Deactivate constraint first to avoid constraint conflict message if (shouldShow) { self.zeroHeightConstraint.active = NO; self.edgeConstraint.active = YES; } else { self.edgeConstraint.active = NO; self.zeroHeightConstraint.active = YES; }
  36. 36. Tracking Touch Familiar with CGTransform to track touch event CGAffineTransform = translation + rotation + scale
  37. 37. Dynamic Type - Interface Builder -> dynamic Type - set Font size as UIFontTextStyleHeadline | UIFontTextStyleBody … - Dynamically change font size with a proper way: - Xcode -> Open Developer Tool -> Accessibility Inspector -> Font size NEW
  38. 38. Safe Areas Safe Areas (iOS11) - Property in UIView - TopLayout, BottomLayout is deprecated - Upgrade automatically with storyboards NEW
  39. 39. Safe Areas NEW
  40. 40. Safe Areas NEW
  41. 41. Safe Areas if #available(iOS 11, *) { let guide = view.safeAreaLayoutGuide NSLayoutConstraint.activate([ view.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0), guide.bottomAnchor.constraintEqualToSystemSpacingBelow(view.bottomAnchor, multiplier: 1.0)]) } else { // older version let standardSpacing: CGFloat = 8.0 NSLayoutConstraint.activate([ view.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing), bottomLayoutGuide.topAnchor.constraint(equalTo: view.bottomAnchor,constant: standardSpacing)]) } NEW
  42. 42. Rest of Topics Proportional Positioning - use spacer view to help you locate your view Stack View Adaptive Layout - hidden property by size class (XCode 9 support) - Use distribution, alignment, and spacing proportional positioning example p.s. standard spacing = 8 which can be used in interface builder
  43. 43. Recap Notification: - Some examples for building rich notification - New API about hidden notification content Sizing Class: - Make use of `Dynamic Type` and be aware of device size AutoLayout: - Existing techniques (layout changing in runtime or track touch) - Adapt with new APIs (Safe areas and propotional positioning) - Stack view example
  44. 44. References ● Rich Notifications ○ https://developer.apple.com/videos/play/wwdc2017/817 ● Best Practices and What’s New in User Notifications ○ https://developer.apple.com/videos/play/wwdc2017/708 ● Size Classes and Core Components ○ https://developer.apple.com/videos/play/wwdc2017/812 ● Auto Layout Techniques in Interface Builder ○ https://developer.apple.com/videos/play/wwdc2017/412 ● Useful repo: ○ https://github.com/Sweefties/iOS10-NewAPI-UserNotifications-Example ○ https://useyourloaf.com/blog/safe-area-layout-guide/
  45. 45. This presentation is provided on a strictly private and confidential basis for information purposes only. THANK YOU

×