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

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

Rich Notification - KUNA APP

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