Share
Betrek uw gebruikers met verbluffende carrousels! We zullen bekijken hoe eenvoudig en schoon het kan zijn om schuifbare, interactieve carrousels in uw iOS-applicaties te implementeren. Met een hoge configureerbaarheid kunt u 3D, platte, roterende en eindeloze schuifmatrices hebben voor gegevens, afbeeldingen en knoppen.
Noot van de redacteur: deze tutorial werd oorspronkelijk in januari gepubliceerd op Mobiletuts +. Deze versie is aanzienlijk bijgewerkt als reactie op wijzigingen in de iCarousel-bibliotheek.
Nu, bijna vijf jaar later, is diezelfde boodschap waar. Er is magie in de manier waarop we vandaag door onze muziek kunnen bladeren, en als ontwikkelaars kunnen we diezelfde ervaring aan onze gebruikers aanbieden voor allerlei soorten gegevens, niet alleen voor nummers en albums.
Voor degenen die al bekend zijn met ontwikkelen voor iOS, kan het intimiderend zijn om rekening te houden met het aantal betrokken factoren om iets eenvoudigs te implementeren als Cover Flow: animatie en vloeiend scrollen, het optimaliseren van de afhandeling van afbeeldingen, het onderscheppen van aanraakinteracties, enz..
Gelukkig heeft Nick Lockwood van Charcoal Design een klasse gecreëerd genaamd "iCarousel" die al het zware werk voor ons afhandelt, en hij heeft het vrijgegeven als een open source project. Dit betekent dat we snel en efficiënt kunnen doorgaan met de rest van onze ontwikkeling, terwijl we nog steeds genieten van uiterst interactieve, aanraakvriendelijke Cover Flow.
Een van de geweldige functies van iCarousel is de selectie kant-en-klare schermtypen:
Het is ook mogelijk om deze stijlen aan te passen aan uw behoeften, maar dat kan een afzonderlijke zelfstudie of Quick Tip zelf zijn (laat het ons weten in de comments als u geïnteresseerd bent!).
iCarousel wordt gehost op github, wat betekent dat je het kunt krijgen als een git-kloon of als een .zip-download. Je vindt het op https://github.com/nicklockwood/iCarousel, dus ga je gang en koop een lokale kopie van iCarousel.
Dit project omvat ook het gebruik van een paar afbeeldingen, dus u wilt de "Bronbestanden" bovenaan deze pagina downloaden als u dat nog niet hebt gedaan. In dat .zip-bestand is er een map met de naam "Dieren" met zeven verschillende dierenafbeeldingen (deze afbeeldingen komen van Joy Tek op Flickr - http://www.flickr.com/photos/joytek/collections/72157627168953450/) - en de grootte is gewijzigd voor deze zelfstudie).
Nu alle gedownloade bestanden zijn gedownload, zijn we klaar om een geweldige carrousel te maken!
We beginnen met het toevoegen van de iCarousel-klassebestanden en vervolgens de afbeeldingsbestanden. Ten slotte zorgen we ervoor dat de app wordt beperkt tot de liggende modus zonder zichtbare statusbalk (iCarousel werkt in de staande modus, maar we houden het wel eenvoudig door voor nu gewoon met landschap te werken). Maar laten we vóór alles een nieuw project starten!
We hebben slechts één venster nodig voor dit project, dus een "Single View Application" zal voorlopig prima zijn. Ik zal mijn project "Carrousel" noemen en ik zal Automatic Reference Counting (ARC) gebruiken, dus het is belangrijk om die optie niet te vergeten bij het maken van het project.
Zodra ons project is aangemaakt, kunnen we de iCarousel-klassebestanden toevoegen door de "iCarousel" -directory te pakken en naar het project te slepen (er zijn slechts twee bestanden in de iCarousel-directory: "iCarousel.h" en "iCarousel.m"). Opmerking: als u de hele map naar uw project sleept, zorg dan dat u "Groepen maken voor elke toegevoegde map".
iCarousel is afhankelijk van het "QuartzCore" -raamwerk en ondersteunt ARC volledig, dus we hebben een paar eenvoudige taken om ervoor te zorgen dat onze nieuw toegevoegde klasse met ons project werkt.
Om het QuartzCore-raamwerk toe te voegen, klikt u op het projectbestand in de linker navigator (dit is uw projectnaam, de mijne zegt "iCarousel 1target, iPhone OS ..."). Bovenaan het scherm staan nu enkele instellingen voor het maken van doelen. Klik op 'Fasen opbouwen' en vouw vervolgens 'Binaire koppeling met bibliotheken' uit en klik op de knop '+' in de linkerbenedenhoek. Er verschijnt een venster en u kunt ons kader vinden door "QuartzCore" in het zoekvak te typen. Klik op "Toevoegen" en u bent klaar!
We gaan de statusbalk voor deze app uitschakelen, dus ga door naar het tabblad 'Info' voor ons doel en onder 'Aangepaste iOS-doeleigenschappen' zullen we een nieuwe rij toevoegen (klik met de rechtermuisknop ->; rij toevoegen ) en stel de tekst in het veld "Sleutel" in op "Statusbalk is in eerste instantie verborgen". Stel vervolgens de "Waarde" in op "JA".
Voordat we beginnen met de daadwerkelijke implementatie, willen we de oriëntatie van onze app op landschap instellen en ervoor zorgen dat deze niet in portretmodus gaat (althans voorlopig). We gaan gewoon naar het tabblad "Samenvatting" voor ons doel en zorgen ervoor dat de opties "Landschap links" en "Landschap rechts" de enige zijn die zijn geselecteerd onder het gedeelte "Ondersteunde apparaatoriëntatie".
Vervolgens kunnen we naar het implementatiebestand van de hoofdweergavecontroller gaan ("MTViewController.m" voor mij) en de methode wijzigen:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation // Return YES voor ondersteunde oriëntaties retourneren (interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight);
Het laatste wat we nu moeten doen, is onze foto's van de dieren van de dierentuin in ons project opnemen. Ik heb zeven van dergelijke afbeeldingen opgenomen in de bronbestanden die je kunt gebruiken. Pak ze gewoon waar u de map met bronbestanden uitgepakt hebt en sleep ze naar ons project (u kunt ook gewoon de hele map "Dieren" slepen, die alle afbeeldingen bevat). En nu zijn we klaar om te rollen!
Onze carrousel zal enkele afbeeldingen van verschillende dierentuindieren laten zien en onder het huidige beeld zullen we de dierennaam tonen en wat voor soort voedsel ze willen eten. In een productieomgeving zou je wat echte data moeten hebben om mee te werken, maar voor ons voorbeeld gaan we gewoon een paar NSArrays opzetten met dummy data.
Onze eerste array zal een lijst zijn van de afbeeldingsnamen, zodat we ze in onze carrousel kunnen vinden en laden. We zullen deze lijst "afbeeldingen" noemen.
De tweede reeks heeft een lijst met namen die overeenkomen met onze afbeeldingen, evenals een kleine zin die dit formaat volgt: [diernaam] Eten: [voedsel]. Met beren zullen we bijvoorbeeld zeggen: "Bears Eat: Honey". We zullen deze array "beschrijvingen" noemen.
We zullen deze NSArrays instellen in ons hoofdbestand-controller-headerbestand ("MTViewController.h" voor mij).
@property (strong, nonatomic) NSMutableArray * animals; @property (strong, nonatomic) NSMutableArray * beschrijvingen;
En, natuurlijk, synthetiseer ze in ons implementatiebestand:
@synthetiseren van dieren, beschrijvingen;
We zullen onze set-up uitvoeren in de "initWithNibName" -methode, dus laten we de afbeeldingsnamen en voedselbeschrijvingen nu in hun arrays zetten.
- (id) initWithNibName: (NSString *) nibNameOrNil-bundel: (NSBundle *) nibBundleOrNil self = [super initWithBibName: nibNameOrNil-bundel: nibBundleOrNil]; if (self) // set up carousel data wrap = NO; self.animals = [NSMutableArray arrayWithObjects: @ "Bear.png", @ "Zebra.png", @ "Tiger.png", @ "Goat.png", @ "Birds.png", @ "Giraffe.png", @ "Chimp.png", nul]; self.descriptions = [NSMutableArray arrayWithObjects: @ "Bears Eat: Honey", @ "Zebras Eat: Grass", @ "Tigers Eat: Meat", @ "Goats Eat: Weeds", @ "Birds Eat: Seeds", @ " Giraffen Eat: Trees ", @" Chimps Eat: Bananas ", nihil]; terugkeer zelf;
Je zult merken dat er ook een property "wrap" is, die we hebben ingesteld op "NO". Dit is een iCarousel-eigenschap en het zal ervoor zorgen dat onze carrousel niet in een oneindige lus door onze afbeeldingen schuift, maar in plaats daarvan stopt het met scrollen na de eerste en laatste elementen met een mooie animatie met rubberen banden. We zullen daar later meer op ingaan.
Nu we wat gegevens in onze app hebben, moeten we de eigenlijke iCarousel-klasse implementeren. iCarousel werkt als UITables, met protocollen voor "gegevensbron" en "delegeren". We zullen deze implementeren door eerst de iCarousel-klasse in onze header te importeren.
#import "iCarousel.h"
Vervolgens voegen we het volgende stukje code toe na het gedeelte "UIViewController" van de interface-declaratie van de header:
Accentsconagua
