Share
¡Involucre a sus usuarios con impresionantes carruseles! Veremos qué tan fácil y limpio puede ser implementar carruseles interactivos y desplazables en sus aplicaciones de iOS. Con una alta capacidad de configuración, puede tener matrices 3D, planas, giratorias y de desplazamiento sin fin para datos, imágenes y botones.
Nota del editor: este tutorial se publicó originalmente en Mobiletuts + en enero. Esta versión se ha actualizado significativamente en respuesta a los cambios en la biblioteca de iCarousel.
Ahora, casi cinco años después, ese mismo mensaje es cierto. Hay magia en la forma en que podemos explorar nuestra música hoy y, como desarrolladores, podemos ofrecer esa misma experiencia a nuestros usuarios para todo tipo de datos, no solo canciones y álbumes..
Para aquellos que ya están familiarizados con el desarrollo para iOS, podría ser intimidante considerar la cantidad de factores involucrados para implementar algo tan simple como Cover Flow: animación y desplazamiento suave, optimización del manejo de imágenes, intercepción de interacciones táctiles, etc..
Sin embargo, afortunadamente, Nick Lockwood de Charcoal Design creó una clase llamada "iCarousel" que se encarga de todo el trabajo pesado para nosotros, y lo ha lanzado como un proyecto de código abierto. Esto significa que podemos llegar al resto de nuestro desarrollo de forma rápida y eficiente, mientras seguimos disfrutando de Cover Flow altamente interactivo y fácil de tocar..
Una de las grandes características de iCarousel es la selección de tipos de pantalla listos para usar:
También es posible personalizar estos estilos para que se ajusten a sus necesidades, pero eso podría ser un tutorial por separado o una Sugerencia rápida en sí misma (háganoslo saber en los comentarios si está interesado).
iCarousel está alojado en github, lo que significa que puedes obtenerlo como clon de git o como descarga de .zip. Puede encontrarlo en https://github.com/nicklockwood/iCarousel, así que adelante, consiga una copia local de iCarousel.
Este proyecto implica el uso de algunas imágenes también, por lo que querrá descargar los "Archivos de origen" en la parte superior de esta página si aún no lo ha hecho. En ese archivo .zip, hay un directorio llamado "Animales" que tiene siete imágenes de animales diferentes (estas imágenes provienen de Joy Tek en Flickr - http://www.flickr.com/photos/joytek/collections/72157627168953450/) - y han sido redimensionados para este tutorial).
Ahora, con todos los archivos necesarios descargados, estamos listos para crear un carrusel increíble!
Comenzaremos agregando los archivos de clase iCarousel, luego los archivos de imagen y, finalmente, nos aseguraremos de limitar la aplicación al modo horizontal sin una barra de estado visible (iCarousel funcionará en modo retrato, pero lo mantendremos simple simplemente trabajando con el paisaje por ahora). Pero antes de todo eso, comencemos un nuevo proyecto.!
Solo necesitamos una sola ventana para este proyecto, por lo que una "Aplicación de vista única" estará bien por ahora. Llamaré a mi proyecto "Carrusel" y usaré el conteo automático de referencias (ARC), por lo que es importante no olvidar esa opción al crear el proyecto..
Una vez que se haya creado nuestro proyecto, podemos agregar los archivos de clase de iCarousel agarrando el directorio "iCarousel" y arrastrándolo al proyecto (solo hay dos archivos en el directorio de iCarousel: "iCarousel.h" e "iCarousel.m"). Nota: si está arrastrando todo el directorio a su proyecto, asegúrese de "crear grupos para cualquier carpeta agregada".
iCarousel depende del marco de "QuartzCore" y es totalmente compatible con ARC, por lo que tenemos algunas tareas simples que hacer para asegurarnos de que nuestra clase recién agregada funcione con nuestro proyecto.
Para agregar el marco QuartzCore, haga clic en el archivo de proyecto en el navegador del lado izquierdo (será el nombre de su proyecto; el mío dice "iCarousel 1target, iPhone OS ..."). En la parte superior de la pantalla ahora tendrá algunas configuraciones de construcción de destino. Haga clic en "Crear fases" y luego expanda "Vincular binarios con bibliotecas" y haga clic en el botón "+" en la esquina inferior izquierda. Se abrirá una ventana y puede encontrar nuestro marco escribiendo "QuartzCore" en el cuadro de búsqueda. Haga clic en "Agregar" y ya está!
Vamos a deshabilitar la barra de estado para esta aplicación, así que vaya a la pestaña "Información" para nuestro objetivo y en "Propiedades personalizadas de destino de iOS" agregaremos una nueva fila (clic derecho ->; Agregar fila ) y configure el texto en el campo "Clave" en "La barra de estado está inicialmente oculta". Luego, establezca el "Valor" en "SÍ".
Ahora, antes de entrar en la implementación real, queremos establecer la orientación de nuestra aplicación en horizontal, y asegurarnos de que no pase al modo vertical (al menos por ahora). Solo iremos a la pestaña "Resumen" de nuestro objetivo y nos aseguraremos de que las opciones "Horizontal izquierda" y "Horizontal derecha" sean las únicas seleccionadas en la sección "Orientaciones de dispositivos compatibles".
Luego podemos ir a nuestro archivo de implementación del controlador de vista principal ("MTViewController.m" para mí) y cambiar el método:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation // Devuelve YES para las orientaciones admitidas.
Lo último que tendremos que hacer por ahora es incluir nuestras imágenes de los animales del zoológico en nuestro proyecto. He incluido siete imágenes de este tipo en los archivos de origen para su uso. Simplemente consígalos desde donde haya descomprimido el directorio de archivos de origen y arrástrelos a nuestro proyecto (también puede arrastrar todo el directorio de "Animales", que incluirá todas las imágenes). Y ahora estamos listos para rodar.!
Nuestro carrusel mostrará algunas imágenes de diferentes animales del zoológico y, debajo de la imagen actual, mostraremos el nombre del animal y el tipo de comida que les gusta comer. En un entorno de producción, debe tener algunos datos reales con los que trabajar, pero para nuestro ejemplo, solo vamos a configurar algunos NSArrays con datos ficticios.
Nuestra primera matriz será una lista de los nombres de las imágenes para que podamos encontrarlos y cargarlos en nuestro carrusel. Llamaremos a esta lista "imágenes".
La segunda matriz tendrá una lista de nombres que corresponden a nuestras imágenes, así como una pequeña oración que sigue este formato: [nombre del animal] Coma: [comida]. Por ejemplo, con los osos, diremos: "Los osos comen: miel". Llamaremos a esta matriz "descripciones".
Configuraremos estos NSArrays en nuestro archivo de encabezado del controlador de vista principal ("MTViewController.h" para mí).
@property (strong, nonatomic) NSMutableArray * animales; @ propiedad (fuerte, no atómica) NSMutableArray * descripciones;
Y, por supuesto, sintetízalos en nuestro archivo de implementación:
@sintetizar animales, descripciones;
Haremos nuestra configuración en el método "initWithNibName", así que pongamos los nombres de las imágenes y las descripciones de los alimentos en sus arreglos ahora.
- (id) initWithNibName: (NSString *) paquete nibNameOrNil: (NSBundle *) nibBundleOrNil self = [super initWithNibName: nibNameOrNil paquete: nibBundleOrNil]; if (self) // configura el ajuste de datos del carrusel = NO; self.animals = [NSMutableArray arrayWithObjects: @ "Bear.png", @ "Zebra.png", @ "Tiger.png", @ "Goat.png", @ "Birds.png", @ "Giraffe.png", @ "Chimp.png", nil]; self.descriptions = [NSMutableArray arrayWithObjects: @ "Bears Eat: Honey", @ "Zebras Eat: Grass", @ "Tigers Eat: Meat", @ "Goats Eat: Weeds", @ "Birds Eat: Seeds", @ " Las jirafas comen: árboles ", @" Chimps Eat: Bananas ", nil]; devuélvete a ti mismo;
Notará que también hay una "envoltura" de propiedad, que hemos establecido en "NO". Esta es una propiedad de iCarousel, y asegurará que nuestro carrusel no se desplace en un bucle infinito a través de nuestras imágenes, sino que, por el contrario, deja de desplazarse después del primer y último elemento con una buena animación de bandas elásticas. Lo veremos más adelante..
Ahora que tenemos algunos datos en nuestra aplicación, deberemos implementar la clase iCarousel real. iCarousel funciona como UITables, con protocolos de "fuente de datos" y "delegado". Implementaremos esto importando primero la clase iCarousel en nuestro encabezado.
#importar “iCarousel.h”
A continuación, agregaremos el siguiente bit de código después de la parte "UIViewController" de la declaración de la interfaz del encabezado:
Accentsconagua
