Proportional table row height for 38mm Apple Watch

Question

The default row height fits four rows exactly into the 42mm Watch. But on the 38mm Watch, the fourth row is cut off.

In IB I have the generic "Installed" checked for the Table; for Images (e.g.) this leads to customizing sizes but I don't see any such option for Table row height. Or would I just use what looks like Watch Size Classes, clicking down at the bottom where it says "Any Screen Size"? If so, how would that interact with the "Installed" settings?

I am going to hack around, but some SmartPerson™ could help a lot by pointing in the right direction.

FWIW, all the Apple sample code I've seen has the "38mm cutoff" problem too.

Answer 1

Why the rows are cut off

The row heights are intentionally the same, for a couple of reasons.

• While I don't see a minimum row height mentioned in the design guide, shorter rows would make it harder to target the right row on the 38mm screen. This would lead to an inconsistent user experience between the two watch sizes.

• A shorter row would lead to the issue of vertically clipping two-line text, which would occur more often on the 38mm screen since the rows are narrower.

  

  This example illustrates how the last row's WKInterfaceLabel text descender gets clipped by its group once you reduce the group height for a 38mm screen to fit 4 rows on the screen.

  The shorter row also leads to an insufficient amount of (vertical) white space around the text, making it harder to read rows of content.

Consistent row heights are no different than how some iPhone models can fit more rows per screen compared to some of the smaller-screened devices. Apple doesn't modify the iOS row height to fit the same number of rows on the smaller screen, as could fit on the larger screen. Their watchOS sample code is really consistent with their general design philosophies.

How to accomplish what you ask

You can change the group's height from Default to Fixed, and specify a smaller height (of 34 points) for the 38mm device. This would fit 4 rows on the smaller screen, as illustrated by the previous screen shot:

You should adjust your content as necessary to preserve vertical white space between the content and its group container.