(216) Video & Transcript

Layout API

Miguel Sanchez and Tom Witkin talked about how to create different complex layout on Watch and the cool animations we can do with it.

1. Fundamentals:

  • The layout on Watch is Flow-based (vertical, can choose horizontal for Group).
  • No code, only Storyboard !

2. WKInterfaceObject

  • the objects can be aligned horizontally (left, centre, right) and vertically (top, center, bottom)
  • size : relative, fixed or fitContentSize
  • OS2 expose: setHorizontalAlignment(enum), setVerticalAlignment(enum)
  • Sizing API: now you can change in code:
    • OS1: setWidth/ Height
    • OS2: setRelativeWidth/ Height: setRelativeWidth(0.75, 20) -> w = 0.75*container+20px
    • OS2: sizeToFitWidth/ Height
  • Zero: OS1 (default to storyboard), OS2: 0 = zero

3. WKInterfaceGroup

Group can contain other groups! Circle elements of 12 items can be done in 3 levels (top; centre – divided to left,centre, right; bottom)

Remember: Even hidden objects in Builder are created -> time-consuming !

4. Images

In OS1, there is transfer cost to move images to the Watch. In OS2 -> only installation cost (a large one on Watch now).

Animation API

5. Tables

In OS1, there are some transition animations that OS has done for us: insert, delete rows, updated content.

5.1 Insert a row and then remove that row within few seconds:

Screen Shot 2015-07-20 at 4.12.32 pm

5.2 To avoid animations, use setRowTypes() and setNumberOfRows(:, withRowType)

5.3 Expand a row on Tap:

Screen Shot 2015-07-20 at 4.15.04 pm

Screen Shot 2015-07-20 at 4.15.42 pm

Initially has FullDescriptionLabel hidden. On tap, we swap the hidden properties.

5.4 Rows reload when content changes in height:

If we reload a row and content not changing height -> no animation ! Make sure rows have “sizeToFit” height.

5.5 Rotate an image within a cell: use sequential images

5.6 Picker object: watch WatchKit-in-Depth part 2 !

5.7 Animatable Properties: animateWithDuration(duration: animationBlock)

5.8 Sequential Animation: animate each of the circle sequentially

Screen Shot 2015-07-20 at 4.21.14 pm

Watch OS2

5.9 Use didAppear – not willActivate, as the didAppear is called after view has been displayed on screen.

5.10 Invisible Spacer Group:

Screen Shot 2015-07-20 at 4.23.57 pm

Screen Shot 2015-07-20 at 4.24.47 pm

5.11 Animate Speech Bubble & Confirmation screen:

Initial state: button faded out.

Part 1: Animate the speech bubble IN:

Screen Shot 2015-07-20 at 4.26.40 pm

Screen Shot 2015-07-20 at 4.27.07 pm

Part 2: Show Confirmation screen:

Screen Shot 2015-07-20 at 4.28.01 pm

Reversing heights of the 2 groups:

Screen Shot 2015-07-20 at 4.28.53 pm

Notes: Animations not working on Glance / Notifications !

Should Watch: Designing with Animation