Créer un carrousel génial, version 2.0

Engagez vos utilisateurs avec des carrousels superbes! Nous verrons à quel point il est facile et simple d'implémenter des carrousels interactifs et défilables dans vos applications iOS. Grâce à sa grande configurabilité, vous pouvez disposer de matrices de défilement 3D, planes, rotatives et sans fin pour les données, les images et les boutons..

Note de l'éditeur: Ce tutoriel a été publié à l'origine sur Mobiletuts + en janvier. Cette version a été considérablement mise à jour en réponse aux modifications apportées à la bibliothèque iCarousel..

Le 9 janvier 2007, Steve Jobs a dévoilé l'iPhone à un public enthousiaste. Dans son exposé, il a présenté de nombreuses fonctionnalités qui créeraient une toute nouvelle façon d'interagir avec la technologie et l'information. L'une de ces nombreuses fonctionnalités a été présentée par un message simple et puissant: «Touchez votre musique». Alors qu'il se tenait debout, avec Bob Dylan jouant sur les haut-parleurs, Steve Jobs a «feuilleté» ses albums de musique sans effort. Ce message était clair.

Près de cinq ans plus tard, le même message est vrai. Il existe une magie dans la façon dont nous pouvons parcourir notre musique aujourd'hui et, en tant que développeurs, nous pouvons offrir la même expérience à nos utilisateurs pour toutes sortes de données, pas seulement des chansons et des albums..

Pour ceux qui sont déjà familiarisés avec le développement pour iOS, il peut être intimidant de considérer le nombre de facteurs impliqués pour mettre en œuvre quelque chose d'aussi simple que Cover Flow: animation et défilement régulier, optimisation du traitement des images, interception d'interactions tactiles, etc..

Heureusement cependant, Nick Lockwood de Charcoal Design a créé une classe appelée «iCarousel» qui gère tout le travail lourd pour nous, et il l'a publiée en tant que projet open source. Cela signifie que nous pouvons passer rapidement et efficacement au reste de notre développement, tout en bénéficiant de Cover Flow hautement interactif et convivial..

L'une des grandes caractéristiques d'iCarousel est la sélection de types d'affichage prêts à l'emploi:

iCarouselTypeLinear
iCarouselTypeRotary
iCarouselTypeInvertedRotary
iCarouselTypeCylinder
iCarouselTypeInvertedCylinder
iCarouselTypeCoverFlow
iCarouselTypeCoverflow2
et plus…

Il est également possible de personnaliser ces styles en fonction de vos besoins, mais il peut s'agir d'un tutoriel séparé ou d'un conseil rapide en soi (indiquez-le dans les commentaires si vous êtes intéressé!).

Étape 1: Obtenir iCarousel et configurer

iCarousel est hébergé sur github, ce qui signifie que vous pouvez l'obtenir sous forme de clone git ou de téléchargement .zip. Vous pouvez le trouver à https://github.com/nicklockwood/iCarousel, alors allez-y et procurez-vous une copie locale d'iCarousel.

Ce projet implique également l'utilisation de quelques images. Vous voudrez donc télécharger les «Fichiers source» en haut de cette page, si ce n'est déjà fait. Dans ce fichier .zip, il existe un répertoire appelé "Animals" contenant sept images d'animaux différentes (ces images proviennent de Joy Tek sur Flickr - http://www.flickr.com/photos/joytek/collections/72157627168953450/) - et ont été redimensionnés pour ce tutoriel).

Maintenant, avec tous les fichiers requis téléchargés, nous sommes prêts à créer un carrousel génial!

Nous allons commencer par ajouter les fichiers de classe iCarousel, puis les fichiers image et, enfin, nous nous assurerons de limiter l'application au mode paysage sans barre d'état visible (iCarousel fonctionnera en mode portrait, mais nous le conserverons. simplement en travaillant avec le paysage pour le moment). Mais avant tout, commençons un nouveau projet!

Nous avons juste besoin d'une seule fenêtre pour ce projet, donc une «application à vue unique» conviendra parfaitement pour l'instant. J'appellerai mon projet «Carousel» et j'utiliserai le décompte automatique de références (ARC). Il est donc important de ne pas oublier cette option lors de la création du projet..

