KKBOX WWDC17 Notification and Autolayout - Jefferey

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

Notification
Short Look What is this notification about?
Long Look What extra information is helpful?
Quick Actions What actions are appropriate?

Rich Notification
Short Look
Long Look

Rich Notification - Find Friends

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

// hiddent notification content
let commentCategory = UNNotificationCategory(identifier: "comment-category",
actions: [],
intentIdentifiers: [],
hiddenPreviewsBodyPlaceholder: "Comment" // 隱藏後仍然可以看到的body
)
NEW

// hiddent notification content
actions: [],
hiddenPreviewsBodyPlaceholder: "%u Comments" // 隱藏後仍然可以看到的body
)
NEW

// how about using localization for plural noun?
actions: [],
hiddenPreviewsBodyPlaceholder: NSLocalizedString("COMMENT_KEY", comment: ""),
options:[.hiddenPreviewsShowTitle])
NEW

- Set “Show Preview” to “Never” or “Authenticated”
- Only show “Body placeholder”
NEW

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
Compact Width
Compact Height

Layout with Different Screen and Font Size
Different Screen Size

Dynamic Type
● Making custom fonts dynamic
● Example: Etsy

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 message
if (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 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

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

References
● Rich Notifications
○ https://developer.apple.com/videos/play/wwdc2017/817
● Best Practices and What’s New in User Notifications
● Size Classes and Core Components
● Auto Layout Techniques in Interface Builder
● 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

KKBOX WWDC17 Notification and Autolayout - Jefferey

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (6)

En vedette

En vedette (10)

Similaire à KKBOX WWDC17 Notification and Autolayout - Jefferey

Similaire à KKBOX WWDC17 Notification and Autolayout - Jefferey (20)

Plus de Liyao Chen

Plus de Liyao Chen (10)

Dernier

Dernier (20)

KKBOX WWDC17 Notification and Autolayout - Jefferey