what’s new in international user interfaces · german swedish vietnamese thai slovak japanese...

App Frameworks #WWDC16

Session 232

What’s New in International User Interfaces

Joaquim Lobo Silva Internationalization Software EngineerSara Radi Internationalization Software Engineer

German Swedish Vietnamese Thai Slovak JapaneseEnglish French Italian Spanish Turkish Malay

Chinese Arabic Finnish Indonesian Korean

Dutch Greek Danish Norwegian Catalan PolishRomanian Russian Simplified Chinese Hebrew

UkrainianHungarian European Portuguese British English

Traditional Chinese Brazilian Portuguese

US English

Million

Images of the stores in Dubai and Abu Dhabi

Related Sessions

Inclusive App Design Pacific Heights Tuesday 10:00AM

Internationalization Best Practices Mission Tuesday 9:00AM

Agenda

Right-to-Left (RTL) User Interface Concepts and Recap

Agenda

Right-to-Left (RTL) User Interface Concepts and RecapHandling Images

Agenda

Right-to-Left (RTL) User Interface Concepts and RecapHandling ImagesEvaluating Layout Direction

Agenda

Right-to-Left (RTL) User Interface Concepts and RecapHandling ImagesEvaluating Layout DirectionRTL UI in watchOS

Agenda

Right-to-Left (RTL) User Interface Concepts and RecapHandling ImagesEvaluating Layout DirectionRTL UI in watchOS What’s New in macOS

Agenda

Right-to-Left (RTL) User Interface Concepts and RecapHandling ImagesEvaluating Layout DirectionRTL UI in watchOS What’s New in macOSText Support: Handling Bidirectional Text

RecapiOS

Supporting right-to-left languages• Since iOS 9

RecapiOS

Supporting right-to-left languages• Since iOS 9• Standard UIKit controls adapt out of the box

RecapiOS

Supporting right-to-left languages• Since iOS 9• Standard UIKit controls adapt out of the box• Auto Layout

RecapiOS

- Stack View

RecapiOS

- Stack View- Leading/Trailing Constraints

RecapiOS

Some UI stays the same across layout directions

RecapiOS

Some UI stays the same across layout directions

RecapiOS

Some UI stays the same across layout directions• Semantic Content Attribute

RecapiOS

Some UI stays the same across layout directions• Semantic Content Attribute• For determining and fine-tuning layout flow

RecapiOS

Some UI stays the same across layout directions• Semantic Content Attribute• For determining and fine-tuning layout flow• enum UISemanticContentAttribute

RecapiOS

- playback

RecapiOS

- playback

- spatial

RecapiOS

- playback

- spatial

- forceLeftToRight, forceRightToLeft

RecapiOS

- playback

- spatial

- unspecified

RecapiOS

New UIKit Support for International User Interfaces WWDC 2015

- playback

- spatial

- unspecified

ImagesiOS

Universal

ImagesiOS

UniversalUIImage or

Interface Builder

ImagesiOS

UniversalUIImage or

Interface Builder

Mirrored

ImagesiOS

UniversalUIImage or

Interface Builder

Mirrored

ImagesiOS

UniversalUIImage or

Interface Builder

Mirrored

imageFlippedForRightToLeftLayoutDirection()

ImagesiOS

Universal Mirrored DedicatedUIImage or

Interface Builder

ImagesiOS

Interface Builder

ImagesiOS

Interface Builder

ImagesiOS

Interface Builder Runtime check

ImagesiOS

Interface Builder Runtime check

ImagesiOS

UIImage or Interface Builder

Universal Mirrored Dedicated

ImagesiOS

Directional Image Assets

Universal Mirrored Dedicated

ImagesiOS NEW

ImagesiOS

Image Asset Directions

ImagesiOS

Image Asset Directions

ImagesiOS

Image Asset Directions• Fixed

ImagesiOS

Image Asset Directions• Fixed• Left to Right or Right to Left, Mirrors

ImagesiOS

Image Asset Directions• Fixed• Left to Right or Right to Left, Mirrors• Both (dedicated for each direction)

ImagesiOS

Loads the correct image from the asset

ImagesiOS

Loads the correct image from the asset• From Interface Builder

ImagesiOS

Loads the correct image from the asset• From Interface Builder• From UIImage.init(named:)

DemoDirectional Images

Using assets in codeiOS NEW

Using assets in codeiOS

Register left-to-right and right-to-left counterparts

Register left-to-right and right-to-left counterparts• For images not stored locally

Register left-to-right and right-to-left counterparts• For images not stored locally• Associate images with trait collections

Register left-to-right and right-to-left counterparts• For images not stored locally• Associate images with trait collections• Convenience method on UIImage for mirroring orientations

- UIImage.imageWithHorizontallyFlippedOrientation()

// Registering assets at runtime

let asset = UIImageAsset()

let ltrImage = fetchRemoteImage()