Une fois notre projet créé, nous pouvons ajouter les fichiers de classe iCarousel en saisissant le répertoire «iCarousel» et en le faisant glisser dans le projet (le répertoire iCarousel ne contient que deux fichiers: «iCarousel.h» et «iCarousel.m»). Remarque: Si vous faites glisser tout le répertoire dans votre projet, assurez-vous que vous «créez des groupes pour les dossiers ajoutés»..

iCarousel dépend du cadre «QuartzCore» et prend entièrement en charge l'ARC. Nous avons donc quelques tâches simples à effectuer pour nous assurer que notre classe nouvellement ajoutée fonctionnera avec notre projet..

Pour ajouter la structure QuartzCore, cliquez sur le fichier de projet dans le navigateur de gauche (ce sera le nom de votre projet; le mien dit “iCarousel 1target, iPhone OS…”). En haut de l'écran, vous avez maintenant quelques paramètres de construction cibles. Cliquez sur “Build Phases” puis développez “Link Binary With Libraries” et cliquez sur le bouton “+” dans le coin inférieur gauche. Une fenêtre s'ouvrira et vous pourrez trouver notre cadre en tapant «QuartzCore» dans le champ de recherche. Cliquez sur "Ajouter" et vous avez terminé!

Nous allons désactiver la barre d'état de cette application. Allez donc dans l'onglet «Info» pour notre cible et sous «Propriétés personnalisées de la cible iOS», nous ajouterons une nouvelle ligne (Clic droit ->; Ajouter une ligne ) et définissez le texte du champ “Key” sur “La barre d’état est initialement masquée”. Ensuite, réglez la «Valeur» sur «OUI».

Maintenant, avant d'entrer dans l'implémentation réelle, nous souhaitons définir l'orientation de notre application en mode paysage et nous assurer qu'elle ne passe pas en mode portrait (du moins pour le moment). Nous allons simplement aller à l'onglet «Résumé» pour notre cible et nous assurer que les options «Paysage à gauche» et «Paysage à droite» sont les seules sélectionnées dans la section «Orientations de périphérique prises en charge»..

Ensuite, nous pouvons aller dans notre fichier d’implémentation du contrôleur de vue principale («MTViewController.m» pour moi), et changer la méthode:

 - (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation // Renvoie YES pour les orientations prises en charge, renvoie (interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight);

La dernière chose à faire pour l'instant est d'intégrer nos images des animaux du zoo à notre projet. J'ai inclus sept de ces images dans les fichiers source que vous pouvez utiliser. Il suffit de les récupérer à partir de n'importe quel endroit où vous avez décompressé le répertoire de fichiers source et de les faire glisser dans notre projet (vous pouvez également faire glisser tout le répertoire «Animals», qui comprendra toutes les images). Et maintenant nous sommes prêts à rouler!

Étape 2: Configuration de nos données et de notre carrousel

Notre carrousel va afficher des images de différents animaux de zoo et, sous l'image actuelle, nous allons montrer le nom de l'animal et le type de nourriture qu'il aime manger. Dans un environnement de production, vous devez disposer de données réelles, mais pour notre exemple, nous allons simplement configurer quelques NSArrays avec des données factices..

Notre premier tableau sera une liste des noms d'images afin que nous puissions les trouver et les charger dans notre carrousel. Nous appellerons cette liste "images".

Le second tableau aura une liste de noms qui correspondent à nos images, ainsi qu'une petite phrase qui suit ce format: [nom de l'animal] Mangez: [nourriture]. Par exemple, avec les ours, nous dirons: «Bears Eat: Honey». Nous appellerons ce tableau "descriptions".

Nous allons configurer ces NSArrays dans notre fichier d’en-tête de contrôleur de vue principal («MTViewController.h» pour moi)..

 @property (strong, nonatomic) NSMutableArray * animaux; @property (strong, nonatomic) descriptions NSMutableArray *;

Et bien sûr, synthétisez-les dans notre fichier d'implémentation:

 @ synthétiser des animaux, des descriptions;

