2

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

AstroCB
  • 12,337
  • 20
  • 57
  • 73
Zohaib
  • 2,845
  • 2
  • 23
  • 33

2 Answers2

15

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

Tomas Camin
  • 9,996
  • 2
  • 43
  • 62
1

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.

Kevin Purnama
  • 63
  • 7
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Chris Loonam Apr 15 '15 at 01:50
  • Thanks for taking the time to let me know. Sorry, total beginner here. Still learning the ropes :) – Kevin Purnama Apr 15 '15 at 02:35