Search code examples
iosobjective-clayoutwatchkit

Element size relative to screen size in Watchkit

I'm currently making a WatchKit app that requires two different layouts based on some conditions. Because these two layouts are very similar (the one just has more elements than the other), I've decided to use the same interface controller for both (and because there's no way to programmatically determine which controller to load on startup).

However, the problem arises when it comes to the different screen sizes:

  1. In my first layout I want the three elements to fill the screen on both sizes. To achieve this I used percentage values for their sizes, that always adds up to 100% (that way, there's no scrolling necessary on the 38mm and no empty space on the 42mm). enter image description here

  2. In the second layout, there are several more elements on the screen. So when I use the same percentage values for the same elements, they grow because the total size of the interface controller is bigger.
    enter image description here

What do you guys recommend I do to fix this problem?

EDIT 1: Pictures are meant to represent what I want it to look like. Right now, the elements (like the map and button) are 30 and 40% of the interface controller size in both cases, making them huge on the second layout. I want them to maintain the same fixed size in both cases. However using a fixed number makes them either too big for the 38mm or too small for the 42mm.

EDIT 2: There seems to be a little confusion: When laying out elements on the Apple Watch, there are three options:

  1. Size to fit content The element encloses all the elements within.
  2. Relative to container You give it a percent value of the container.
  3. Fixed You give it a value in points.

When I use the 2nd option, relative, I get a perfect output on both the 38mm and 42mm watch in the first layout. However, when adding more elements to the screen in the second layout, the size of the container increases, and so does the size of the elements. When I use the 3rd option, fixed, I can get a perfect output on either one of the sizes. The elements are either too big for the 38mm, and scrolling is necessary even in the first layout. Or the elements are two small for the 42mm, and there's loads of open space.

I need a solution that will let the elements in the first layout fill the screen (such as with option 2), but won't increase the size of the elements in layout two (such as with option 3). There's no way to change this programmatically in WatchKit, so I need to come up with a third solution that would work.

Any suggestions?

Solution

  • Wouldn't it be easier to design the controller with absolute size values for both screen sizes?

    Like size classes for iOS, InterfaceBuilder allows to switch between the watch sizes by clicking on the + icon:

    enter image description here

    where you can choose the watch size:

    enter image description here

    To see how the different layouts look you can change the preview on the bottom of the InterfaceBuilder window:

    enter image description here