SDK iOS Création d'un carrousel génial

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 des données, des images ou des boutons..

Changements ultérieurs dans Techniques et logiciels

Certains aspects des applications ou techniques utilisées dans ce tutoriel ont changé depuis sa publication initiale. Cela pourrait le rendre un peu difficile à suivre. Nous vous recommandons de consulter ces didacticiels plus récents sur le même sujet:

Créer un carrousel génial, version 2.0

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 là-haut, avec Bob Dylan jouant sur les haut-parleurs, Steve Jobs a "feuilleté" des albums de musique sans effort, et ce message était clair.

Près de cinq ans plus tard, le même message est vrai. Il est magique que nous puissions aujourd'hui parcourir notre musique. En tant que développeurs, nous sommes en mesure de proposer cette 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 l'a publié en tant que projet open source. Cela signifie que nous pouvons passer rapidement et efficacement au reste du travail. de notre développement, tout en continuant de profiter de Cover Flow hautement interactif et tactile.

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

Il est également possible de personnaliser ces styles en fonction de vos besoins, mais il pourrait 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 à l'adresse https://github.com/nicklockwood/iCarousel, alors n'hésitez plus et, selon la méthode que vous préférez, procurez-vous une copie locale d'iCarousel..

Ce projet implique également l'utilisation de quelques images. Vous voudrez donc télécharger les "Fichiers sources" en haut de cette page, si ce n'est déjà fait. Dans ce fichier .zip, vous trouverez un répertoire appelé "Animaux". , qui a sept images animales différentes. (Ces images proviennent de Joy Tek sur Flickr (http://www.flickr.com/photos/joytek/collections/72157627168953450/) et ont été redimensionnées 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, puis nous nous assurerons de limiter l'application au mode paysage sans barre d'état visible. (iCarousel fonctionnera en mode portrait, mais nous allons rester simple en travaillant uniquement avec paysage pour le moment.) Mais avant tout cela, commençons un nouveau projet.

Nous avons juste besoin d'une seule fenêtre pour ce projet, donc une "application à vue unique" ira bien. J'appellerai mon projet "Carousel" et j'utiliserai le comptage de référence automatique. Il est donc important de ne pas oublier cette option..

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 tous les dossiers ajoutés "..

iCarousel dépend du framework "QuartzCore" et ne prend actuellement pas en charge 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 une cible. construire les paramètres. Cliquez sur "Build Phases", puis développez le lien "Link Binary With Libraries" et cliquez sur le bouton "+" dans le coin inférieur gauche. Une fenêtre apparaîtra et vous pourrez trouver notre framework en tapant "QuartzCore" dans le champ de recherche. Cliquez sur "Ajouter" et vous avez terminé..

Ensuite, nous allons définir un indicateur de compilation qui fera une exception pour le compilateur LLVM pour iCarousel. Accédez à la section "Compiler les sources" de la même page, puis à l’entrée "iCarousel". Double-cliquez sur cette ligne et mettez "-fno-objc-arc" (sans les guillemets) dans la fenêtre qui apparaît..

Nous allons désactiver la barre d'état de cette application, alors passez à l'onglet "Info" de notre cible et sous "Propriétés personnalisées de la cible iOS", nous ajouterons une nouvelle ligne (clic droit -> Ajouter Ligne) et définissez le texte du champ "Clé" sur "La barre d’état est initialement masquée". Ensuite, réglez "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é" de notre cible et nous assurer que les options "Paysage de gauche" et "Paysage de 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 de contrôleur de vue principal ("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 que nous devons faire maintenant 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 depuis l’emplacement où vous avez décompressé le répertoire de fichiers source et de les faire glisser dans notre projet. (Vous pouvez aussi simplement faire glisser tout le répertoire "Animals", qui contiendra toutes les images.) Et maintenant, nous sommes prêts à lancer!

É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;

Étant donné que nous utilisons un fichier .xib dans cet exemple, nous souhaitons procéder à notre configuration dans la méthode "initWithNibName". Mettons maintenant les noms des images et les descriptions des aliments dans leurs tableaux..

 - (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 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", nous allons passer à "l'inspecteur d'identité" et changer la "Classe" en "iCarousel" dans la section "Classe personnalisée". Ensuite, si nous cliquons avec le bouton droit de la souris sur notre nouvel UIView, nous pouvons faire glisser nos options "dataSource" et "delegate" vers le "Propriétaire du fichier". Nous aurons également besoin de définir "Prise de référencement" pour notre vue carrousel sur la propriété "carrousel" de notre "Propriétaire de 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é. va glisser sur un UILabel et le centrer sous mon iCarousel UIView.

Lorsque tout est en place, je peux maintenant ouvrir mon "Assistant éditeur", cliquer avec le bouton droit de la souris et faire glisser facilement mes nouvelles vues, tout d’abord la vue iCarousel située juste sous le tableau "descriptions" de mon fichier d’en-tête de vue principale, puis je ferai la même chose 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 "initiWithNibName", et empêchera nos éléments de défiler à l'infini.

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

Et enfin, c’est la méthode qui fonctionnera lorsque nous nous arrêterons sur un élément donné. Nous fixons le texte de notre UILable au 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 carousel.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