Share
Ce tutoriel vous apprendra comment créer une Menu accordéon. Ce menu animé vous permettra de recueillir les données de l’utilisateur de manière attrayante et simplifiée. Continuez à lire pour en savoir plus!
La position initiale du menu accordéon sera au centre de la vue cible sur laquelle il apparaît. Lorsque le menu apparaît, une moitié se déplacera vers le haut de la vue cible, tandis que l'autre moitié se déplacera vers le bas de la vue et s'agrandira à la hauteur autorisée. Lors de l'utilisation, le point d'origine Y et la hauteur vont être modifiés pour que l'effet souhaité puisse avoir lieu. Le menu lui-même consistera en une tableview. Cela nous apportera une grande flexibilité quant au nombre d'options ajoutées au menu. La vue table va exister en tant que sous-vue sur une vue et apparaîtra sur une vue cible. La vue principale du contrôleur de vue du menu accordéon fonctionnera comme une couverture pour les vues secondaires existantes à l'arrière, de sorte que l'utilisateur ne peut rien utiliser d'autre que nos options de menu..
Allons de l'avant et donnons vie à cette idée. Voici une image de ce que le produit final va ressembler.
La première chose à faire est de créer un nouveau contrôleur de vue pour notre menu accordéon. Avant cela, nous allons créer un nouveau groupe dans le Xcode pour que tout soit bien rangé.
dans le Navigateur de projet volet sur le côté gauche du Xcode, Ctrl + Clic (clic droit) sur le CustomViewsDemo groupe. Sélectionnez le Nouveau groupe option du menu contextuel.
Ensemble Menu accordéon comme le nom.
Créons maintenant le contrôleur de vue. Ctrl + Clic (clic droit) sur le Menu accordéon groupe. Sélectionnez le Nouveau fichier… option du menu contextuel.
Sélectionnez le Classe Objective-C comme modèle pour le nouveau fichier et cliquez sur suivant.
Utilisez le nom AccordionMenuViewController dans le champ de classe et assurez-vous que dans le Sous-classe de champ le UIViewController la valeur est sélectionnée. N'oubliez pas de quitter le "Avec XIB pour l'interface utilisateur" option cochée.
Enfin, cliquez sur le bouton créer. Assurez-vous que le Menu accordéon est le groupe sélectionné, comme indiqué dans l'image suivante.
La première chose à faire avec notre nouveau contrôleur de vue est la configuration de l'interface dans le Interface Builder, ce qui devrait être assez simple. La plupart des travaux seront effectués en code.
Clique sur le AccordionMenuViewController.xib fichier pour tourner le Interface Builder sur. Cliquez sur la vue par défaut et désactivez la fonctionnalité Autolayout afin qu'elle fonctionne sur les versions d'iOS antérieures à 6..
Ensuite, allez au Inspecteur d'attributs. dans le Métriques simulées section, définissez le Taille valeur à Aucun afin qu'il fonctionne sur un écran de 3,5 ".
Continuez et ajoutez une nouvelle vue, mais assurez-vous de ne pas l'ajouter en tant que sous-vue à la vue par défaut. Faites ce qui suit:
Prenez une tableview du Bibliothèque d'objets et l'ajouter en tant que sous-vue à la vue que nous avons ajoutée à l'étape précédente. Terminez la configuration suivante dans le Inspecteur d'attributs section.
Voici à quoi devrait ressembler votre interface.
Ensuite, nous allons créer deux IBOutlet propriétés pour la vue supplémentaire et la vue de table que nous avons ajoutées au projet précédemment. Premièrement, nous devrions faire le Assistant rédacteur apparaître. Cliquez sur le bouton du milieu dans la Éditeur section de la barre d’outils Xcode pour la révéler.
Pour connecter la vue à un nouveau IBOutlet propriété, aller à Afficher le contour du document> Ctrl + clic (clic droit)> Nouvelle prise de référencement. Glissez et déposez dans le Assistant rédacteur.
J'ai nommé la propriété viewAccordionMenu et je vous recommande d’utiliser le même nom pour éviter tout problème lors du codage. Met le Espace de rangement option de Fort au lieu de la valeur par défaut Faible valeur.
Ajoutons maintenant un IBOutlet propriété pour la tableview. Comme ci-dessus, créez une nouvelle propriété nommée tblAccordionMenu. Met le Espace de rangement option de Fort ainsi que.
Voici les deux IBOutlet Propriétés.
@property (strong, nonatomic) IBOutlet UIView * viewAccordionMenu; @property (strong, nonatomic) IBOutlet UITableView * tblAccordionMenu;
Jusqu'ici tout va bien! Nous avons créé le contrôleur de vue pour le menu accordéon, nous avons configuré l’interface et les deux éléments requis. IBOutlet propriétés pour les vues que nous avons ajoutées au générateur. Maintenant il est temps de commencer à écrire du code.
Tout d’abord, nous devons définir notre contrôleur de vue comme délégué et source de données de la tableview créée dans le Interface Builder. Notre contrôleur de vue doit adopter les protocoles respectifs. Clique sur le AccordionMenuViewController.h fichier et juste à côté de la @interface en-tête ajouter ce qui suit.
@interface AccordionMenuViewController: UIViewController
Clique sur le AccordionMenuViewController.m déposer et mettre en œuvre un simple init méthode. Définissez le contrôleur de vue en tant que délégué et source de données de la vue de table.
-(id) init self = [super init]; if (self) [_tblAccordionMenu setDelegate: self]; [_tblAccordionMenu setDataSource: self]; retourner soi-même;
Pour améliorer le menu, ajoutons une bordure. dans le init, ajouter le code en surbrillance.
… If (self) [_tblAccordionMenu setDelegate: self]; [_tblAccordionMenu setDataSource: self]; // Ajoute une bordure autour de la tableview. [[_tblAccordionMenu layer] setBorderColor: [UIColor whiteColor] .CGColor]; [[_tblAccordionMenu layer] setBorderWidth: 2.0]; …
Assurez-vous de l'ajouter en haut du fichier.
#importation
Définissez la couleur d'arrière-plan de la vue par défaut sur gris clair avec transparence.
… If (self) … [self.view setBackgroundColor: [UIColor colorWithRed: 0.33 green: 0.33 blue: 0.33 alpha: 0.75]]; …
Il est judicieux de définir la hauteur de ligne de la vue table comme une constante. Séparé de tableView: heightForRowAtIndexPath méthode, nous allons l'utiliser dans d'autres méthodes. Juste après le #importation commandes, ajoutez ce qui suit.
#define ROW_HEIGHT 40.0 // La hauteur de chaque option du menu accordéon.
Le menu accordéon utilisera une animation pour apparaître et disparaître. Nous pouvons définir la durée de l'animation comme une constante.
#define ANIMATION_DURATION 0.25 // La durée de l'animation.
A partir de maintenant, si nous voulons changer la hauteur de la ligne ou la durée de l'animation, nous le ferons une fois sans changer les valeurs de chaque méthode..
Nous devrions déclarer deux variables privées et un NSArray. Les variables concernent la largeur et la hauteur du menu accordéon, c'est-à-dire la largeur et la hauteur de la vue parente de notre table. le NSArray est le tableau qui conservera les options du menu, et ce sera la source de données de la tableview.
Au sommet de la AccordionMenuViewController.m fichier ajouter les lignes suivantes dans le @interface section.
@interface AccordionMenuViewController () CGFloat menuViewWidth; CGFloat menuViewHeight; @property (nonatomic, strong) NSArray * optionsArray; @fin
Assurez-vous de ne pas oublier les accolades!
Au moins trois méthodes publiques doivent être mises en œuvre pour que le menu en accordéon fonctionne correctement. La première méthode sera utilisée pour définir les options du menu, la deuxième méthode fera apparaître le menu accordéon et la troisième méthode le fera disparaître.
Tout d'abord, nous devrions déclarer les méthodes que j'ai mentionnées ci-dessus dans le .h fichier. Alors, cliquez sur le AccordionMenuViewController.h déposer et ajouter ce qui suit.
-(void) setMenuOptions: (NSArray *) options; - (void) showAccordionMenuInView: (UIView *) targetView; - (void) closeAccordionMenuAnimated: (BOOL) animé;
Implémentons la première méthode. Clique sur le AccordionMenuViewController.m déposer et écrire ou copier / coller le code suivant.
-(void) setMenuOptions: (NSArray *) options NSMutableArray * tempArray = [NSMutableArray arrayWithArray: options]; [tempArray addObject: @ "Close"]; _optionsArray = [[NSArray alloc] initWithArray: (NSArray *) tempArray copyItems: YES];
Même s’il s’agit d’une méthode très simple, laissez-moi vous expliquer un peu. Je trouve plus facile pour l'utilisateur et le programmeur de fournir un tableau avec des options de menu seulement. Vous n'avez pas besoin d'être préoccupé par le soi-disant fermer le menu option. Ce n'est vraiment utile que lorsque quelqu'un utilisera le menu accordéon dans plus d'un cas. Je utilise l tempArray tableau mutable pour rassembler les options utilisateur et l’option close. Si vous savez que le _optionsArray n'est pas mutable, vous comprendrez qu'il ne peut pas accepter de nouveaux objets après la création. J'initialise le _optionsArray tableau. C'est votre choix d'éviter d'utiliser cette logique ou de modifier le titre de l'option de menu Fermer..
Passons à la méthode suivante. Cela concerne la façon dont le menu accordéon apparaît à l'écran. Il y a beaucoup d'étapes différentes, donc je vais en parler et en discuter en parties.
Tout d'abord, nous devons prendre la barre d'état en considération lorsque le menu accordéon est sur le point d'apparaître. En effet, nous allons utiliser la vue cible où le menu apparaîtra et son cadre comme base pour configurer nos vues. Il est donc très important de gérer correctement la barre d’état. Si la barre d'état est masquée, il n'y a aucun problème. Cependant, si elle est visible, un espace vide égal à la hauteur de la barre d'état sera créé lorsque nous ferons apparaître notre vue. Donc, dans un premier temps, nous devons vérifier si la barre d’état est visible et stocker sa hauteur pour corriger le décalage créé par celui-ci..
-(void) showAccordionMenuInView: (UIView *) targetView // ÉTAPE 1: DÉCALAGE DE LA BARRE D'ÉTAT CGFloat statusBarOffset; if (! [[UIApplication sharedApplication] isStatusBarHidden]) CGSize statusBarSize = [[UIApplication sharedApplication] statusBarFrame] .size; si (statusBarSize.width < statusBarSize.height) statusBarOffset = statusBarSize.width; else statusBarOffset = statusBarSize.height; else statusBarOffset = 0.0; …
C’est la démarche que nous avons suivie lors du précédent tutoriel dans la vue saisie de texte personnalisée.
Ensuite, nous devrions spécifier quelles sont la largeur et la hauteur de la vue cible en fonction de l'orientation. En fonction de l’orientation, nous devrions "indiquer" si le décalage qui doit être déplacé par notre vue par défaut est sur l’axe des X ou des Y..
-(void) showAccordionMenuInView: (UIView *) targetView … CGFloat width, height, offsetX, offsetY; if ([[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeLeft || [[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeRight) // Si l'orientation correspond à paysage, la largeur // obtient la valeur de hauteur de viewView et la durée la valeur de la largeur de targetView. width = targetView.frame.size.height; height = targetView.frame.size.width; offsetX = -statusBarOffset; offsetY = 0,0; else // Sinon, la largeur est largeur et la hauteur est hauteur. width = targetView.frame.size.width; height = targetView.frame.size.height; offsetX = 0,0; offsetY = -statusBarOffset; …
La prochaine étape est facile. Nous allons simplement configurer la vue par défaut, auto.view, en définissant son cadre et le décalage approprié, sa valeur alpha, et enfin en l'ajoutant en tant que sous-vue à la vue cible.
-(void) showAccordionMenuInView: (UIView *) targetView … // ÉTAPE 3: CONFIGURER LE SELF.VIEW [self.view setFrame: CGRectMake (targetView.frame.origin.x, targetView.frame.origin.y, width, height) ]; [self.view setFrame: CGRectOffset (self.view.frame, offsetX, offsetY)]; [auto.view setAlpha: 0.0]; [targetView addSubview: self.view];…
Il est maintenant temps de configurer la vue contenant la vue de table. Nous devons préciser ici sa taille, en gardant à l’esprit qu’elle occupera une partie de l’écran. Je mets sa largeur à 260,0 px, mais vous pouvez le changer selon vos envies. Sa hauteur sera calculée en fonction du nombre total d'options et de la hauteur de chaque ligne. Cela signifie que la hauteur sera égale au nombre total de lignes multiplié par la hauteur de chaque ligne. Dans le cas d'options trop nombreuses et d'une hauteur de menu supérieure à la hauteur de vue cible dans l'une ou l'autre orientation, nous devons réduire manuellement le menu et permettre le défilement sur la vue de table. Pour cela, nous utiliserons une variable temporaire qui conservera la hauteur dans chaque cas..
Pour obtenir l'effet accordéon, nous devons définir son cadre deux fois. Au début, nous lui donnerons son cadre normal et nous le centrerons selon le point central de la vue cible. Ensuite, nous allons stocker le point d'origine Y et définir le cadre à nouveau. Pour ce faire, définissez le point d'origine Y sur le point d'origine Y de son centre et définissez sa hauteur sur 0.0. Lorsque le point d'origine Y et la hauteur seront restaurés à leurs valeurs d'origine, nous aurons un excellent effet d'accordéon.
-(void) showAccordionMenuInView: (UIView *) targetView … // ÉTAPE 4: CONFIGURER LA VUE DU MENU menuViewWidth = 260.0; // La hauteur est la hauteur de chaque ligne multipliée par le nombre // d'options. menuViewHeight = ROW_HEIGHT * [_optionsArray count]; // Déclarez et utilisez une variable locale temporaire pour la hauteur de la vue du menu. CGFloat tempMenuHeight; if (menuViewHeight> height) // Si la valeur de menuViewHeight définie ci-dessus est supérieure à la hauteur de la vue cible //, définissez la hauteur de la vue de menu sur la hauteur de targetview - 50.0. // Activer également le défilement sur la table. tempMenuHeight = height - 50.0; [_tblAccordionMenu setScrollEnabled: YES]; else // Sinon, si la hauteur de la vue de menu n'est pas supérieure à la hauteur de la targetView //, tempMenuHeight est simplement égal à menuViewHeight. // Le défilement ne doit pas être activé. tempMenuHeight = menuViewHeight; [_tblAccordionMenu setScrollEnabled: NO]; // Définit le cadre initial de la vue du menu. Notez que nous ne sommes // pas intéressés par les points d'origine x et y car ils seront // automatiquement définis juste après, donc définissez-le sur 0.0. [_viewAccordionMenu setFrame: CGRectMake (0.0, 0.0, menuViewWidth, tempMenuHeight)]; // Définit son centre sur le centre de l'auto-visualisation. [_viewAccordionMenu setCenter: self.view.center]; // Stocke temporairement le point d'origine y de la vue du menu. CGFloat yPoint = _viewAccordionMenu.frame.origin.y; // Maintenant, définissez le point central.y comme point d'origine y de la vue du menu et sa hauteur à 0.0. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.center.y, _viewAccordionMenu.frame.size.width, 0.0)]; // Ajoute la vue de menu à la vue targetView. [targetView addSubview: _viewAccordionMenu];…
Il est temps d'animer le menu. Il n'y a vraiment rien de spécial à discuter ici. Nous changeons simplement la valeur alpha du auto.view et définir le cadre final dans la vue du menu.
-(void) showAccordionMenuInView: (UIView *) targetView … // ÉTAPE 5: ANIMATE [UIView beginAnimations: @ "" context: nil]; [UIView setAnimationDuration: ANIMATION_DURATION]; [UIView setAnimationCurve: UIViewAnimationCurveLinear]; [auto.view setAlpha: 0,5]; // Définissez la valeur yPoint en tant que point d'origine y de la vue de menu // et la valeur tempMenuHeight en hauteur. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, yPoint, _viewAccordionMenu.frame.size.width, tempMenuHeight)]; [UIView commitAnimations];…
Enfin, rechargez les données de la table pour que les options du menu apparaissent dans la vue de la table. Notez que la méthode se termine ici.
-(void) showAccordionMenuInView: (UIView *) targetView … // ÉTAPE 6: RECHARGER LES DONNÉES TABLEVIEW [_tblAccordionMenu reloadData];…
Écrivons la prochaine méthode concernant la fermeture du menu. Il n'y a rien que je dois vraiment mentionner ici. Je soulignerai seulement qu'il utilise un paramètre booléen qui spécifie si la fermeture doit être animée ou non..
-(void) closeAccordionMenuAnimated: (BOOL) animée if (animée) [UIView beginAnimations: @ "" context: nil]; [UIView setAnimationDuration: ANIMATION_DURATION]; [UIView setAnimationCurve: UIViewAnimationCurveLinear]; [auto.view setAlpha: 0.0]; [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.center.y, _viewAccordionMenu.frame.size.width, 0.0)]; [UIView commitAnimations]; [_viewAccordionMenu performSelector: @selector (removeFromSuperview) withObject: nil afterDelay: ANIMATION_DURATION + 0.5]; [self.view performSelector: @selector (removeFromSuperview) avecObject: nil afterDelay: ANIMATION_DURATION + 0.5]; else [_viewAccordionMenu removeFromSuperview]; [auto.view removeFromSuperview];
Nous avons réussi à rendre notre menu apparaître correctement lorsque vous êtes appelé. Que se passe-t-il quand l'utilisateur fait pivoter l'appareil? Rien! C'est parce que nous n'avons rien écrit à ce sujet, alors faisons-le maintenant. Nous allons mettre en œuvre le viewWillLayoutSubviews méthode, qui est appelée à chaque changement d’orientation. Vous pouvez en savoir plus à ce sujet sur le site Web des développeurs d’Apple..
Voici la version courte de ce que nous allons faire. Tout d'abord, nous allons définir le cadre de la vue de menu, basé sur la menuViewWidth et le menuViewHeight les variables que nous avons définies plus tôt. Nous allons le centrer en fonction de la auto.view Point central. Ensuite, en fonction de l'orientation du périphérique, nous calculerons la hauteur de la vue d'ensemble. Enfin, nous vérifierons si la hauteur de la vue est supérieure à la hauteur de la vue supérieure. Si cela est vrai, nous le réduirons manuellement et activerons le défilement, comme nous le faisions auparavant. -(void) showAccordionMenuInView: (UIView *) targetView méthode. Sinon, nous allons simplement désactiver le défilement.
-(void) viewWillLayoutSubviews // Obtenir l'orientation actuelle. UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation]; // Définit le cadre de la vue du menu et le centre. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.frame.origin.y, menuViewWidth, menuViewHeight)]; [_viewAccordionMenu setCenter: self.view.center]; // Obtenir la hauteur de la superview. En mode paysage, la hauteur est la largeur. CGFloat hauteur; if (orientation == UIInterfaceOrientationLandscapeLeft || orientation == UIInterfaceOrientationLandscapeRight) height = self.view.superview.frame.size.width; else height = self.view.superview.frame.size.height; // Vérifiez si la hauteur de la vue de menu est supérieure à la hauteur de la vue supérieure. if (_viewAccordionMenu.frame.size.height> height) // Si tel est le cas, définissez à nouveau le cadre de la vue du menu en définissant sa hauteur // sur la hauteur superview 50.0. [_viewAccordionMenu setFrame: CGRectMake (_viewAccordionMenu.frame.origin.x, _viewAccordionMenu.frame.origin.y, menuViewWidth, height - 50.0)]; // centre encore. [_viewAccordionMenu setCenter: self.view.center]; // Permet également le défilement. [_tblAccordionMenu setScrollEnabled: YES]; else // Dans ce cas, la hauteur de la vue de menu n'est pas supérieure à la hauteur de la vue supérieure // donc définissez le défilement sur NO. [_tblAccordionMenu setScrollEnabled: NO];
Voici les méthodes minimales requises pour faire fonctionner la vue de table. Notez que dans le -(UITableViewCell *) tableView: cellForRowAtIndexPath: méthode, nous allons vérifier si la ligne en cours est la dernière ou non.
-(int) numberOfSectionsInTableView: (UITableView *) tableView return 1; - (int) tableView: (UITableView *) table numéro numberOfRowsInSection: (NSInteger) section return [_optionsArray count]; - (UITableViewCell *) tableView: (UITableView *) tableView cellForRowAtIndexPath: (NSIndexPath *) indexPath statique NSString * CellIdentifier = @ "Cell"; UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: CellIdentifier]; if (cell == nil) cell = [[UITableViewCell alloc]] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: CellIdentifier]; if ([ligne indexPath] < [_optionsArray count] - 1) [[cell contentView] setBackgroundColor:[UIColor colorWithRed:204.0/255.0 green:204.0/255.0 blue:204.0/255.0 alpha:1.0]]; [[cell textLabel] setTextColor:[UIColor blackColor]]; [[cell textLabel] setShadowColor:[UIColor whiteColor]]; [[cell textLabel] setShadowOffset:CGSizeMake(1.0, 1.0)]; else [[cell contentView] setBackgroundColor:[UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:104.0/255.0 alpha:1.0]]; [[cell textLabel] setTextColor:[UIColor whiteColor]]; [[cell textLabel] setShadowColor:[UIColor blackColor]]; [[cell textLabel] setShadowOffset:CGSizeMake(1.0, 1.0)]; [[cell textLabel] setFont:[UIFont fontWithName:@"Georgia" size:17.0]]; [cell setSelectionStyle:UITableViewCellSelectionStyleGray]; CGRect rect = CGRectMake(0.0, 0.0, self.view.bounds.size.width, [self tableView:tableView heightForRowAtIndexPath:indexPath]); [[cell textLabel] setFrame:rect]; [[cell textLabel] setTextAlignment:NSTextAlignmentCenter]; [[cell textLabel] setText:[_optionsArray objectAtIndex:[indexPath row]]]; return cell; -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath return ROW_HEIGHT;
Nous devons également gérer le tapotement sur les lignes de la table. Notez dans la méthode suivante que nous supprimons la sélection de la ligne tapée.
-(void) tableView: (UITableView *) tableView didSelectRowAtIndexPath: (NSIndexPath *) indexPath [[[tableView cellForRowAtIndexPath: indexPath]] setSelected: NO];
Nous reviendrons bientôt sur cette méthode.
Lorsque l'utilisateur appuie sur une ligne, ou en d'autres termes, sur une option de menu, nous voulons que le contrôleur de vue de l'appelant soit averti du choix sélectionné..
Clique sur le AccordionMenuViewController.h fichier et écrivez le code suivant, juste avant le @interface entête.
@protocol AccordionMenuViewControllerDelegate - (void) userSelectedOptionWithIndex: (NSUInteger) index; @fin
Maintenant, déclarer une propriété de délégué.
Accentsconagua
