Au risque d'être frappé par le poing de Matt Gemmell, Je vais vous montrer comment lancer un Tweetie 2De style "attendez une seconde" alerte. Tweetie utilise ce quand il est téléchargeant une image pour aller dans un tweet étant composé, ou quand il fait des choses d'autres où il doit vous empêcher d'utiliser les contrôles pour un moment.
Maintenant, vous devriez être très prudent sur l'utilisation de quelque chose comme cela. Vous ne voulez vraiment pas d'ennuyer vos utilisateurs, de sorte que vous ne devriez faire cela quand c'est absolument nécessaire et seulement la montrer pour de courtes périodes de temps.
La même technique de base utilisée ici peut être utilisé chaque fois que vous voulez imiter l'apparence des alertes du système et des dialogues. Si j'ai le temps, par exemple, je voudrais revenir en arrière et changer l'application de Tic-Tac-Toe partir Plus l'iPhone 3 de développement de sorte que le sélecteur de jeu en ligne a une apparence semblable à la pipette pairs GameKit, qui peut être fait avec une variante de cette technique.
Dans l'exemple simple, nous allons construire aujourd'hui, il n'y aura pas d'interactivité avec l'alerte (comme les boutons, vous pouvez appuyer sur), mais il n'y a aucune raison pour que la vue que vous n'aurait pas pu montrer que les contrôles de l'utilisateur peut interagir avec. Nous allons travailler avec une instance de UIView, donc vous montrer quoi que ce soit de cette façon que l'on peut mettre dans un UIView. Ce qui est fondamentalement tout.
Si vous voulez suivre à la maison, créer un projet Xcode de la Vue-application basée sur modèle de projet et a appelé le projet CustomAlert.
Pour démarrer les choses, nous avons besoin d'une image de fond. Alertes d'Apple ont généralement l'apparence brillante caustique, mais pour cet exercice, je vais imiter Tweetie est translucide rectangle noir arrondi. J'ai démarré Acorn et créé un pixel 180 par 180 pixels image transparente. J'ai ajouté un rectangle noir arrondi avec une opacité de 60% et enregistré comme un fichier. Png et l'ajouter à la Resources groupe dans le Groupes & Fichiers volet. Si vous voulez voler les mines, vous pouvez l'attraper partir d'ici. Vous pouvez, bien sûr, régler l'apparence de cette image de fond pour mieux correspondre à l'apparence de votre propre application.
Une fois l'image dans le Resources le dossier de notre projet, nous pouvons l'utiliser dans le code ou dans Interface Builder. Nous pourrions le faire en code, mais je déteste l'écriture de code inutile, nous allons donc créer la vue de la pseudo-alerte dans Interface Builder.
Avant de partir d'Interface Builder, nous devons déclarer nos points de vente CustomAlertViewContoller.h sorte que BI peut les voir. Alors que nous sommes là, nous allons également déclarer une méthode d'action qui sera appelée quand un bouton est pressé. Voilà comment l'utilisateur va afficher l'alerte dans ce cas particulier. Nous allons également ajouter une méthode de mise à jour le message indiqué sur le point de vue, et une autre de rejeter le point de vue. Voici ce que CustomAlertViewController.h devrait ressembler à:
Assez facile, non? Assurez-vous de l'enregistrer avant de continuer, ou IB ne sera pas capable de voir les actions et les points de vente.
Double-click CustomAlertViewController.xib pour lancer Interface Builder. Tout d'abord, prenez une instance de UIView partir de la palette Bibliothèque d'Interface Builder (L) et le faire glisser vers la fenêtre principale du NIB. Ne NOT l'ajouter à la vue existante. Au lieu de cela, assurez-vous de l'ajouter comme un objet racine dans la plume. Nous ne voulons pas qu'elle soit partie de la hiérarchie d'affichage jusqu'à ce que nous sommes prêts pour cela, afin de le mettre ici, fera l'objet d'exister, mais ne sont pas visibles pour l'utilisateur. À ce stade, la fenêtre principale du nib devrait ressembler à ceci:
Si vous voulez renommer la nouvelle vue de le différencier de l'affichage existant, n'hésitez pas à le faire par un simple clic de la nouvelle View icône, en attente d'une demi-seconde ou deux, puis en cliquant une fois dessus à nouveau, à droite sur le mot View. Simple-cliquez sur la nouvelle View icône et appuyez sur 3 pour faire apparaître l'inspecteur de taille, et définir la largeur et la hauteur de ce point de vue à 180 par 180 pixels (ou l'image en taille que vous utilisé si vous avez utilisé une image de fond différente):
Si elle ne vous laissera pas changer la taille de la vue, aller à l'inspecteur d'attributs (1) et s'assurer que les éléments d'interface simulé menus contextuels sont tous mis à lire None. Si vous définissez une autre valeur pour aucun de ces, il sera de définir la taille de votre vue pour vous et vous empêcher de les modifier en utilisant l'inspecteur de taille. Aussi, assurez-vous que le Opaque case n'est pas cochée, sinon il va ruiner l'effet.
Maintenant, vous pouvez double-cliquer sur la nouvelle vue de l'ouvrir pour l'édition. Tout d'abord, faites glisser un UIImageView de la Bibliothèque. Comme c'est le premier élément que vous ajoutez, elle devrait redimensionner automatiquement à la taille de la vue, qui est ce que vous voulez. Utilisez l'inspecteur attribut pour sélectionner l'image que vous avez ajouté précédemment à votre projet Xcode (alert.png) Et assurez-vous que la vue d'images n'est pas non plus opaque.
Ensuite, ajoutez une UIActivityIndicatorView de la Bibliothèque, centré dans la fenêtre. Utilisez l'inspecteur d'attributs pour modifier le style de Large White.
Faites glisser un UILabel de la bibliothèque et le placer sous l'indicateur de l'activité, centrée. Utilisez l'inspecteur d'attributs pour s'assurer que le texte est centré aussi. Double-cliquez sur l'étiquette à modifier son texte à lire Faire quelque chose, Ou tout autre message que vous avez envie de taper po
Vous aurez envie de changer la taille de la police et la couleur. La couleur peut être changée en utilisant l'inspecteur d'attributs, la taille en utilisant la palette de texte (T). J'ai utilisé blanche Helvetica Bold à 17 points. Lorsque vous avez terminé, il devrait ressembler à ceci:
Notre point de vue est maintenant construit, mais nous avons au fil des points de vente et les actions avant de revenir à Xcode. Dans la vue principale fenêtre, faites glisser le contrôle-partir Fichier de propriétaire de l'icône appelé View qui vient d'être ajouté. Assurez-vous que vous ne sélectionnez pas le point de vue qui existaient avant (ce qui explique pourquoi renommer la nouvelle était une bonne idée). Lorsque vous êtes invité à une prise, sélectionnez le alertView outlet.
Double-cliquez sur la nouvelle View icône si la vue que nous venons de construire n'est pas affiché, alors le contrôle-glisser depuis Fichier de propriétaire à la seule étiquette sur le point de vue, de le connecter à la prise appelée label.
Maintenant, nous devons ajouter un bouton à l'autre View icône, sorte double-cliquez sur l'existant View icône pour ouvrir que l'on place. Il doit juste être une vue vide gris, comme ceci:
Faites glisser un Round Rect Bouton de la bibliothèque à cette vue. Placez-le dans le centre de la vue et double-cliquez sur le bouton pour changer son titre à quelque chose qui font sens. Je l'ai appelé Ne Thing longue, Mais devenir fou si vous voulez.
Maintenant, le contrôle-glisser à partir de ce bouton que vous venez d'ajouter à l'arrière Fichier de propriétaire et sélectionnez le doLongSomething: action.
Enregistrer la plume et le retourner à Xcode. Vous pouvez quitter Interface Builder si vous voulez, nous en avons fini avec elle.
Voici la mise en œuvre de CustomAlertViewController. Vous pouvez remplacer le code du modèle avec cette version:
Assez simple, hein? Regardons les trois méthodes personnalisées, nous avons écrit pour nous assurer de comprendre ce qui se passe.
Tout ce que nous avons à faire afin que l'utilisateur peut voir notre point de vue est d'ajouter à la hiérarchie alertView vue. Nous l'ajouter comme une sous-classe de la vue principale du contrôleur. Nous avons également mis en couleur de fond la vue d'alerte à clearColor sorte que les parties transparentes ne s'affichent pas tant que blanc. Dans cet exemple, j'ai également par programmation centrée la vue dans la fenêtre. Cette ligne de code n'est pas nécessaire si vous le point de vue centré dans IB, mais je tiens à le faire par programmation juste pour s'assurer qu'il est centré sur l'écran.
Après cela, nous avons seulement une série d'appels à des intervalles de retard différents (en utilisant performSelector withObject: afterDelay: pour UPDATETEXT:. Pour modifier le texte affiché, puis un dernier appel à la retardées finalUpdate de rejeter la fausse alerte Essentiellement, le texte va changer à quelques reprises au cours de cinq secondes, puis l'alerte va disparaître.
Le UPDATETEXT: méthode est simple comme on peut, il définit simplement le texte en utilisant la sortie du label.
Pour se débarrasser de la vue fausse, nous ne faisons que supprimer l'affichage de la hiérarchie d'affichage en utilisant removeFromSuperview:
Allez-y et essayez. Il fonctionne réellement, mais c'est le genre de manque quelque chose, n'est-ce pas? Il apparaît juste sorti de nulle part, puis disparaît dans le clin d'œil. Ce n'est pas vraiment la manière des alertes de travail sur l'iPhone, est-il? Non, ils rebondissent dans l'existence afin que nous les remarquons, puis disparaître. Ajoutons quelques animations pour le faire paraître droit, allons-nous?
Lorsque les vues d'alerte soient montrés, ils rebondir dans l'existence. Quand ils sont licenciés, ils s'estompent. Ces deux éléments sont relativement faciles à mettre en œuvre en utilisant Core Animation.
Pour utiliser Core Animation, nous avons effectivement d'ajouter le cadre QuartzCore à notre projet. La meilleure façon de faire est de cliquer à droite sur la Frameworks groupe dans le Groupes & Fichiers et de sélectionner Ajouter-> Cadres existants .... De la boîte de dialogue qui apparaît, sélectionnez QuartzCore.framework.
Vous aurez aussi besoin d'ajouter une instruction import pour le haut de la classe contrôleur de sorte que le compilateur sait sur les appels Core Animation:
Pour ce faire l'animation de rebond, ajoutez la ligne suivante bold code pour doLongSomething:.
Ce code crée essentiellement une animation qui change l'échelle de la vue au fil du temps. Le premier tableau indique l'animation quelle valeur échelle pour avoir à chaque image-clé, et le second tableau identifie quand (combien de secondes dans l'animation) de chacun des chutes d'images clés. Si le code n'a pas de sens, il ya deux bons livres sur Core Animation, un par Marcus Zarra et Matt Long, l'autre par Bill Dudney (aujourd'hui l'évangéliste cadres chez Apple). Les deux sont de bons livres et l'autre livre ne devrait vous aider à comprendre les principes de base utilisés dans Core Animation.
Pour l'animation à s'estomper, nous devons créer une autre animation, et nous avons aussi à changer lorsque nous enlevons alertView partir de la hiérarchie d'affichage. Nous ne pouvons pas retirer alertView que l'animation est terminée, ou que l'utilisateur ne verra pas l'animation. Nous pouvons être averti quand une animation est terminée, en devenant le délégué de la CAKeyframeAnimation et mettre en œuvre la méthode appropriée.
Commençons par remplacer la méthode actuelle finalUpdate avec cette nouvelle version qui se fane tout simplement hors de l'alerte.
Notez que nous avons précisé l'auto en tant que délégué. Nous faisons cela parce que nous voulons être notifié lorsque l'animation est terminée afin que nous puissions retirer alertView partir de la hiérarchie d'affichage.
Maintenant, nous devons mettre en œuvre la méthode déléguée animationDidStop: fini: pour faire cela. Ajoutez la méthode suivante à la fin de CustomAlertViewController.m, Juste au-dessus de la déclaration @ end:
Maintenant, vous devriez être capable de l'exécuter et quand vous appuyez sur le bouton, votre coutume «alerte» devrait apparaître dans, puis fondu dans une manière très similaire aux alertes d'Apple. Si vous n'avez pas envie suivantes long à la maison, vous pouvez télécharger mon projet Xcode ici.
Maintenant, vous devriez être très prudent sur l'utilisation de quelque chose comme cela. Vous ne voulez vraiment pas d'ennuyer vos utilisateurs, de sorte que vous ne devriez faire cela quand c'est absolument nécessaire et seulement la montrer pour de courtes périodes de temps.
La même technique de base utilisée ici peut être utilisé chaque fois que vous voulez imiter l'apparence des alertes du système et des dialogues. Si j'ai le temps, par exemple, je voudrais revenir en arrière et changer l'application de Tic-Tac-Toe partir Plus l'iPhone 3 de développement de sorte que le sélecteur de jeu en ligne a une apparence semblable à la pipette pairs GameKit, qui peut être fait avec une variante de cette technique.
Dans l'exemple simple, nous allons construire aujourd'hui, il n'y aura pas d'interactivité avec l'alerte (comme les boutons, vous pouvez appuyer sur), mais il n'y a aucune raison pour que la vue que vous n'aurait pas pu montrer que les contrôles de l'utilisateur peut interagir avec. Nous allons travailler avec une instance de UIView, donc vous montrer quoi que ce soit de cette façon que l'on peut mettre dans un UIView. Ce qui est fondamentalement tout.
Créer le projet Xcode
Si vous voulez suivre à la maison, créer un projet Xcode de la Vue-application basée sur modèle de projet et a appelé le projet CustomAlert.
L'image de fond
Pour démarrer les choses, nous avons besoin d'une image de fond. Alertes d'Apple ont généralement l'apparence brillante caustique, mais pour cet exercice, je vais imiter Tweetie est translucide rectangle noir arrondi. J'ai démarré Acorn et créé un pixel 180 par 180 pixels image transparente. J'ai ajouté un rectangle noir arrondi avec une opacité de 60% et enregistré comme un fichier. Png et l'ajouter à la Resources groupe dans le Groupes & Fichiers volet. Si vous voulez voler les mines, vous pouvez l'attraper partir d'ici. Vous pouvez, bien sûr, régler l'apparence de cette image de fond pour mieux correspondre à l'apparence de votre propre application.
Une fois l'image dans le Resources le dossier de notre projet, nous pouvons l'utiliser dans le code ou dans Interface Builder. Nous pourrions le faire en code, mais je déteste l'écriture de code inutile, nous allons donc créer la vue de la pseudo-alerte dans Interface Builder.
Outlets et Actions Déclarant
Avant de partir d'Interface Builder, nous devons déclarer nos points de vente CustomAlertViewContoller.h sorte que BI peut les voir. Alors que nous sommes là, nous allons également déclarer une méthode d'action qui sera appelée quand un bouton est pressé. Voilà comment l'utilisateur va afficher l'alerte dans ce cas particulier. Nous allons également ajouter une méthode de mise à jour le message indiqué sur le point de vue, et une autre de rejeter le point de vue. Voici ce que CustomAlertViewController.h devrait ressembler à:
#import <UIKit/UIKit.h>
@interface CustomAlertViewController : UIViewController {
UIView *alertView;
UILabel *label;
}
@property (nonatomic, retain) IBOutlet UIView *alertView;
@property (nonatomic, retain) IBOutlet UILabel *label;
- (IBAction)doLongSomething;
- (void)updateText:(NSString *)newText;
- (void)finalUpdate;
@end
Assez facile, non? Assurez-vous de l'enregistrer avant de continuer, ou IB ne sera pas capable de voir les actions et les points de vente.
Bâtiment de la vue dans la BI
Double-click CustomAlertViewController.xib pour lancer Interface Builder. Tout d'abord, prenez une instance de UIView partir de la palette Bibliothèque d'Interface Builder (L) et le faire glisser vers la fenêtre principale du NIB. Ne NOT l'ajouter à la vue existante. Au lieu de cela, assurez-vous de l'ajouter comme un objet racine dans la plume. Nous ne voulons pas qu'elle soit partie de la hiérarchie d'affichage jusqu'à ce que nous sommes prêts pour cela, afin de le mettre ici, fera l'objet d'exister, mais ne sont pas visibles pour l'utilisateur. À ce stade, la fenêtre principale du nib devrait ressembler à ceci:
Si vous voulez renommer la nouvelle vue de le différencier de l'affichage existant, n'hésitez pas à le faire par un simple clic de la nouvelle View icône, en attente d'une demi-seconde ou deux, puis en cliquant une fois dessus à nouveau, à droite sur le mot View. Simple-cliquez sur la nouvelle View icône et appuyez sur 3 pour faire apparaître l'inspecteur de taille, et définir la largeur et la hauteur de ce point de vue à 180 par 180 pixels (ou l'image en taille que vous utilisé si vous avez utilisé une image de fond différente):
Si elle ne vous laissera pas changer la taille de la vue, aller à l'inspecteur d'attributs (1) et s'assurer que les éléments d'interface simulé menus contextuels sont tous mis à lire None. Si vous définissez une autre valeur pour aucun de ces, il sera de définir la taille de votre vue pour vous et vous empêcher de les modifier en utilisant l'inspecteur de taille. Aussi, assurez-vous que le Opaque case n'est pas cochée, sinon il va ruiner l'effet.
Maintenant, vous pouvez double-cliquer sur la nouvelle vue de l'ouvrir pour l'édition. Tout d'abord, faites glisser un UIImageView de la Bibliothèque. Comme c'est le premier élément que vous ajoutez, elle devrait redimensionner automatiquement à la taille de la vue, qui est ce que vous voulez. Utilisez l'inspecteur attribut pour sélectionner l'image que vous avez ajouté précédemment à votre projet Xcode (alert.png) Et assurez-vous que la vue d'images n'est pas non plus opaque.
Ensuite, ajoutez une UIActivityIndicatorView de la Bibliothèque, centré dans la fenêtre. Utilisez l'inspecteur d'attributs pour modifier le style de Large White.
Faites glisser un UILabel de la bibliothèque et le placer sous l'indicateur de l'activité, centrée. Utilisez l'inspecteur d'attributs pour s'assurer que le texte est centré aussi. Double-cliquez sur l'étiquette à modifier son texte à lire Faire quelque chose, Ou tout autre message que vous avez envie de taper po
Vous aurez envie de changer la taille de la police et la couleur. La couleur peut être changée en utilisant l'inspecteur d'attributs, la taille en utilisant la palette de texte (T). J'ai utilisé blanche Helvetica Bold à 17 points. Lorsque vous avez terminé, il devrait ressembler à ceci:
Faire les connexions
Notre point de vue est maintenant construit, mais nous avons au fil des points de vente et les actions avant de revenir à Xcode. Dans la vue principale fenêtre, faites glisser le contrôle-partir Fichier de propriétaire de l'icône appelé View qui vient d'être ajouté. Assurez-vous que vous ne sélectionnez pas le point de vue qui existaient avant (ce qui explique pourquoi renommer la nouvelle était une bonne idée). Lorsque vous êtes invité à une prise, sélectionnez le alertView outlet.
Double-cliquez sur la nouvelle View icône si la vue que nous venons de construire n'est pas affiché, alors le contrôle-glisser depuis Fichier de propriétaire à la seule étiquette sur le point de vue, de le connecter à la prise appelée label.
Maintenant, nous devons ajouter un bouton à l'autre View icône, sorte double-cliquez sur l'existant View icône pour ouvrir que l'on place. Il doit juste être une vue vide gris, comme ceci:
Faites glisser un Round Rect Bouton de la bibliothèque à cette vue. Placez-le dans le centre de la vue et double-cliquez sur le bouton pour changer son titre à quelque chose qui font sens. Je l'ai appelé Ne Thing longue, Mais devenir fou si vous voulez.
Maintenant, le contrôle-glisser à partir de ce bouton que vous venez d'ajouter à l'arrière Fichier de propriétaire et sélectionnez le doLongSomething: action.
Enregistrer la plume et le retourner à Xcode. Vous pouvez quitter Interface Builder si vous voulez, nous en avons fini avec elle.
La mise en œuvre de l'alerte
Voici la mise en œuvre de CustomAlertViewController. Vous pouvez remplacer le code du modèle avec cette version:
#import "CustomAlertViewController.h"
@implementation CustomAlertViewController
@synthesize alertView, label;
- (IBAction)doLongSomething
{
[self.view addSubview:alertView];
alertView.backgroundColor = [UIColor clearColor];
alertView.center = self.view.superview.center;
[self performSelector:@selector(updateText:) withObject:@"Getting there..." afterDelay:1.0];
[self performSelector:@selector(updateText:) withObject:@"Really..." afterDelay:2.0];
[self performSelector:@selector(updateText:) withObject:@"Just about there..." afterDelay:3.0];
[self performSelector:@selector(updateText:) withObject:@"Done" afterDelay:4.5];
[self performSelector:@selector(finalUpdate) withObject:nil afterDelay:5.0];
}
- (void)updateText:(NSString *)newText
{
self.label.text = newText;
}
- (void)finalUpdate
{
[self.alertView removeFromSuperview];
}
#pragma mark -
- (void)viewDidUnload {
self.alertView = nil;
self.label = nil;
}
- (void)dealloc {
[alertView release], alertView = nil;
[label release], label = nil;
[super dealloc];
}
@end
Assez simple, hein? Regardons les trois méthodes personnalisées, nous avons écrit pour nous assurer de comprendre ce qui se passe.
Affichage de l'alerte
Tout ce que nous avons à faire afin que l'utilisateur peut voir notre point de vue est d'ajouter à la hiérarchie alertView vue. Nous l'ajouter comme une sous-classe de la vue principale du contrôleur. Nous avons également mis en couleur de fond la vue d'alerte à clearColor sorte que les parties transparentes ne s'affichent pas tant que blanc. Dans cet exemple, j'ai également par programmation centrée la vue dans la fenêtre. Cette ligne de code n'est pas nécessaire si vous le point de vue centré dans IB, mais je tiens à le faire par programmation juste pour s'assurer qu'il est centré sur l'écran.
Après cela, nous avons seulement une série d'appels à des intervalles de retard différents (en utilisant performSelector withObject: afterDelay: pour UPDATETEXT:. Pour modifier le texte affiché, puis un dernier appel à la retardées finalUpdate de rejeter la fausse alerte Essentiellement, le texte va changer à quelques reprises au cours de cinq secondes, puis l'alerte va disparaître.
- (IBAction)doLongSomething
{
[self.view addSubview:alertView];
alertView.backgroundColor = [UIColor clearColor];
alertView.center = self.view.superview.center;
[self performSelector:@selector(updateText:) withObject:@"Getting there..." afterDelay:1.0];
[self performSelector:@selector(updateText:) withObject:@"Really..." afterDelay:2.0];
[self performSelector:@selector(updateText:) withObject:@"Just about there..." afterDelay:3.0];
[self performSelector:@selector(updateText:) withObject:@"Done" afterDelay:4.5];
[self performSelector:@selector(finalUpdate) withObject:nil afterDelay:5.0];
}Le UPDATETEXT: méthode est simple comme on peut, il définit simplement le texte en utilisant la sortie du label.
- (void)updateText:(NSString *)newText
{
self.label.text = newText;
}Pour se débarrasser de la vue fausse, nous ne faisons que supprimer l'affichage de la hiérarchie d'affichage en utilisant removeFromSuperview:
- (void)finalUpdate
{
[self.alertView removeFromSuperview];
}Allez-y et essayez. Il fonctionne réellement, mais c'est le genre de manque quelque chose, n'est-ce pas? Il apparaît juste sorti de nulle part, puis disparaît dans le clin d'œil. Ce n'est pas vraiment la manière des alertes de travail sur l'iPhone, est-il? Non, ils rebondissent dans l'existence afin que nous les remarquons, puis disparaître. Ajoutons quelques animations pour le faire paraître droit, allons-nous?
Ajout d'animation
Lorsque les vues d'alerte soient montrés, ils rebondir dans l'existence. Quand ils sont licenciés, ils s'estompent. Ces deux éléments sont relativement faciles à mettre en œuvre en utilisant Core Animation.
Pour utiliser Core Animation, nous avons effectivement d'ajouter le cadre QuartzCore à notre projet. La meilleure façon de faire est de cliquer à droite sur la Frameworks groupe dans le Groupes & Fichiers et de sélectionner Ajouter-> Cadres existants .... De la boîte de dialogue qui apparaît, sélectionnez QuartzCore.framework.
Vous aurez aussi besoin d'ajouter une instruction import pour le haut de la classe contrôleur de sorte que le compilateur sait sur les appels Core Animation:
#import <QuartzCore/QuartzCore.h>Pour le rebond de, nous allons avoir besoin d'utiliser un objet CAKeyframeAnimation parce que la vue a besoin d'obtenir plus, alors plus petit, puis plus encore. Je ne sais pas si mes horaires et les changements d'échelle ici 100% imitent le calendrier d'Apple à partir UIAlertView, mais c'est assez proche, même si je suis heureux d'avoir d'autres personnes peaufiner les timings.Pour ce faire l'animation de rebond, ajoutez la ligne suivante bold code pour doLongSomething:.
- (IBAction)doLongSomething
{
[self.view addSubview:alertView];
alertView.backgroundColor = [UIColor clearColor];
alertView.center = self.view.superview.center;
CALayer *viewLayer = self.alertView.layer;
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 0.35555555;
animation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.6],
[NSNumber numberWithFloat:1.1],
[NSNumber numberWithFloat:.9],
[NSNumber numberWithFloat:1],
nil];
animation.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.2],
[NSNumber numberWithFloat:0.266666667],
[NSNumber numberWithFloat:0.35555555],
nil];
[viewLayer addAnimation:animation forKey:@"transform.scale"];
[self performSelector:@selector(updateText:) withObject:@"Getting there..." afterDelay:1.0];
[self performSelector:@selector(updateText:) withObject:@"Really..." afterDelay:2.0];
[self performSelector:@selector(updateText:) withObject:@"Just about there..." afterDelay:3.0];
[self performSelector:@selector(updateText:) withObject:@"Done" afterDelay:4.5];
[self performSelector:@selector(finalUpdate) withObject:nil afterDelay:5.0];
}Ce code crée essentiellement une animation qui change l'échelle de la vue au fil du temps. Le premier tableau indique l'animation quelle valeur échelle pour avoir à chaque image-clé, et le second tableau identifie quand (combien de secondes dans l'animation) de chacun des chutes d'images clés. Si le code n'a pas de sens, il ya deux bons livres sur Core Animation, un par Marcus Zarra et Matt Long, l'autre par Bill Dudney (aujourd'hui l'évangéliste cadres chez Apple). Les deux sont de bons livres et l'autre livre ne devrait vous aider à comprendre les principes de base utilisés dans Core Animation.
Pour l'animation à s'estomper, nous devons créer une autre animation, et nous avons aussi à changer lorsque nous enlevons alertView partir de la hiérarchie d'affichage. Nous ne pouvons pas retirer alertView que l'animation est terminée, ou que l'utilisateur ne verra pas l'animation. Nous pouvons être averti quand une animation est terminée, en devenant le délégué de la CAKeyframeAnimation et mettre en œuvre la méthode appropriée.
Commençons par remplacer la méthode actuelle finalUpdate avec cette nouvelle version qui se fane tout simplement hors de l'alerte.
- (void)finalUpdate
{
CALayer *viewLayer = self.alertView.layer;
CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
animation.duration = 0.35;
animation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:1.0],
[NSNumber numberWithFloat:0.0],
nil];
animation.keyTimes = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0],
[NSNumber numberWithFloat:0.35],
nil];
animation.delegate = self;
[viewLayer addAnimation:animation forKey:@"alpha"];
}Notez que nous avons précisé l'auto en tant que délégué. Nous faisons cela parce que nous voulons être notifié lorsque l'animation est terminée afin que nous puissions retirer alertView partir de la hiérarchie d'affichage.
Maintenant, nous devons mettre en œuvre la méthode déléguée animationDidStop: fini: pour faire cela. Ajoutez la méthode suivante à la fin de CustomAlertViewController.m, Juste au-dessus de la déclaration @ end:
#pragma mark -
#pragma mark CAAnimation Delegate Methods
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
[self.alertView removeFromSuperview];
}Maintenant, vous devriez être capable de l'exécuter et quand vous appuyez sur le bouton, votre coutume «alerte» devrait apparaître dans, puis fondu dans une manière très similaire aux alertes d'Apple. Si vous n'avez pas envie suivantes long à la maison, vous pouvez télécharger mon projet Xcode ici.
Note: Si vous avez téléchargé le code avant 02h39 HNE et obtiennent une erreur, re-télécharger le projet. J'ai d'abord téléchargé la bonne version du code.
Aucun commentaire:
Enregistrer un commentaire