Tips for screen layout

Here are a few tips I have gleaned while upgrading my app to accommodate the range of screens with resolutions from 218 to 280 px .

Here's a fairly complex target screen. It has around 15 elements that needed to be aligned vertically and horizontally.

View the screen through a grid not pixels. During layout, overlay the screen with a grid. Depending on the complexity of the screen the grid could be a simple as 3 x 3, or, for a more complex screen like this, I used 20 x 20 to do the fine adjustments.

dc.setPenWidth(1);		
dc.setColor(0xFFFFFF, 0xFFFFFF);
var grid = 20;		
for (var i=1; i< grid; i+=1){ 
	dc.drawLine (0, screenHeight*i/grid, screenWidth, screenHeight*i/grid); 					
	dc.drawLine (screenWidth*i/grid, 0, screenWidth*i/grid, screenHeight); 
}

Note that the fonts are scaled to the screen, so, for example, FONT_SYSTEM_SMALL takes the same proportion of the screen height and width on a Fenix5S with 218 px as it does on a Fenix6X Pro with 280 px.
The origin of text positioning is the top left corner of the text, so to visualize the way the text is being positioned during layout, set the background color of the fonts to grey (0x555555) .
Use getFontHeight() to align the text to the middle of a grid line vertically. So, to align your text (like "LINE: 04..." above) to the middle of say, the 8th grid line from the top, use screenHeight*8/grid + Gpx.getFontHeight(Gpx.FONT_SYSTEM_SMALL)/2
Use getFontAscent() to align the base of different fonts to a grid line (like "4 m" above). This is the distance from the origin to the base of the number or upper case characters in the font. So, to align different fonts along say, the second grid line from the top use screenHeight*2/grid + Gpx.getFontAscent(Gpx.FONT_SYSTEM_SMALL)/2

TobiasLj over 4 years ago

Good tips!

One thing that I find really odd is that there is no way to tell where on the screen the view is located. If I want to create a data field that is complex but should be usable regardless of the page layout, how do I do that? Problem is that with the new F6 line the combination of obscurity flags, width and height are no longer unique. I know that DaveBrillhart posted about this a couple of months ago but I still haven't found any way to use the maximum visible area of a field.

DaveBrillhart over 4 years ago in reply to TobiasLj

We can't resolve it precisely for every case, but we can for almost all of the layout permutations. For EDGE devices with rectangular fields, we're good. For round and semi-round, we know the width and height of the screen. A field must have a full or half width - that's all. For example, for Obscurity = 7, we know by comparing the field's height -vs- width if this is 1/2, 1/3, 1/4, or 1/5 of the screen. And then, knowing that, we can use simple math to know the exact outline of the field's arc around the top. The case where we don't know exactly is for obscurity 1, 4, or 5 if those are 1/4 or 1/5 of the screen height. In those cases, we don't know if they are above or below the center line. Meaning we don't know of the left/right sides are wider near the top or bottom of the field. However, what I do is assume the worse.... and it turns out those middle fields don't obscure much real estate anyway....like 4% or less. So just don't use that 2-4% of the edge.

TobiasLj over 4 years ago in reply to DaveBrillhart

DaveBrillhart said:
For example, for Obscurity = 7, we know by comparing the field's height -vs- width if this is 1/2, 1/3, 1/4, or 1/5 of the screen. And then, knowing that, we can use simple math to know the exact outline of the field's arc around the top.

That's a very good tip, haven't thought about that!