Configuring a text / icon control

Introduction

G4P V4.1 brrought a number of enhancements when using text-icon controls GButton, GLabel, GCheckbox and GOption.

The user interface for GButton, GLabel, GCheckbox and GOption controls icludes text and/or icon. G4P V4.1 brings two major enhancements to these controls.

1. Greater control over positioning and alignment of the icon and text.
2. Animated icons

This guide explains the first of these enhancements. As well as reading this guide you should explore the example sketch G4P_TextIconControls that comes with this library.

Positioning and aligning the icon

In previous versions of G4P the icon could be positioned to the left and right of the text using the statement

control.setIconAlign(GAlign.LEFT); // or GAlign.right

With version 4.1 the icon can also appear above and below the text and a new method has been introduced which determines where the icon is placed relative to the text.

control.setIconPos(GAlign.EAST); // GAlign.WEST, GAlign.NORTH, GAlign.SOUTH

The setIconAlign(GAlign align) method no longer exists so you will have to replace it with this new method.

When the icon position is NORTH or SOUTH then a horizontal zone that is the full width of the control and the same height as the icon is set aside for it. The alignment of the icon with that zone is determeined using the contants GAlign.LEFT, GAlign.RIGHT and GAlign.CENTER

When the icon position is EAST or WEST then a vertical zone that is the full height of the control and the same width as the icon is set aside for it. The alignment of the icon with that zone is determeined using the contants GAlign.TOP, GAlign.BOTTOM and GAlign.MIDDLE

It both cases, the text zone uses the rest of the control surface and the horizontal and vertical alignment within this text zone uses the same constants as the icon. It does have one further constant GAlign.JUSTIFY for justified text.

If there is no icon then the whole control surface is set aside for text and if there is no text then the entire control surface is available for icon alignment.

You can experiment with these settings by running the example sketch G4P_TextIconControls that comes with this library.