Layers…

Les « Layers » permettent d’afficher à l’écran des informations. Plusieurs layers peuvent être combinés. Ainsi, il est possible de déclarer un layer qui affiche du texte à l’écran et un invert layer qui va inverser une partie du texte.

LAYER CLASSIQUE :

Déclaration :

static TextLayer *text_layer;

Définition des attributs :

Il est utile d’employer la fonction ci-dessous, ainsi la définition du layer dans la fonction static void window_load(Window *window) {…} se fait simplement par l’écriture des lignes suivantes :

text_layer = init_text_layer(GRect(0, 0, 144, 24), GColorBlack, GColorClear, "RESOURCE_ID_GOTHIC_24", GTextAlignmentLeft);  

text_layer_set_text(text_layer, "Texte à afficher...");  

layer_add_child(window_get_root_layer(window), text_layer_get_layer(text_layer));

Ainsi on définit la zone rectangulaire dans lequel le layer va être placé. Un rectangle est défini par les coordonnées haut (x,y) ici (0,0) et bas (x,y) ici x=la largeur de l’écran (144 pixels) et y= la hauteur de la police choisie (ici 24 pixels).

Les autres paramètres sont la couleur du texte (GColorBlack ou GColorClear), du fond  (GColorBlack ou GColorClear), la police à utiliser (cf. police et exemple)

  //-- Définition Layers   
  static TextLayer* init_text_layer(GRect location, GColor colour, GColor background, const char *res_id, GTextAlignment alignment)   
  {   
  TextLayer *layer = text_layer_create(location);   
  text_layer_set_text_color(layer, colour);   
  text_layer_set_background_color(layer, background);   
  text_layer_set_font(layer, fonts_get_system_font(res_id));   
  text_layer_set_text_alignment(layer, alignment);   
  return layer;   
  }   

Et bien entendu dans la fonction static void window_unload(Window *window) {…} il convient de retirer le layer de la montre :

text_layer_destroy(text_layer);

LAYERS SPECIAUX :

a) Invert Layer :

Déclaration :

static InverterLayer *inverter_layer;

Définition :

inverter_layer = inverter_layer_create(GRect(0, 58, 144, 24));
layer_add_child(window_get_root_layer(window), inverter_layer_get_layer(inverter_layer)); //Ajout dans fenêtre 

La zone rectangulaire détermine la zone d’action de l’inversion. Pour l’insertion dans un Scroll Layer alors l’instruction sera « scroll_layer_add_child »

Retrait :

inverter_layer_destroy(inverter_layer);

b) SCROLL LAYER :

Attention, le SCROLL LAYER ne fonctionne qu’en mode Watch app (à cause de la gestion des touches de scrolling).

Déclaration :

static ScrollLayer *scroll_layer;

Définition :

Ici il est nécessaire d’utiliser la fonction GSize qui manipule une dimension en 2D. Ainsi GSize (x,y) détermine une zone qui a comme limite x et y. Soit GSize (144,168) une zone qui occupe la totalité de l’écran de la montre. Par contre pour un ScrollLayer la dimension de la zone sera celle choisie pour le scrolling (exemple 144,2000). La fonction GRect défini un rectangle qui déterminera la zone du Scroll Layer. Attention en mode Watch app, l’écran est diminué de 10 pixels pour l’affichage de l’heure.

Layer *window_layer = window_get_root_layer(window);
GRect bounds = layer_get_frame(window_layer); //-- Pour occuper la totalité de l'écran
//-- Sinon GRect bounds = GRect(0, 25, 144, 108); //-- Hauteur : 168-30(layer_haut)-30(layer_bas)
GRect max_text_bounds = GRect(0, 28, 144, 2000);
//-- Initialisation du Scroll Layer
scroll_layer = scroll_layer_create(bounds);
//-- Attribution des touches haut/bas au Scroll Layer
scroll_layer_set_click_config_onto_window(scroll_layer, window);
//-- Définition de la dimension du Scroll Layer
scroll_layer_set_content_size(scroll_layer, GSize(144,2000));

Le Scroll Layer doit être rempli par un Text_Layer :

//-- Initialisation du Text Layer qui sera dans le Scroll Layer
text_layer = text_layer_create(max_text_bounds);
text_layer_set_text(text_layer, "texte du scroll....");
text_layer_set_font(text_layer, fonts_get_system_font(FONT_KEY_GOTHIC_24_BOLD));
//--- Ajustement de la taille du layer_horaire pour le Scroll
GSize max_size = text_layer_get_content_size(horaire_layer);
//-- Taille fixe : GSize max_size = GSize(144,2000); 
//-- Ajout du Layer dans le Scroll Layer
scroll_layer_add_child(scroll_layer, text_layer_get_layer(text_layer));

Puis publication du Scroll Layer dans la fenêtre de la montre :

//-- Ajout du Scroll Layer dans la fenêtre
layer_add_child(window_layer, scroll_layer_get_layer(scroll_layer));

Ne pas oublier dans la fonction main() d’ajouter le paramètre true dans la fonction window_stack_push avant app_event_loop();

Retrait :

scroll_layer_destroy(scroll_layer);
text_layer_destroy(text_layer);

Gestion des boutons :

Dans le cas du Scroll Layer les boutons haut et bas sont occupés par le défilement du texte.Seul le bouton du milieu (Select) peut être utilisé pour activer d’autre fonctions. Pour ce faire il faut utiliser la fonction scroll_layer_set_callbacks.

Tout d’abord définition des handlers et du provider :

static void long_click_handler (ClickRecognizerRef recognizer, void *context){
    APP_LOG(APP_LOG_LEVEL_DEBUG, "Click long sur Select");
    text_layer_set_text(haut_layer, "Select appuyé long !");
}
static void select_click_handler (ClickRecognizerRef recognizer, void *context){
    APP_LOG(APP_LOG_LEVEL_DEBUG, "Click bref sur Select");
    text_layer_set_text(haut_layer, "Select appuyé bref !");
}
static void click_config_provider(void *context) {
  //-- Long Click
  window_long_click_subscribe(BUTTON_ID_SELECT, 500, NULL, long_click_handler); 
  window_single_click_subscribe(BUTTON_ID_SELECT, select_click_handler);
}

Puis déclaration du CallBack dans window_load :

scroll_layer_set_callbacks(scroll_layer, (ScrollLayerCallbacks){.click_config_provider=click_config_provider});

Le code source exemple est ici

  

REMARQUES :

La résolution de l’écran est de   144 x 168 pixels soit x allant de 0 à 144 et y allant de 0 à 168.

L’objet GRect a notamment les propriétés suivantes : size.w qui donne la largeur de l’objet,

ainsi si   GRect oRectangle = GRect(0, 28, 144, 2000);  alors oRectangle.size.w donne 144.

//GSize max_size = text_layer_get_content_size(text_layer);
//text_layer_set_size(text_layer, max_size);