Mouviciel

Initiation à CoreAnimation — Interlude

Publié le vendredi 24 octobre 2008, un commentaire

Dans la première partie, nous avons installé la structure pour travailler avec CoreAnimation et nous avons affiché une image dans une CALayer. Avant de vous proposer de poursuivre avec ces bases en altérant l'image par le biais de CoreAnimation, je voudrais faire évoluer l'interface de l'application CoreAnimationTutorial de façon à ce qu'on puisse modifier divers paramètres sans avoir à recompiler.

En fait, cet article n'est pas vraiment spécifique de CoreAnimation. C'est plutôt une initiation à Interface Builder. Mais comme les prochaines étapes nécessiteront de toucher à l'interface graphique, je voudrais détailler la modification de l'interface une première fois afin d'être plus concis les fois suivantes.

Troisième figure — Un pupitre de contrôle

Pour commencer sur des bases communes, et après vous avoir laissé expérimenter les propriétés de placement (contentsGravity) et de cadrage (contentsRect) de l'image, je vous invite à modifier les dernières lignes de la méthode -awakeFromNib de la façon suivante :

    // Placement de l'image
    [[animationView layer] setContentsGravity:kCAGravityResize];

    // Cadrage de l'image
    [[animationView layer]
     setContentsRect:CGRectMake(0, 0, 1, 1)];
}

Cela nous ramène aux valeurs par défaut du placement et du cadrage de l'image.

Ensuite, nous allons ajouter sous l'image un pupitre de contrôle qui nous permettra de modifier les paramètres d'affichage sans recompiler. Cela se passe d'abord dans Xcode puis dans Interface Builder. L'objectif de ces préliminaires est d'arriver à une fenêtre qui ressemble à ceci :

Dans Xcode, ajoutez un IBOutlet et une IBAction dans le fichierAppController.h qui serviront à contrôler les boutons radio :

@interface AppController : NSObject {
    IBOutlet NSView * animationView;
    IBOutlet NSMatrix * gravityMatrix;
}

-(IBAction)gravityMatrixDidChange:(id)sender;

@end

Maintenant ouvrez MainMenu.xib dans Interface Builder.

Ajoutez un Radio Group (dans la palette Library, shift-cmd-L, rubrique Cocoa — Views & Cells — Inputs & Values) en bas à gauche de la fenêtre de l'application. Ajustez les propriétés de ce Radio Group de la façon suivante (cela se passe dans la palette Inspector, shift-cmd-I) :

• Vérifiez que le Radio Group est bien sélectionné : le titre de la palette Inspector doit commencer par Matrix et finir par le nom de l'onglet visible.
• Choisissez l'onglet Attributes. Spécifiez 4 Rows et 3 Columns.
• Choisissez l'onglet Size. Dans la rubrique Control size, spécifiez Size: mini. Dans la rubrique Cell Size, spécifiez Height: 101, Width: 18, Horizontal: 4 et Vertical: 2.

Maintenant, changez le label de chacun des boutons radio : double-cliquez sur le label Radio et remplacez sa valeur par la valeur que je vous ai donnée dans l'image ci-dessus.

Mettez ce groupe de boutons radio dans une boîte : Vérifiez que le groupe est toujours sélectionné (le titre de la palette Inspector commence par Matrix), puis menu Layout — Embed Objects In — Box. Déplacez la Box à distance juste suffisante pour répondre aux préconisations d'Apple : des lignes pointillées bleues apparaissent lorsque c'est le cas. Changez le titre en Contents Gravity.

Dans la palette Inspector, rubrique Size de la boîte (son titre est Box Size) Ajustez l'Autosizing de façon à ce que la boîte ne change pas de dimensions et reste collée en bas au centre de la fenêtre :

