Prerequisites

Why?

The idea behind the layout system (as used in tutorial 1) is great as you seperate layout logic from business logic.
That system however has it’s drawbacks:

The layout system consumes more memory. If you’re tight on memory you might opt better for direct dc draws

The default multi-field layout is not valid for each watch (some watches have field 1 in the upper left corner, while for semi-round watches field 1 is at the center top), this means that you are forced to override the layout (or use a small font so that it fits in both single field as multi field layout)

This tutorial explains an alternative to the layouts.xml system, in the end you’ll have to opt for the system that works best for you. 🙂

Removing the layout system

We open the solution file from the previous tutorial in Eclipse (download here in case you didn’t make it yourself).

Remove the folder layouts and it’s contents in the resources folder

Remove the file StepsCarouselBackground.mc

Remove the onLayout function from StepsCarouselView.mc

Edit StepsCarouselView.mc file and make the body of the onUpdate function empty:

Monkey

1

2

3

4

//Display the value you computed here.Thiswill be called

//onceasecond when the data fieldisvisible.

functiononUpdate(dc){

}

Save all the files and Run, when your edits were successful you should now see a watch with a blank screen.

Implement the layout logic

Now the fun part starts and we can actually start re-implementing the layout logic.
we’ll create global variables (good practice is to do it under the class definition) to hold information:

Monkey

1

hidden varvalueFormat="%d";

I tend to initialize my variables in this declaration when I can, if you prefer you can also do this initialization from within the initialize function.
we’ll create a function to determine to help us determine if we’re showing a 1-field layout (so that we can display a bigger value)