Share
Binden Sie Ihre Benutzer mit atemberaubenden Karussells an. Wir werden sehen, wie einfach und sauber scrollbare interaktive Karussells in Ihren iOS-Anwendungen implementiert werden können. Dank der hohen Konfigurierbarkeit können Sie 3D-, Flat-, Rotations- und Endlos-Scroll-Arrays für Daten, Bilder oder Schaltflächen verwenden.
Bestimmte Aspekte von Anwendungen oder Techniken, die in diesem Lernprogramm verwendet werden, haben sich seit der ursprünglichen Veröffentlichung geändert. Dies kann es ein wenig schwierig machen, mitzuverfolgen. Wir empfehlen Ihnen, sich diese neueren Tutorials zum gleichen Thema anzusehen:
Erstellen Sie ein fantastisches Karussell, Version 2.0
Am 9. Januar 2007 stellte Steve Jobs das iPhone vor einem begeisterten Publikum vor. In seinem Vortrag demonstrierte er viele der Eigenschaften, die eine völlig neue Art der Interaktion mit Technologie und Informationen schaffen würden. Eine dieser vielen Funktionen wurde durch eine einfache und leistungsstarke Nachricht dargestellt - "berühren Sie Ihre Musik". Als er dort oben stand und Bob Dylan über den Lautsprechern spielte, sind Steve Jobs "durchgedreht" mühelos Musikalben, und diese Botschaft war klar.
Nun, fast fünf Jahre später, ist dieselbe Botschaft wahr. Die Art und Weise, wie wir heute unsere Musik durchsuchen können, strahlt Magie aus. Als Entwickler können wir unseren Benutzern dieselbe Erfahrung für alle Arten von Daten bieten, nicht nur für Songs und Alben.
Für diejenigen, die bereits mit der Entwicklung für iOS vertraut sind, kann es einschüchternd sein, die Anzahl der Faktoren zu berücksichtigen, die für die Implementierung von scheinbar einfachem wie Cover Flow erforderlich sind: Animationen und reibungsloses Scrollen, Optimierung der Bildverarbeitung, Abfangen von Berührungsinteraktionen usw.
Glücklicherweise hat Nick Lockwood von Charcoal Design eine Klasse mit dem Namen "iCarousel" geschaffen, mit der alle schweren Aufgaben für uns erledigt werden, und er hat es als Open Source-Projekt veröffentlicht. Das bedeutet, dass wir schnell und effizient zum Rest kommen können unserer Entwicklung, während Sie dennoch den hochgradig interaktiven, berührungsfreundlichen Cover Flow genießen.
Eine der wichtigsten Funktionen von iCarousel ist die Auswahl von gebrauchsfertigen Anzeigetypen:
Es ist auch möglich, diese Stile an Ihre Bedürfnisse anzupassen. Dies kann jedoch auch ein separates Tutorial oder ein Quick Tip sein (lassen Sie uns dies in den Kommentaren wissen, wenn Sie interessiert sind)..
iCarousel wird auf github gehostet, was bedeutet, dass Sie es entweder als Git-Klon oder als ZIP-Download erhalten können. Sie finden es unter https://github.com/nicklockwood/iCarousel. Machen Sie also weiter und holen Sie sich nach Ihrer bevorzugten Methode eine lokale Kopie von iCarousel.
In diesem Projekt werden auch einige Bilder verwendet. Wenn Sie dies nicht bereits getan haben, sollten Sie die "Quelldateien" oben auf dieser Seite herunterladen. In dieser ZIP-Datei gibt es ein Verzeichnis mit dem Namen "Tiere". , die sieben verschiedene Tierbilder hat. (Diese Bilder stammen von Joy Tek auf Flickr (http://www.flickr.com/photos/joytek/collections/72157627168953450/) und wurden für dieses Lernprogramm verkleinert.)
Nachdem nun alle erforderlichen Dateien heruntergeladen wurden, können wir ein fantastisches Karussell erstellen!
Wir beginnen mit dem Hinzufügen der iCarousel-Klassendateien, dann der Bilddateien und schließlich stellen wir sicher, dass die App auf den Querformatmodus ohne sichtbare Statusleiste beschränkt wird. (iCarousel wird im Portrait-Modus arbeiten, aber wir werden es jetzt einfach halten, indem wir vorerst nur mit Landscape arbeiten.) Bevor wir das alles machen, wollen wir ein neues Projekt beginnen.
Wir brauchen nur ein einziges Fenster für dieses Projekt, daher wird eine "Single View Application" in Ordnung sein. Ich nenne mein Projekt "Karussell" und verwende die automatische Referenzzählung. Daher ist es wichtig, diese Option nicht zu vergessen.
Nachdem unser Projekt erstellt wurde, können Sie die iCarousel-Klassendateien hinzufügen, indem Sie das Verzeichnis "iCarousel" ziehen und in das Projekt ziehen. (Im iCarousel-Verzeichnis befinden sich nur zwei Dateien: "iCarousel.h" und "iCarousel.m") ”.) Hinweis: Wenn Sie das gesamte Verzeichnis in Ihr Projekt ziehen, stellen Sie sicher, dass Sie" Gruppen für alle hinzugefügten Ordner erstellen "..
iCarousel hängt vom Rahmen "QuartzCore" ab und unterstützt derzeit ARC nicht. Daher müssen wir einige einfache Aufgaben ausführen, um sicherzustellen, dass unsere neu hinzugefügte Klasse mit unserem Projekt zusammenarbeitet.
Um das QuartzCore-Framework hinzuzufügen, klicken Sie im linken Navigator auf die Projektdatei (dies ist Ihr Projektname; mein Name lautet "iCarousel 1-Ziel, iPhone-Betriebssystem ..."). Oben auf dem Bildschirm haben Sie jetzt ein Ziel Build-Einstellungen. Klicken Sie auf "Build-Phasen", und erweitern Sie dann "Link-Binär mit Bibliotheken" und klicken Sie auf die Schaltfläche "+" in der linken unteren Ecke. Ein Fenster wird geöffnet und Sie können unser Framework finden, indem Sie "QuartzCore" in das Suchfeld eingeben. Klicken Sie auf "Hinzufügen", und Sie sind fertig.
Dann setzen wir ein Compile-Flag, das eine Ausnahme für den LLVM-Compiler für iCarousel macht. Gehen Sie auf derselben Seite zum Abschnitt "Compile Sources" und wir gehen zum Eintrag "iCarousel". Doppelklicken Sie auf diese Zeile und geben Sie "-fno-objc-arc" (ohne Anführungszeichen) in das Popover-Fenster ein.
Wir werden die Statusleiste für diese App deaktivieren, gehen Sie also zu "Info" für unser Ziel und unter "Benutzerdefinierte iOS-Zieleigenschaften". Fügen Sie eine neue Zeile hinzu (Rechtsklick ->; Hinzufügen.) Zeile) und setzen Sie den Text im Feld "Schlüssel" auf "Statusleiste ist anfangs ausgeblendet". Setzen Sie dann den "Wert" auf "JA"..
Bevor wir uns nun mit der eigentlichen Implementierung befassen, möchten wir die Ausrichtung unserer App auf Querformat festlegen und sicherstellen, dass sie (zumindest jetzt) nicht in den Hochformatmodus wechselt. Wir gehen einfach zur Registerkarte "Zusammenfassung" für unser Ziel und stellen sicher, dass die Optionen "Landscape Left" und "Landscape Right" die einzigen sind, die im Abschnitt "Unterstützte Geräteausrichtungen" ausgewählt werden.
Dann können wir in unsere Hauptansicht-Controller-Implementierungsdatei ("MTViewController.m" für mich) gehen und die Methode ändern:
- (BOOL) sollteAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation // Rückgabe von JA für unterstützte Ausrichtungen return (interfaceOrientation == UIInterfaceOrientationLandscapeLeft || interfaceOrientation == UIInterfaceOrientationLandscapeRight);
Das letzte, was wir jetzt tun müssen, ist, unsere Bilder von den Zootieren in unser Projekt aufzunehmen. Ich habe sieben solcher Bilder in die Quelldateien eingefügt, die Sie verwenden können. Laden Sie sie einfach von dort ab, wo Sie das Quelldateiverzeichnis entpackt haben, und ziehen Sie sie in unser Projekt. (Sie können auch einfach das gesamte "Animals" -Verzeichnis ziehen, in dem alle Bilder enthalten sind.) Jetzt können Sie rollen!
In unserem Karussell werden einige Bilder verschiedener Zootiere angezeigt, und unter dem aktuellen Bild zeigen wir den Namen des Tieres und welche Art von Futter sie gerne essen. In einer Produktionsumgebung sollten Sie über echte Daten verfügen, mit denen Sie arbeiten können. In unserem Beispiel werden jedoch nur wenige NSArrays mit Dummy-Daten eingerichtet.
Unser erstes Array wird eine Liste der Bildnamen sein, damit wir sie finden und in unser Karussell laden können. Wir nennen diese Liste "Bilder"..
Das zweite Array enthält eine Liste von Namen, die unseren Bildern entsprechen, sowie einen kleinen Satz, der diesem Format folgt: [Tiername] Eat: [Nahrung]. Bei Bären sagen wir zum Beispiel: "Bears Eat: Honey". Dieses Array nennen wir "Beschreibungen"..
Wir werden diese NSArrays in unserer Hauptansicht-Controller-Header-Datei ("MTViewController.h" für mich) einrichten..
@ Eigenschaft (stark, nichtatomar) NSMutableArray * Tiere; @ property (strong, nonatomic) NSMutableArray * -Beschreibungen;
Und natürlich synthetisieren Sie sie in unserer Implementierungsdatei:
Tiere synthetisieren, Beschreibungen;
Da wir in diesem Beispiel eine .xib verwenden, möchten wir unser Setup in der "initWithNibName" -Methode vornehmen. Lassen Sie uns jetzt die Bildnamen und die Lebensmittelbeschreibungen in ihre Arrays einfügen.
- (id) initWithNibName: (NSString *) nibNameOrNil-Bundle: (NSBundle *) nibBundleOrNil self = [super initWithNibName: nibNameOrNil-Bundle: nibBundleOrNil]; if (self) // Karussell-Datenumbruch einrichten = NEIN; self.animals = [NSMutableArray arrayWithObjects: @ "Bear.png", @ "Zebra.png", @ "Tiger.png", @ "Goat.png", @ "Birds.png", @ "Giraffe.png", @ "Chimp.png", nil]; self.descriptions = [NSMutableArray arrayWithObjects: @ "Bären essen: Honig", @ "Zebras essen: Gras", @ "Tiger essen: Fleisch", @ "Ziegen fressen: Unkraut", @ "Vögel essen: Samen", @ " Giraffen essen: Bäume ", @" Schimpansen essen: Bananen ", nil]; return self;
Sie werden feststellen, dass es auch eine Eigenschaft "wrap" gibt, die wir auf "NO" gesetzt haben. Dies ist eine iCarousel-Eigenschaft, die dafür sorgt, dass unser Karussell nicht in einer Endlosschleife durch unsere Bilder blättert. Stattdessen wird das Scrollen nach dem ersten und letzten Element mit einer schönen Gummiband-Animation beendet. Wir werden das später genauer untersuchen.
Da wir jetzt einige Daten in unserer App haben, müssen wir die eigentliche iCarousel-Klasse implementieren. iCarousel arbeitet wie UITables mit den Protokollen "Datenquelle" und "Delegieren". Wir implementieren diese, indem wir zunächst die iCarousel-Klasse in unseren Header importieren.
#import "iCarousel.h"
Als Nächstes fügen wir nach dem Teil "UIViewController" der Header-Interface-Deklaration den folgenden Code hinzu:
Accentsconagua
