Share
Ce tutoriel vous apprendra comment créer un menu iOS accrocheur en utilisant le projet open source AwesomeMenu. Continuer à lire!
Ce qui suit est une courte démonstration de AwesomeMenu en action:
Notez que toutes les icônes fournies par AwesomeMenu sont entièrement personnalisables. Les icônes étoile / plus par défaut ci-dessus sont uniquement utilisées à des fins de démonstration..
Ouvrez Xcode et créez un nouveau projet iOS. Sélectionnez "Single View Application" puis cliquez sur "Next".
Nommez l'application AwesomeMenuDemo et entrez les valeurs appropriées pour les champs de saisie de texte restants. Sélectionnez "iPhone" dans le menu déroulant des appareils et assurez-vous que "Utiliser le comptage automatique des références" est sélectionné. Ne sélectionnez pas "Utiliser les storyboards" ou "Inclure les tests unitaires".
La prochaine étape consiste à télécharger le code AwesomeMenu à partir de la page officielle du projet GitHub. Après avoir accédé aux fichiers, vous devrez faire glisser deux dossiers dans votre propre projet: le dossier "AwesomeMenu" contenant le AwesomeMenu et AwesomeMenuItem classes, et le dossier "Images" contenant les images étoile et signe plus.
Lorsque vous faites glisser l'image dans Xcode, cochez la case "Copier les éléments dans le dossier du groupe de destination", sélectionnez le bouton radio "Créer des groupes pour les dossiers ajoutés", puis cochez la case "AwesomeMenuDemo" dans la liste Ajouter aux cibles. table.
Les animations fournies par AwesomeMenu dépendent du framework QuartzCore. Pour ajouter cette structure, sélectionnez le projet AwesomeMenuDemo dans le volet du navigateur de projet, puis cliquez sur l'onglet "Créer des phases". Développez ensuite le menu déroulant "Lier le binaire avec les bibliothèques" et cliquez sur l'icône "plus" pour ajouter un nouveau cadre..
Sélectionnez QuartzCore dans la liste pour ajouter la structure à votre projet..
Si vous avez terminé avec succès ci-dessus, vous devriez maintenant voir le cadre "QuartzCore" dans le navigateur de projet à gauche. Vous pouvez soit le laisser où il est ou le faire glisser dans le dossier "Frameworks" pour garder les choses organisées.
Maintenant saute vers le ViewController.h fichier. Vous devez importer les classes AwesomeMenu dans le ViewController avec le code suivant:
#importation#import "AwesomeMenu.h"
Cela permettra au contrôleur de vue principal du projet d'utiliser la fonctionnalité AwesomeMenu..
Si vous avez suivi les instructions de l'étape 1, le projet que vous avez créé utilise le comptage automatique de références (ARC) pour la gestion de la mémoire. ARC est une méthode phénoménale de gestion de la mémoire d'application, mais AwesomeMenu a été écrit avec MRC (Manual Reference Counting) et ne peut donc pas être compilé dans un projet ARC sans quelques modifications..
Bien que vous puissiez essayer de convertir manuellement le projet AwesomeMenu de MRC à ARC, je ne le recommanderais pas. Au lieu de cela, vous pouvez simplement définir le -fno-objc-arc indicateur de compilateur sur chacun des fichiers de code source AwesomeMenu pour indiquer au compilateur de ne pas appliquer ARC à ces fichiers. Cool hein?
Heureusement, cela est facile. Accédez à l'onglet "Construire les phases" de votre projet et développez le menu déroulant "Compiler les sources". Double-cliquez sur le AwesomeMenu.m fichier et une boîte de dialogue avec un champ de texte apparaîtra. Entrez "-fno-objc-arc" dans cette case pour appliquer le drapeau du compilateur puis cliquez sur "Terminé".
Ensuite, faites la même chose pour le AwesomeMenuItem.m fichier.
Avec ces indicateurs en place, le compilateur sait appliquer ARC à tous les fichiers de code source de votre projet, à l'exception des deux fichiers autres que des arcs liés à AwesomeMenu..
Tout d'abord, créons une instance de AwesomeMenu et plaçons-la au centre du contrôleur de vue:
- (void) viewDidLoad [super viewDidLoad]; // Effectue toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un nib. AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menus: nil]; [auto.view addSubview: menu];
Pour l'instant, le des menus paramètre a été défini sur nil, mais à l'étape suivante, nous le remplacerons par un tableau de AwesomeMenuItem objets. Allez-y et lancez le projet et vous devriez voir un signe plus au centre de l'écran. Le basculement de l'icône fonctionnera, mais aucune option de menu n'est encore affichée..
Chaque élément de menu fourni par AwesomeMenu peut être associé à trois images différentes: une image d'arrière-plan, une image d'arrière-plan mise en surbrillance et une image de contenu. Par défaut, AwesomeMenu inclut les images suivantes pour ces rôles:
Allez-y et créez un UIImage objet pour faire référence à chacun de ces fichiers:
- (void) viewDidLoad [super viewDidLoad]; // Effectue toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un nib. UIImage * storyMenuItemImage = [UIImage imageNamed: @ "bg-menuitem.png"]; UIImage * storyMenuItemImagePressed = [UIImage imageNamed: @ "bg-menuitem-highlight.png"]; UIImage * starImage = [UIImage imageNamed: @ "icon-star.png"]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menus: nil];
Maintenant, créez vos deux premières options de menu, placez-les dans un NSArray, et assigner ce tableau à l'objet de menu des menus paramètre:
UIImage * storyMenuItemImage = [UIImage imageNamed: @ "bg-menuitem.png"]; UIImage * storyMenuItemImagePressed = [UIImage imageNamed: @ "bg-menuitem-highlight.png"]; UIImage * starImage = [UIImage imageNamed: @ "icon-star.png"]; AwesomeMenuItem * starMenuItem1 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage en surbrillanceImage: storyMenuItemImagePressed ContentImage: starImage en surbrillanceContenuImage: nil]; AwesomeMenuItem * starMenuItem2 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage en surbrillanceImage: storyMenuItemImagePressed ContentImage: starImage en surbrillanceContenuImage: nil]; NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, nil]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menus: menuOptions]; [auto.view addSubview: menu];
Générez et exécutez le projet maintenant, et devrait voir un écran semblable au suivant:
Lorsque vous ajoutez des éléments de menu supplémentaires, AwesomeMenu les placera automatiquement dans un angle prédéfini. Par défaut, l'angle est égal à un cercle complet, le centre étant le signe "plus".
Ajoutez trois éléments de menu supplémentaires pour voir cet effet en action:
AwesomeMenuItem * starMenuItem1 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage en surbrillanceImage: storyMenuItemImagePressed ContentImage: starImage en surbrillanceContenuImage: nil]; AwesomeMenuItem * starMenuItem2 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage en surbrillanceImage: storyMenuItemImagePressed ContentImage: starImage en surbrillanceContenuImage: nil]; AwesomeMenuItem * starMenuItem3 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage en surbrillanceImage: storyMenuItemImagePressed ContentImage: starImage en surbrillanceContenuImage: nil]; AwesomeMenuItem * starMenuItem4 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage en surbrillanceImage: storyMenuItemImagePressed ContentImage: starImage en surbrillanceContenuImage: nil]; AwesomeMenuItem * starMenuItem5 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage en surbrillanceImage: storyMenuItemImagePressed ContentImage: starImage en surbrillanceContenuImage: nil]; NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, starMenuItem3, starMenuItem4, nil]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menus: menuOptions]; [auto.view addSubview: menu];
Votre menu devrait maintenant ressembler à ceci:
L'effet actuel fera exploser les options de menu dans un cercle de 360 degrés autour du bouton de menu. Cela fonctionne très bien lorsque le menu est au centre de l'écran, mais vous voudrez probablement repositionner le point de départ du menu vers le haut, le bas ou le coin de l'appareil..
Deux propriétés de menu fonctionnent ensemble pour vous permettre de contrôler ceci: menuWholeAngle et rotationAngle. Les principes mathématiques en jeu dépassent le cadre de ce didacticiel, mais les captures d'écran suivantes illustrent les combinaisons les plus utiles:
Par exemple, pour implémenter les valeurs du quadrant inférieur droit spécifiées ci-dessus, modifiez le code du projet comme suit:
AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menus: menuOptions]; // Quadrant inférieur droit menu.menuWholeAngle = M_PI / 180 * 90; menu.rotateAngle = M_PI / 180 * 90; [auto.view addSubview: menu];
En plus de contrôler les angles de placement des options de menu, vous pouvez également contrôler la distance des options de menu par rapport au centre avec EndRadius propriété. Jouez avec cette valeur pour voir comment cela fonctionne.
Maintenant que vous savez comment contrôler l'angle et la distance du placement des options de menu, vous êtes beaucoup plus susceptible de vouloir placer le menu dans l'un des quatre coins de l'écran. Pour ce faire, vous devez personnaliser le point de départ du bouton de menu. Vous pouvez le faire avec le point de départ propriété, comme si:
// Quadrant inférieur droit menu.menuWholeAngle = M_PI / 180 * 90; menu.rotateAngle = M_PI / 180 * 90; menu.startPoint = CGPointMake (30.0f, 30.0f); [auto.view addSubview: menu];
La ligne ajoutée ci-dessus placera le menu au point (30, 30) sur l'écran de l'iPhone. En d'autres termes, il apparaîtra maintenant dans le coin supérieur gauche et devrait ressembler à ceci:
Comme vous pouvez le constater, il est facile de repositionner le point de départ du menu. Assurez-vous simplement d’afficher autant d’options de menu que vous pouvez raisonnablement tenir dans le jeu de contraintes d’angle..
Maintenant que vous savez créer un menu personnalisé, vous êtes prêt à implémenter chaque option. Lorsqu'un utilisateur appuie sur l'un des boutons d'option de menu, un message est envoyé au délégué AwesomeMenu avec le numéro d'index de l'option sélectionnée. Pour accéder à cette valeur d’index, vous devez implémenter le AwesomeMenuDelegate.
Tout d'abord, ouvrir ViewController.h et spécifiez qu'il sera conforme au protocole de délégué:
#importation#import "AwesomeMenu.h" @interface ViewController: UIViewController
Ensuite, passez à ViewController.m et ajoutez l'implémentation du délégué:
- (void) AwesomeMenu: (AwesomeMenu *) menu didSelectIndex: (NSInteger) idx NSLog (@ "Sélectionnez l'index:% d", idx);
Vous devrez également spécifier que le contrôleur de vue est le délégué du menu, comme suit:
NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, starMenuItem3, nil]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menus: menuOptions]; menu.delegate = self;
À ce stade, vous pouvez déterminer quelle option de menu a été sélectionnée en mappant l’index cliqué sur le Options de menu tableau. Pour compléter la navigation dans les menus, vous pouvez ajouter un nouveau contrôleur de vue à l'écran ou simplement modifier le contrôleur de vue existant si nécessaire. Parce que l'implémentation exacte sera spécifique à vos propres applications, cela restera comme un exercice pour le lecteur..
AwesomeMenu est un projet open source attrayant et excitant permettant de personnaliser les contrôles de navigation de votre application. J'espère que vous avez apprécié ce tutoriel et n'hésitez pas à laisser des commentaires ou des questions ci-dessous. Vous pouvez également me joindre via Twitter en envoyant un message à @markhammonds.
Accentsconagua