let rtlImage = ltrImage.imageWithHorizontallyFlippedOrientation()

// Register the images in the asset

asset.register(ltrImage, with: UITraitCollection(layoutDirection: .leftToRight))

asset.register(rtlImage, with: UITraitCollection(layoutDirection: .rightToLeft))

// Set the image on an image view

imageView.image = asset.image(with: imageView.traitCollection)

Directional imagesiOS NEW

Directional imagesiOS

Same familiar asset mechanism

Same familiar asset mechanismNew traitUITraitEnvironmentLayoutDirection

• Affects layout evaluation with Semantic Content Attribute

Layout

Semantic Content Attribute

Layout

App Environment

Layout

App Environment

Layout

UIView.effectiveUserInterfaceLayoutDirection

App Environment

Layout

UIView.effectiveUserInterfaceLayoutDirection

UIView.userInterfaceLayoutDirection(for:relativeTo:)

SummaryiOS

Directional Image Assets• Ready for use with Interface Builder and UIImage

SummaryiOS

Directional Image Assets• Ready for use with Interface Builder and UIImage• Ability to register remote images as part of assets

SummaryiOS

Directional Image Assets• Ready for use with Interface Builder and UIImage• Ability to register remote images as part of assets• imageFlippedForRightToLeftLayoutDirection() deprecated in iOS 10

SummaryiOS

Convenience property on UIView for effective layout direction

SummaryiOS

Convenience property on UIView for effective layout directionClass method on UIView for evaluating directionality in your app

watchOS

Supporting right-to-left languages

watchOS

Supporting right-to-left languages• Since watchOS 2.1

watchOS

Supporting right-to-left languages• Since watchOS 2.1• All WatchKit elements

watchOS

Supporting right-to-left languages• Since watchOS 2.1• All WatchKit elements• API similar to iOS

watchOS

Supporting right-to-left languages• Since watchOS 2.1• All WatchKit elements• API similar to iOS• Design concepts similar to iOS

WatchKitwatchOS

All Interface Objects

WatchKitwatchOS

All Interface Objects• Direction and alignment flip automatically

WatchKitwatchOS

- Horizontal Interface Groups

WatchKitwatchOS

- Horizontal Interface Groups- Object alignment

WatchKitwatchOS

• WKSemanticContentAttribute

WatchKitwatchOS

• WKSemanticContentAttribute- Playback, Spatial, ForceLeftToRight,

ForceRightToLeft, Unspecified

WatchKitwatchOS

• WKSemanticContentAttribute- Playback, Spatial, ForceLeftToRight,

ForceRightToLeft, Unspecified

// Using WKInterfaceSemanticContentAttribute

playControlsGroup.setSemanticContentAttribute(.playback)

Layout Direction in watchOS

// Query the directionality for any other UI work

let direction = WKInterfaceDevice.interfaceLayoutDirection(for: .Playback)

