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
Rich Notifications
Notification
Short Look What is this notification about?
Long Look What extra information is helpful?
Quick Actions What actions are appropriate?
Rich Notification
Short LookLong Look
Rich Notification - Mail
Rich Notification - Photos
Rich Notification - Tips
Rich Notification - Phone
Rich Notification - Find Friends
Rich Notification - Messages
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!)
Design - Recap
Clear description in the short looks
Provide extra context in beautifully designed long looks
Relevant quick actions
Best Practices and What’s New in User Notifications
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
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
Hidden Notification Content
// hiddent notification contentlet commentCategory = UNNotificationCategory(identifier: "comment-category", actions: [], intentIdentifiers: [], hiddenPreviewsBodyPlaceholder: "Comment" // 隱藏後仍然可以看到的body)
NEW
Hidden Notification Content
// hiddent notification contentlet commentCategory = UNNotificationCategory(identifier: "comment-category", actions: [], intentIdentifiers: [], hiddenPreviewsBodyPlaceholder: "%u Comments" // 隱藏後仍然可以看到的body)
NEW
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
Hidden Notification Content
- Set “Show Preview” to “Never” or “Authenticated”
- Only show “Body placeholder”
NEW
Customizing Rich Notification
Customizing Rich Notification
- Content extension: init content size ratio
- Customized input view
- Media button in UNNotificationContentExtension
Size Classes and Core Components
Table
● Size Classes
● Dynamic Type
● UIKit Components
Multiple Screen Sizes
Multiple Screen Sizes
Multiple Screen Sizes
Compact Width
Compact Height
Layout with Different Screen and Font Size
Different Screen Size
Dynamic Type
Dynamic Type
● Making custom fonts dynamic
● Example: Etsy
UIKit Components
UIKit Components
Auto Layout Techniques in Interface Builder
Table
● Changing Layout At Runtime
● Tracking Touch
● Dynamic Type
● Safe Areas
● Rest of Topics
Changing Layout at Runtime
BOOL shouldShow = !self.edgeConstraint.active;
// Deactivate constraint first to avoid constraint conflict messageif (shouldShow) {
self.zeroHeightConstraint.active = NO;self.edgeConstraint.active = YES;
}else {
self.edgeConstraint.active = NO;self.zeroHeightConstraint.active = YES;
}
Tracking Touch
Familiar with CGTransform to track touch event
CGAffineTransform = translation + rotation + scale
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
Safe Areas
Safe Areas (iOS11)- Property in UIView- TopLayout, BottomLayout is deprecated- Upgrade automatically with storyboards
NEW
Safe AreasNEW
Safe AreasNEW
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
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
RecapNotification:
- 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
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/
This presentation is provided on a strictly private and confidential basis for information purposes only.
THANK YOU