Nous allons faire notre installation dans la méthode “initWithNibName”, alors mettons les noms d'images et les descriptions des aliments dans leurs tableaux maintenant.

 - (id) initWithNibName: (NSString *) bundle nibNameOrNil: (NSBundle *) nibBundleOrNil self = [super initWithNibName: nibNameOrNil bundle: nibBundleOrNil]; if (self) // configure les données du carrousel wrap = NO; self.animals = [NSMutableArray arrayWithObjects: @ "Bear.png", @ "Zebra.png", @ "Tiger.png", @ "Goat.png", @ "Birds.png", @ "Giraffe.png", @ "Chimp.png", nil]; self.descriptions = [NSMutableArray arrayWithObjects: @ "Les ours mangent: Miel", @ "Les zèbres mangent: de l'herbe", @ "Les tigres mangent: de la viande", @ "Les chèvres mangent: des mauvaises herbes", @ "Les oiseaux mangent: des graines", @ " Les girafes mangent: les arbres ", @" Les chimpanzés mangent: les bananes ", nil];  retourner soi-même;

Vous remarquerez qu'il existe également une propriété «wrap», que nous avons définie sur «NO». Ceci est une propriété d'iCarousel, qui garantira que notre carrousel ne défile pas en boucle dans nos images, mais arrête de défiler après les premier et dernier éléments avec une belle animation en caoutchouc. Nous examinerons cela plus tard.

Maintenant que nous avons des données dans notre application, nous devons implémenter la classe iCarousel. iCarousel fonctionne comme UITables, avec les protocoles «source de données» et «délégué». Nous allons les implémenter en important d'abord la classe iCarousel dans notre en-tête..

 #import “iCarousel.h”

Ensuite, nous ajouterons le bit de code suivant après la partie «UIViewController» de la déclaration d'interface d'en-tête:

Pendant que nous sommes ici, nous pouvons également ajouter notre propriété «wrap», que nous avons définie dans notre méthode «initWithNibName»..

 @property (nonatomic) BOOL Wrap;

Maintenant que notre en-tête est prêt, nous devons connecter UIView et UILabel afin d'afficher notre carrousel et son texte de description. Nous allons donc ouvrir notre fichier .xib («MTViewController.xib» pour moi) et ajouter nos nouveaux éléments..

Pour iCarousel, nous aurons besoin d'un UIView. Je mets le fond de mon fond sur "Lead" pour qu'il soit beau et sombre derrière les images.

Maintenant, pour qu'iCarousel reconnaisse cette UIView en tant que sous-classe «iCarousel», passons à «l'inspecteur d'identité» et modifions la «Classe» en «iCarousel» dans la section «Classe personnalisée». Ensuite, si nous cliquons avec le bouton droit sur notre nouvelle UIView, nous pouvons faire glisser nos options «source de données» et «déléguer» vers le «propriétaire du fichier». Nous devrons également définir le "Prise de référencement" pour notre affichage carrousel à la propriété "aCarousel" dans notre "Propriétaire du fichier". Nous avons presque terminé notre vue iCarousel, mais nous allons d'abord travailler sur notre étiquette, puis nous allons relier les deux nouvelles vues à notre classe «MTViewController»..

Je vais donc définir l'arrière-plan de la vue principale sur «Tungsten», ce qui fournira une zone grise plus claire pour l'arrière-plan de l'étiquette, qui affichera le texte de description de l'animal sélectionné. Et puis, bien sûr, je vais glisser sur un UILabel et le centrer sous mon iCarousel UIView.

Lorsque tout est en place, je peux maintenant ouvrir mon «éditeur adjoint», faire facilement un clic droit et faire glisser mes nouvelles vues. Tout d'abord, la vue iCarousel située juste sous le tableau «descriptions» de mon fichier d'en-tête de la vue principale, puis je ferai de même avec mon UILabel. J'ai nommé mon carrousel «carrousel» et mon «label» UILabel.

Et cela termine notre travail avec le fichier d’en-tête, ainsi que le fichier .xib. En résumé, nous avons importé la classe iCarousel, ajouté les protocoles de délégation de sources de données iCarousel et créé nos propriétés pour le carrousel, l'étiquette et les tableaux..

Étape 3: Faire en sorte que tout fonctionne