if direction == .LeftToRight {

// ...

} else {

// ...

} else {

// ...

} else {

// ...

SummarywatchOS

Same principles as iOS

SummarywatchOS

Same principles as iOSWatchKit elements adapt out of the box

SummarywatchOS

Same principles as iOSWatchKit elements adapt out of the boxAdapt any custom elements or artwork

SummarywatchOS

Same principles as iOSWatchKit elements adapt out of the boxAdapt any custom elements or artworkUse Semantic Content Attribute to determine layout direction

System Level Controls

Menu barSystem Level Controls

WindowsSystem Level Controls

App Level Controls

NSTableViewApp Level Controls

NSCollectionViewApp Level Controls

NSScrollViewApp Level Controls

dir=LTR

dir=RTL

WebKitmacOS NEW

// Default: WKUserInterfaceDirectionPolicyContentvar userInterfaceDirectionPolicy: WKUserInterfaceDirectionPolicy

enum- content

- system

AppKitmacOS

All controls flip automatically

AppKitmacOS

All controls flip automatically• Use StackView and GridView when you can

AppKitmacOS

All controls flip automatically• Use StackView and GridView when you can • Use Auto Layout

AppKitmacOS

What’s New in Auto Layout Presidio Friday 3:00PM

Mysteries of Auto Layout WWDC 2015

AppKitmacOS

Direction and alignment flip automatically for nibs, xibs and storyboards in Base localization

Mysteries of Auto Layout WWDC 2015

NSView layout directionmacOS

NSViewmacOS

Get and set the user interface layout direction of a view

NSViewmacOS

Get and set the user interface layout direction of a viewThe default value is set to NSApp.userInterfaceLayoutDirection

NSViewmacOS

Get and set the user interface layout direction of a viewThe default value is set to NSApp.userInterfaceLayoutDirection

// Get and set the user interface layout directionpublic var userInterfaceLayoutDirection: NSUserInterfaceLayoutDirection

NSImageRepmacOS NEW

Use Asset Catalogs

NSImageRepmacOS NEW

Use Asset CatalogsIf assets are obtained externally (server, etc.)

// Default: NSImageLayoutDirectionUnspecifiedpublic var layoutDirection: NSImageLayoutDirection

enum- leftToRight

- rightToLeft

Creating imagesmacOS

let image = NSImage(data: LTRData)

image.representations.first.layoutDirection = .leftToRight

let rtlImage = NSImageRep(data: RTLData)

rtlImage.layoutDirection = .rightToLeft

// Adds the specific image representation to the receiver

image.addRepresentation(rtlImage)

Creating imagesmacOS

let image = NSImage(data: LTRData)

image.representations.first.layoutDirection = .leftToRight

let rtlImage = NSImageRep(data: RTLData)

rtlImage.layoutDirection = .rightToLeft

// Adds the specific image representation to the receiver

image.addRepresentation(rtlImage)

NSTextField and text alignment macOS NEW

NSTextField and text alignment macOS

New convenience initializers

NSTextField and text alignment macOS

New convenience initializersDefault alignment is Natural

// Creates a non-wrapping, non editable, non selectable text field.

public convenience init(labelWithString stringValue: String)

// Creates a wrapping, non editable, selectable text field.

public convenience init(wrappingLabelWithString stringValue: String)

NSButtonmacOS NEW

NSButtonmacOS

Button with an image will flip position automatically Checkbox position will flip position automatically Radio button position will flip position automatically

public convenience init(title: String, image: NSImage, target: AnyObject?, action: Selector?)

public convenience init(checkboxWithTitle title: String, target: AnyObject?, action: Selector?)

public convenience init(radioButtonWithTitle title: String, target: AnyObject?, action: Selector?)

DemomacOS

Displaying Bidi Text

English UI

Mixed Content

Things to Remember…

Alignment and directionality are different

Right aligned text

Right aligned text RTL writing direction

Alignment and directionality are different Alignment and base writing direction are natural by default

Right aligned text RTL writing direction

Text Directionality

http://unicode.org/reports/tr9/

Text Directionality

All unicode characters are either

Text Directionality

Strong LTR (L) Latin,

Text Directionality

Strong RTL (R) العربية, עברית

Text Directionality

Neutral/Weak (N) spaces, punctuation…

Text Directionality

Base writing direction is determined by the first strong character

Neutral/Weak (N) spaces, punctuation…

Text Directionality

has the highest score!%@ !

Text Directionality

has the highest score!Aya !

Text Directionality

has the highest score!!

Text Directionality

has the highest score!اية

Text Directionality

Isolates Support NEW

Isolates Support

Unicode introduced Isolates support

Isolates Support

Unicode introduced Isolates support Allows some text to be isolated and have the directionality of its first strong character

Isolates Support

Unicode introduced Isolates support Allows some text to be isolated and have the directionality of its first strong characterDoesn’t affect surrounding text

Isolates Support

Unicode introduced Isolates support Allows some text to be isolated and have the directionality of its first strong characterDoesn’t affect surrounding text Using localizedStringWithFormat: will isolate %@ automatically

public class func localizedStringWithFormat (_ format: NSString, _ args: CVarArg...)

format -> Self

DemoBidi Text

Summary

Directional Image AssetsNew API on iOS, watchOS, and macOS

Summary

Directional Image AssetsNew API on iOS, watchOS, and macOSAuto Layout

Summary

Directional Image AssetsNew API on iOS, watchOS, and macOSAuto Layout Improved text support with Isolates

More Information

https://developer.apple.com/wwdc16/232

Related Sessions

Inclusive App Design Pacific Heights Tuesday 10:00AM

What’s New in Cocoa Nob Hill Tuesday 11:00AM

Typography and Fonts Presidio Wednesday 9:00AM

What’s New in International User Interfaces Nob Hill Friday 9:00AM

Measurements and Units Nob Hill Friday 4:00PM

Localizing with Xcode 6 WWDC 2014

Interface Builder and Auto Layout Lab Developer Tools Lab C Friday 9:00AM

Internationalization Lab FrameworksLab C Friday 2:00PM

what’s new in international user interfaces · german swedish vietnamese thai slovak japanese...

Documents

slovak republic

slovak grammar

slovak university of technology in bratislava slovak ... ·...

adobe creative suite 5 web premiumromanian russian slovak...

slovak immigrants

slovak

illustration of the ipa vietnamese (hanoi...

wb150f slovak

slovak republic - oecd.org · slovak republic annex ....

slovak national dish „bryndzove halusky“ speciality of...

the slovak national museum ĽudovÍt ŠtÚr museum€¦ ·...

slovak republik

bowls for the soul - · pdf filecalled a ‘taiwanese...

ivms-4200 client software key feature...chinese, slovak,...

guide slovak

slovak team

slovak agriculture

slovak business culture guide - learn about slovak republic

牽引式・アスファルトディストリビューター...

slovak spectator1706