Share
UIKit fournit aux développeurs UIActivityIndicatorView, qui n’est rien d’autre qu’un spinner. Cependant, cette simple sous-classe UIView indique à l’utilisateur que quelque chose est en cours de développement - une considération vitale pour UX. Dans ce tutoriel, je vais vous parler de UIActivityIndicatorView et, en prime, je vais vous présenter MBProgressHUD, une classe d'indicateurs d'activité sur les stéroïdes.!
Lorsqu'un utilisateur interagit avec votre application, il est important qu'il sache ce que fait votre application. Si votre application met à jour une base de données volumineuse en arrière-plan et que vous souhaitez empêcher l'utilisateur d'interagir avec votre application tant que ce processus n'est pas terminé, il ne suffit pas simplement d'empêcher l'utilisateur d'interagir avec votre application. Lorsqu'un processus prend plus de quelques millisecondes, il peut être utile d'afficher les commentaires de l'utilisateur. Les gens adorent les commentaires car ils leur disent ce qui se passe. Si vous ne me croyez pas, je vous suggère de passer une heure à lire les commentaires sur l'App Store.
Nous n'avons pas besoin d'une configuration complexe pour ce conseil rapide. Lancez Xcode et créez un nouveau projet à l'aide du modèle "Application à vue unique".
Nommez votre application SpinnerDemo, entrez un identifiant d'entreprise, définissez "iPhone" pour la famille d'appareils et décochez "Utiliser les scénarimages". Vous pouvez laisser le reste intact. Indiquez à Xcode où vous souhaitez enregistrer ce projet et cliquez sur "Enregistrer".
Comme son nom l'indique, UIActivityIndicatorView est une sous-classe UIView. UIActivityIndicatorView est facile à configurer et à utiliser. Faisons-le maintenant. Dans le navigateur de projet de gauche, sélectionnez ViewController.m et recherchez le - viewDidLoad méthode. Remplacer l'implémentation par défaut par celle ci-dessous.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [auto.view addSubview: ai];
Trois lignes de code suffisent pour afficher un UIActivityIndicatorView. Dans la première ligne, nous initialisons l'indicateur d'activité avec un style. Trois styles nous sont disponibles: (1) UIActivityIndicatorViewStyleWhiteLarge, (2) UIActivityIndicatorViewStyleWhite et (3) UIActivityIndicatorViewStyleGray. Les noms des styles parlent d’eux-mêmes, c’est-à-dire que les styles ne diffèrent que par la couleur et la taille. Dans la deuxième ligne, nous plaçons l'indicateur d'activité au centre de la vue de notre contrôleur de vue et dans la dernière ligne, nous ajoutons notre UIActivityIndicatorView en tant que sous-vue à la vue du contrôleur de vue..
Lorsque vous construisez et exécutez votre application, vous serez surpris de constater qu’aucun indicateur d’activité n’est visible. Pourquoi donc? Par défaut, la propriété se cache à l'arrêt est réglé sur OUI. Cela signifie que le UIActivityIndicatorView va se cacher quand il n’anime pas (tourne). Animons notre indicateur d'activité en ajoutant une ligne supplémentaire à notre fichier d'implémentation..
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [ai startAnimating]; [auto.view addSubview: ai];
Générez et exécutez votre application une fois de plus et vous devriez maintenant voir votre indicateur d'activité tourner comme il ne l'a jamais fait auparavant. Prenez un moment pour changer le style de UIActivityIndicatorView pour avoir une idée de ce à quoi ressemblent les différents styles. Dans iOS 5, vous pouvez également modifier la couleur de l’indicateur d’activité en définissant Couleur propriété de l'indicateur d'activité.
L'arrêt de l'indicateur d'activité est simple. Vous appelez simplement - arrêterAnimer sur le UIActivityIndicatorView. Comme je l'ai mentionné auparavant, si se cache à l'arrêt est réglé sur OUI, l'indicateur d'activité se cachera automatiquement. Dans la majorité des cas d'utilisation, il s'agit du comportement que vous souhaitez.
Un indicateur a une valeur quand il indique quelque chose, mais s'il n'indique pas quelque chose, il ne devrait pas être là. -Jony Ive, Objectivé (2009)
Il y a une autre méthode dont j'aimerais parler car elle peut s'avérer utile lorsque vous travaillez avec UIActivityIndicatorView. Appel - estAnimer sur un UIActivityIndicatorView vous dira si l'indicateur d'activité est en cours d'animation.
Avant de poursuivre, je voudrais souligner quelque chose de très important et que beaucoup de nouveaux développeurs iOS rencontrent. Je ne veux pas entrer trop dans les détails et le contexte aujourd'hui, mais l'essentiel est que vous devez toujours vous assurer que vous ne bloquez pas le fil principal de votre application. Vous avez peut-être déjà entendu cela et c'est particulièrement vrai pour UIActivityIndicatorView. La mise à jour de l'interface utilisateur est effectuée sur le thread principal. Cela signifie que, lorsque vous bloquez le thread principal en effectuant une tâche longue sur le thread principal, l'application ne répond plus seulement à l'utilisateur, mais empêche également votre activité. indicateur d'apparaître ou d'animer. Comme je l'ai dit, j'en parlerai un peu plus dans un prochain article..
Regardons maintenant MBProgressHUD. Si vous développez des applications iOS depuis un certain temps, vous verrez certainement les avantages de cette classe Open Source impressionnante. Vous pouvez trouver MBProgressHUD à l'adresse https://github.com/jdg/MBProgressHUD. Félicitations à Matej Bukovinski pour le développement et la maintenance de MBProgressHUD.
Vous remarquerez que MBProgressHUD (HUD signifie affichage tête haute) semble familier et qu’il ressemble beaucoup au progrès qu’HUD utilise dans certaines de ses propres applications. Toutefois, le HUD de progression utilisé par Apple est privé et n'est donc pas disponible pour les développeurs tiers..
Ajouter MPProgressHUD à votre application est simple comme bonjour. Téléchargez le projet depuis GitHub, décompressez l'archive et faites glisser les fichiers MBProgressHUD.h et MBProgressHUD.m vers votre projet Xcode. Assurez-vous de cocher "Copier l'élément dans le dossier du groupe de destination (si nécessaire)" et ajoutez également MBProgressHUD à votre cible, SpinnerDemo..
MBProgressHUD a été conçu pour informer l'utilisateur des tâches fastidieuses exécutées en arrière-plan. Prenez note de ce dernier mot - fond. Comme je l'ai mentionné précédemment, vous ne souhaitez pas bloquer votre thread principal en effectuant une tâche fastidieuse sur le thread principal. Je ne peux insister assez sur ce point.
L'utilisation de MBProgressHUD est presque aussi simple que UIActivityIndicatorView. Tout cela demande un peu plus de travail, mais vous en obtenez beaucoup en retour. Commencez par commenter les quatre lignes de code que nous avons ajoutées pour configurer notre indicateur d'activité. Nous n'aurons plus besoin de ça. Ensuite, nous allons ajouter une nouvelle variable d'instance (ivar) au fichier d'en-tête de notre classe ViewController. N'oubliez pas d'ajouter également la déclaration de classe suivante de MBProgressHUD afin que votre classe ViewController connaisse MBProgressHUD..
#importation@class MBProgressHUD; @interface ViewController: UIViewController MBProgressHUD * HUD; @fin
Revenez à ViewController.m et importez le fichier d'en-tête de MBProgressHUD en ajoutant la ligne suivante juste en dessous de la première instruction d'importation.
#import "MBProgressHUD.h"
Si vous avez suivi les étapes précédentes, le - viewDidLoad La méthode de votre classe ViewController doit maintenant contenir uniquement un appel à la super-classe - viewDidLoad méthode et quatre lignes de code qui ont été commentés. Nous allons maintenant initialiser notre MBProgressHUD en modifiant le - viewDidLoad méthode à celle ci-dessous (le code mis en commentaire n'est pas affiché).
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alloc] initWithView: self.view]; [auto.view addSubview: HUD]; [Spectacle HUD: OUI];
L'initialisation de MBProgressHUD diffère légèrement de celle de UIActivityIndicatorView. Au lieu de passer un style, vous passez une vue comme argument de votre - init méthode. Cette vue est la vue que MBProgressHUD bloquera (l'utilisateur ne pourra pas interagir avec cette vue) lorsque la palette de progression est visible. La deuxième ligne doit être familière et à la troisième ligne, nous demandons au HUD de se montrer car il est masqué par défaut. Prêt? Construisez et exécutez votre application dans le simulateur iOS et examinez le HUD de progression qui apparaît..
À première vue, vous pourriez penser que cela est moins utile que UIActivityIndicatorView. Il est éclaboussé au milieu de l’écran et il semble qu’il n’y ait aucun moyen de positionner le HUD de progression. Cela est dû au fait que MBProgressHUD a un objectif différent, comme je l’ai indiqué précédemment. Il est censé montrer à l'utilisateur qu'une tâche est en cours et l'empêcher d'interagir avec la vue à laquelle la palette de progression est ajoutée..
MBProgressHUD a beaucoup plus de fonctionnalités que simplement se montrer et se cacher. Vous pouvez, par exemple, affecter un délégué qui est averti lorsque le HUD de progression s'est masqué. De plus, vous pouvez personnaliser le HUD de progression dans une large mesure avec un inidicateur de progression, une ou deux étiquettes indiquant à l'utilisateur ce que fait votre application, et il peut également être utilisé pour afficher un message. Sérieusement, MBProgressHUD est très utile et je vous suggère de jeter un œil à l'application de démonstration fournie avec le projet que vous avez téléchargé pour avoir une idée de ce qu'elle peut faire pour vous..
Pour terminer ce didacticiel, je voudrais vous montrer un exemple d'utilisation de MBProgressHUD dans un scénario plus avancé. Nous allons effectuer une tâche qui prend beaucoup de temps en arrière-plan pendant que notre indicateur de progression indique l'état d'avancement de cette tâche. Pour être honnête, nous n'allons pas vraiment accomplir une tâche en arrière-plan. Nous allons imiter cela avec une solution intelligente qui est également utilisée par l'application de démonstration fournie avec MBProgressHUD. Editez le code d'installation de votre MBProgressHUD pour qu'il ressemble à celui ci-dessous.
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alloc] initWithView: self.view]; HUD.labelText = @ "Faire des trucs géniaux ..."; HUD.detailsLabelText = @ "Détendez-vous simplement"; HUD.mode = MBProgressHUDModeAnnularDeterminate; [auto.view addSubview: HUD]; [HUD showWhileExecuting: @selector (doSomeFunkyStuff) onTarget: self withObject: nil animated: YES];
Dans les deuxième et troisième lignes, nous définissons le texte des étiquettes primaire et secondaire de la palette de progression pour donner à l'utilisateur des informations sur ce qui se passe. La quatrième ligne définit le mode de notre HUD. MBProgressHUD est livré avec un certain nombre de modes différents et le mode que nous avons choisi, MBProgressHUDModeAnnularDeterminate, affichera un indicateur de progression circulaire indiquant la progression de notre tâche en arrière-plan. Avec la dernière ligne, nous ne montrons pas simplement le HUD, nous montrons le HUD et lui indiquons que nous effectuons une tâche et que celle-ci doit s'afficher tant que la tâche est en cours d'exécution. Je ne vous ai pas dit que MBProgressHUD est facile à utiliser. Voyons maintenant - doSomeFunkyStuff.
- (void) doSomeFunkyStuff float progress = 0.0; tant que (progrès < 1.0) progress += 0.01; HUD.progress = progress; usleep(50000);
Nous déclarons un char nommé le progrès et réglez-le sur 0.0. En utilisant une boucle while, nous incrémentons le progrès et définissez la propriété progess de MBProgressHUD sur cette valeur. Cela se traduira par l'indicateur de progression de notre HUD pour avancer. La dernière ligne de la boucle while est une astuce astucieuse pour s’assurer que cette méthode prend plus de quelques millisecondes. Utiliser la fonction tu dors, l'exécution du thread principal est suspendue pour le montant passé en argument (en microsecondes). Enfin, la boucle while dure aussi longtemps que progrès est inférieur à 1,0. Le HUD disparaîtra automatiquement à la fin de notre méthode. Générez et exécutez votre application pour voir tout cela en action.
Comme vous pouvez le constater, UIActivityIndicatorView et MBProgressHUD ont leurs cas d'utilisation et sont tous deux extrêmement utiles si vous souhaitez créer une application conviviale. N'oubliez pas de jeter un coup d'œil à l'application de démonstration de MBProgressHUD pour voir ce qu'elle peut faire pour vous..
Accentsconagua