Le protocole iCarousel prend en charge un certain nombre de méthodes qui traitent de tous les éléments visuels et interactifs du carrousel. Vous pouvez trouver une référence complète des méthodes, propriétés, etc. disponibles sur la page github d'iCarousel ici: https://github.com/nicklockwood/iCarousel. Pour l'instant cependant, nous devons simplement configurer nos tableaux en tant que données pour notre carrousel, ainsi que configurer le comportement du carrousel comme nous le voulons..

Pour cet exemple, ce sont les méthodes iCarousel que nous allons utiliser:

 - (NSUInteger) numberOfItemsInCarousel: (iCarousel *) carrousel return [nombre d'animaux]];

Nous allons définir le nombre total d'éléments comme étant le nombre d'éléments dans notre tableau «animaux».

 - (NSUInteger) numberOfVisibleItemsInCarousel: (iCarousel *) carrousel // limite le nombre de vues d'éléments chargées simultanément (pour des raisons de performances) return 7;

Pour l'iPhone, nous souhaitons uniquement afficher jusqu'à 7 éléments à la fois. Ce n'est pas un nombre absolu, mais sera bon pour la performance.

 - (UIView *) carrousel: (iCarousel *) carrousel viewForItemAtIndex: (NSUInteger) index // crée une vue numérotée UIView * view = [[UIImageView alloc] initWithImage: [UIImage imageNamed: [animals objectAtIndex: index]]; retourner la vue;

Cela ressemble beaucoup à travailler avec la cellule actuelle dans un UITableView. Ici, nous définissons le contenu de chaque élément du carrousel comme une UIView avec un UIImage. UIImage chargera le fichier .png pour l'animal correspondant dans le tableau «animaux».

 - (NSUInteger) numberOfPlaceholdersInCarousel: (iCarousel *) carrousel // remarque: les vues d'espace réservé ne sont affichées que sur certains carrousels si le retour à la ligne est désactivé. Retourne 0;

Les espaces réservés sont des éléments de reliure au début et à la fin de notre groupe d'images. Nous ne voulons pas de ceux-ci, nous allons donc renvoyer 0. Par souci de curiosité, n'hésitez pas à changer cela pour renvoyer 1, mais pour notre exemple, nous voulons le laisser tel quel..

 - (CGFloat) carrouselItemWidth: (iCarousel *) carrousel // généralement, il doit être légèrement plus large que les vues d'élément renvoyées 240;

C'est assez explicite, c'est l'espace que le carrousel accordera à chaque article. Nos images ont une largeur de 220 pixels, aussi j’ai réglé cette valeur sur 240 pour fournir un espacement.

 - (BOOL) carrouselShouldWrap: (iCarousel *) carrousel // Wrap tous les carrousels retour wrap;

Ceci est défini sur «no» dans notre méthode «initWithNibName» et empêchera nos éléments de défiler à l'infini..

 - (void) carrouselDidScroll: (iCarousel *) carrousel [label setText: [NSString stringWithFormat: @ "% @", [descriptions objectAtIndex: carrousel.currentItemIndex]]];

Et, finalement, c’est la méthode qui fonctionnera lorsque nous nous arrêterons sur un élément donné. Nous définissons le texte de notre UILable sur le contenu de notre tableau «descriptions» à l'index correspondant à notre élément actuel. Et c'est tout pour les méthodes iCarousel.

La dernière chose que nous souhaitons faire maintenant, avant de lancer notre application, consiste à définir le type de style de présentation du carrousel souhaité. Nous pouvons le faire dans la méthode «(void) viewDidLoad» en définissant le carrousel.type sur notre style souhaité..

 - (void) viewDidLoad aCarousel.type = iCarouselTypeCoverFlow2; [super viewDidLoad];

Vous pouvez voir une liste complète des styles au début de cet article ou sur la page iCarousel github.

Et maintenant, construisez et exécutez votre application. Vous devriez voir une liste déroulante d’images d’animaux avec leur description en dessous. Je vous encourage fortement à jouer avec les différents styles et propriétés du manège, et peut-être que nous pourrons même envisager l'interactivité avec les articles du manège à l'avenir..

Code