(216) Video & Transcript
Miguel Sanchez and Tom Witkin talked about how to create different complex layout on Watch and the cool animations we can do with it.
- The layout on Watch is Flow-based (vertical, can choose horizontal for Group).
- No code, only Storyboard !
- 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
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 !
In OS1, there is transfer cost to move images to the Watch. In OS2 -> only installation cost (a large one on Watch now).
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:
5.2 To avoid animations, use setRowTypes() and setNumberOfRows(:, withRowType)
5.3 Expand a row on Tap:
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
5.9 Use didAppear – not willActivate, as the didAppear is called after view has been displayed on screen.
5.10 Invisible Spacer Group:
5.11 Animate Speech Bubble & Confirmation screen:
Initial state: button faded out.
Part 1: Animate the speech bubble IN:
Part 2: Show Confirmation screen:
Reversing heights of the 2 groups:
Notes: Animations not working on Glance / Notifications !
Should Watch: Designing with Animation