Tutorial: Direct dc.draw calls

 .

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:
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: 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) In the onUpdate() function we will now place all the logic which handles displaying values on screen: After doing your changes you should see something similar as this:

Test your field

  • Run the application
  • Simulate activity monitoring by executing Simulation -> Activity Monitoring -> Set Activity Monitor Info -> Daily Steps -> 150
  • Start the timer: Data Fields -> Timer -> Start Activity
  • Change the layout: Data Fields -> Layout -> 4 fields
  • Change the background: Data Field -> Layout -> Background

Source Code

You can download the full source code from here


Next Tutorial

Up next: Tutorial – Connect IQ string resources

Feedback

Did you like this article?Questions?
  • Post in the comments section below!

Leave a Reply