CODEWITHSUNDEEP
iphonewatchkitios8-extension
Zohaib
Zohaib

Reputation: 2865

Layout in Apple Watch

I am making a calculator for Apple Watch I have inserted a group and inside that I have added 4 button but I can't find any option that those 4 buttons should adjust on both Apple Watch screen.

Apple Watch 38mm

Screenshot

Apple Watch 42mm

Screenshot

Group Properties

Screenshot

Button Properties

enter image description here

Upvotes: 2

Views: 981

Answers (2)

Kevin Purnama
Kevin Purnama

Reputation: 73

For anyone else who might be trying to do similar things on Apple Watch kit, there is a very good basic calculator tutorial here: http://www.noodlewerk.com/blog/calculator-apple-watch-tutorial/ (not my own tutorial, but something I came across in my own experimentation with the Kit)

Excerpt from article:

"Select both buttons and open the Attributes Inspector in the sidebar on the right. Keep the width option at ‘Relative to Container’ but change the value from 1 to 0.25."

This percentage setting allows UI elements to re-size relative to the display area, which is useful in situation like the Apple Watch where there are two discreet screen sizes.

Upvotes: 1

Tomas Camin
Tomas Camin

Reputation: 10086

Use one WKInterfaceGroup per row and in the size inspector set "Relative to Container" width to 1 and height to 0.18.

enter image description here

Inside each group layout your WKInterfaceButtons setting Relative to Container heights to 1 and width 0.25 (4 elements per row).

enter image description here

Final result on 38mm:

enter image description here

and 42mm:

enter image description here

Upvotes: 15

Related Questions