Ajoutez maintenant une Custom View en haut de la fenêtre (dans la palette Library, shift-cmd-L, rubrique Cocoa — Views & Cells — Layout Views). Ajustez ses dimensions à Height: 216 et Width: 384. Placez-la en haut à gauche de la fenêtre sans laisser de marge avec le bord. Déplacez la boîte Contents Gravity juste sous la Custom View (jusqu'à ce que le trait bleu apparaisse). Ajustez la taille de la fenêtre pour être aussi large que la Custom View et juste assez haute pour laisser apparaître la boîte Contents Gravity (encore une fois avec le trait bleu). Le résultat doit être celui de la première image.

Ajustez l'Autosizing de la Custom View de la façon suivante pour indiquer qu'elle doit occuper tout l'espace dont elle dispose :

Sélectionnez la fenêtre en cliquant sur sa barre de titre. Dans palette Inspector, rubrique Size (titre Window Size), cochez la case Has Minimum Size et cliquez sur le bouton Use Current. Les dimensions minimales de la fenêtre devraient être 384 par 358.

Sauvez (cmd-S). Simulez (cmd-R). Les aspects graphiques sont prêts.

Maintenant, il s'agit de mettre en place les connexions entre les éléments graphiques et l'App Controller. Dans la fenêtre principale MainMenu.xib (English) faites ctrl-clic sur l'objet App Controller pour faire apparaître sa palette des connexions. Les éléments importants sont les deux Outlets animationView et gravityMatrix, ainsi que dans la rubrique Received Actions l'action gravityMatrixDidChange:.

À droite de chacun de ces éléments il y a un petit cercle qui devient un signe + lorsque la souris passe par dessus. Si vous cliquez et faites glisser la souris depuis un de ces cercles, une ligne bleue se dessine et suit le pointeur de la souris. Lorsque la souris passe au dessus d'un élément de l'interface graphique approprié, celui-ci est entouré d'un rectangle bleu. Si vous relâchez le bouton de la souris à cet instant, l'élément de l'App Controller est alors connecté à l'élément de l'interface graphique. Réalisez l'opération pour les trois couples d'éléments suivants :

• animationView vers Custom View,
• gravityMatrix vers Matrix, la matrice des boutons radio,
• gravityMatrixDidChange vers Matrix, la matrice des boutons radio : Attention il faut sélectionner la matrice entière, et pas un bouton isolé.

Sauvez (cmd-S). Nous en avons fini avec Interface Builder.

Enfin, la dernière étape consiste à écrire l'action gravityMatrixDidChange: pour qu'elle modifie la propriété contentsGravity de la CALayer selon le choix que l'utilisateur aura saisi dans le groupe de boutons radio. Je vous propose le code suivant, à insérer dans AppController.m juste avant le @end :

-(IBAction)gravityMatrixDidChange:(id)sender
{
    NSDictionary *gravityNamesAndValues =
    [NSDictionary dictionaryWithObjectsAndKeys:
     kCAGravityCenter, @"Center",
     kCAGravityTop, @"Top",
     kCAGravityLeft, @"Left",
     kCAGravityBottom, @"Bottom",
     kCAGravityRight, @"Right",
     kCAGravityTopLeft, @"Top Left",
     kCAGravityTopRight, @"Top Right",
     kCAGravityBottomLeft, @"Bottom Left",
     kCAGravityBottomRight, @"Bottom Right",
     kCAGravityResize, @"Resize",
     kCAGravityResizeAspect, @"Resize Aspect",
     kCAGravityResizeAspectFill, @"Resize Aspect Fill",
     nil];
    
    NSString * gravity = [gravityNamesAndValues
                          objectForKey:[[sender selectedCell] title]];
    
    [[animationView layer] setContentsGravity:gravity];
}

@end

Compilez et lancez (cmd-R). Changez la gravité du contenu, redimensionnez la fenêtre. Voilà, nous avons le cadre qui nous permettra d'interagir avec CoreAnimation ! Bien sûr, pour l'instant nous ne pouvons manipuler que le placement de l'image. Mais je voulais entrer dans le détail de la construction d'une interface graphique de façon à être plus succint lorsque nous ajouterons d'autres paramètres à modifier.

Commentaires

Xcode

Le jeudi 29 janvier 2015 à 08:41

Je croit que j'ai trouve la solution à mon problème grâce a ce tutoriel.

Ajoutez un commentaire

Les commentaires sont destinés à répondre en public à l'article visé et à ses commentaires déjà publiés. C'est pourquoi seul un pseudonyme vous est demandé ici. Si vous souhaitez échanger avec moi en privé, merci de me laisser un message via le menu contact en haut de la page.

Pseudo

Email Site

Commentaire