Share
Willkommen zum letzten Teil unserer Serie zum Aufbau eines iPad-Readers für die Krieg der Welten mit dem Leaves-Projekt. Im heutigen Beitrag werde ich verschiedene Techniken demonstrieren, mit denen die Schnittstelle angepasst werden kann, wenn sich die Geräteorientierung ändert.
Seit meinem letzten Beitrag in dieser Serie sind ungefähr zwei Wochen vergangen, daher werde ich kurz auf das eingehen, was wir bisher beschrieben haben:
Im ersten Tutorial dieser Serie habe ich Ihnen das Leaves-Projekt vorgestellt und gezeigt, wie es in Xcode 4 integriert werden kann. Als Nächstes wurde gezeigt, wie ein UISlider mit Leaves verwendet wird, damit Benutzer schnell durch ein PDF-Dokument scrubben können. Schließlich habe ich gezeigt, wie man ein benutzerdefiniertes Inhaltsverzeichnis für Benutzer hinzufügt, um zwischen den Kapiteln zu tippen.
Nach jedem der obigen Beiträge endete ich mit einer Umfrage und bat Sie, über das Thema oder Thema abzustimmen, das ich als Nächstes behandeln sollte. Als Antwort auf das letzte Tutorial wollte die Mehrheit der Befragten wissen, wie die Leserschnittstelle für Änderungen der Geräteorientierung konfiguriert werden kann. Dies ist das, was ich heute als letzte Folge dieser Serie behandeln werde.
Bevor ich jedoch weiter gehe, möchte ich Ihnen sagen, was dieses Tutorial nicht tun wird: Ich werde dem Leaves-Projekt keine neuen Kernfunktionen hinzufügen. Es gibt einige wirklich großartige Dinge, die Sie erreichen können, wenn Sie im Kerncode des Projekts herumhacken oder das Leaves-Projekt alleine abwehren. Ich ermutige die Beteiligten, die Fackel hochzuheben und genau das zu tun. Leider ist es aus Zeitgründen nicht möglich, wesentliche Änderungen an Kernprojekten in dieser Serie vorzunehmen. Stattdessen zeige ich Ihnen einfach, wie Sie mit den von Leaves bereitgestellten Funktionen das Beste machen und auch die von uns erstellten benutzerdefinierten Ansichten und Steuerelemente der Benutzeroberfläche anpassen.
Dies ist eine Videodemo von dem, was Sie in diesem Tutorial lernen werden, wie man baut:
Der erste Schritt bei der Ausrichtung der Anwendung ist das Festlegen der Ausrichtung WOTWViewController, der Hauptprojektsicht-Controller kann unterstützen. Dies geschieht mit folgender Methode:
- (BOOL) shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation) interfaceOrientation // Alle Orientierungen unterstützen return YES;
Das shouldAutorotateToInterfaceOrientation: Methode wird von vererbt UIViewController und ermöglicht jedem Ansichts-Controller, anzugeben, welche Schnittstellenausrichtungen unterstützt werden. Für dieses Tutorial möchten wir alle unterstützen, also gebe ich einfach "JA" zurück. Wir könnten jedoch gezielt testen UIInterfaceOrientation Werte hier durch Überprüfen der interfaceOrientation Parameter.
Wenn Sie sich jetzt unser Projekt im Simulator ansehen, werden Sie feststellen, dass sich die Dinge ändern, wenn sich die Ausrichtung ändert. Sie werden jedoch auch feststellen, dass diese Standardänderungen zu wünschen übrig lassen. Es gibt zwei grundlegende Ansätze, um dieses Problem zu lösen. Ein Ansatz wäre, sich in die UIViewController Methoden, die bei einer Orientierungsänderung benachrichtigt werden, z didRotateFromInterfaceOrientation:, und nehmen Sie die erforderlichen Änderungen manuell vor. Ein besserer Ansatz für unser Setup ist jedoch die einfache Konfiguration von autoresizingMask Eigenschaft auf unseren Oberflächenelementen, um sich flexibel an die Bildschirmänderungen automatisch anzupassen.
Wenn Sie neu in der sind autoresizingMask Eigentum, mach dir keine Sorgen. Sie haben es richtig im Interface Builder gesehen, wo Sie es grafisch wie folgt konfigurieren können:
Was Sie möglicherweise nicht erkannt haben, ist, dass Sie die Eigenschaft auch manuell im Code festlegen können (Hinweis: Wenn Sie dies im Interface Builder tun können, können Sie es im Code generell tun). Dies ermöglicht Ihnen die Steuerung wie automatisierte Ausrichtungsänderungen stattfinden. Die möglichen Ausrichtungsoptionen sind wie folgt:
Weil der autoresizingMask property ist eine Ganzzahl-Bitmaske. Sie können mehrere Werte zu einem einzigen Wert kombinieren, indem Sie sie mit dem bitweisen OR-Operator kombinieren.
Zum Beispiel, wenn ich einstellen wollte myContentView alle haben UIViewAutoresizing Optionen, ich könnte das tun:
myContentView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleBottomMargin;
Oder wenn ich wollte myContentView Um kein autoresizing-Verhalten zu haben, könnte ich das so konfigurieren:
myContentView.autoresizingMask = UIViewAutoresizingNone;
Wir werden diese Technik verwenden, um das AutoSizing-Verhalten der folgenden Schnittstellenobjekte zu konfigurieren: contentsButton, pageSlider, tableOfContentsView, bookHeading, bookOneSubtitle, bookTwoSubtitle, und sectionButton.
Jede der folgenden Änderungen wird in vorgenommen WOTWViewController.m, und die entsprechende Zeilennummer für die Änderung wird zusammen mit dem Quellcode aufgeführt.
Accentsconagua
contentsButton MaskecontentsButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin;
pageSlider Maskeself.pageSlider.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
tableOfContentsView MasketableOfContentsView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;
bookHeading MaskebookHeading.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
bookOneSubtitle MaskebookOneSubtitle.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
bookTwoSubtitle MaskebookTwoSubtitle.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
sectionButton MaskesectionButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth;
sectionButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth;
Nachdem Sie alle oben genannten Eigenschaften hinzugefügt haben, können Sie das Projekt speichern, erstellen und ausführen. Sie sollten feststellen, dass das Inhaltsverzeichnis jetzt viel besser in Querformat aussieht! Wenn Sie jedoch scharfsinnig sind, werden Sie einen offensichtlichen Fehler bemerken: Die Auflistung des Inhaltsverzeichnisses "BOOK I" ist im Querformat vertikal abgeschnitten.
UIScrollView Es gibt natürlich mehrere Möglichkeiten, mit der Tatsache umzugehen, dass wir nicht genügend vertikalen Platz haben, um die Auflistung des BOOK I-Kapitels anzuzeigen. Wir könnten beispielsweise versuchen, die Höhe der Schaltflächen zu ändern oder die Auflistung so zu positionieren, dass sie horizontal und nicht vertikal fließt. Meiner Meinung nach ist die beste Benutzererfahrung die Verwendung einer Bildlaufansicht, um zu steuern, welcher Teil der Liste sichtbar ist.
Dies ist leicht genug zu bewerkstelligen. Beginnen Sie mit der Deklaration eines neuen UIScrollView halten Sie unsere Kapitel-Tasten in der WOTWViewController.h Datei:
UIScrollView * sectionScrollView;
Dann initialisieren Sie diese Variable in der WOTWViewController.m viewDidLoad Methode und stellen Sie die Autoresizing-Maske ein:
sectionScrollView = [[UIScrollView-Zuordnung] initWithFrame: CGRectMake (20.0f, 100.0f, 530.0f, 700.0f)]; sectionScrollView.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleWidth;
Stellen Sie sicher, dass Sie dies später freigeben.
Als nächstes stellen Sie die colYOffset und colXOffset Variablen auf 0,0f für ihren Anfangswert und aktualisieren dann den Code in beiden zum Schleifen zum Hinzufügen der sectionButton Objekte als Unteransichten von sectionScrollView anstatt tableOfContentsScrollView:
[sectionScrollView addSubview: sectionButton];
[sectionScrollView addSubview: sectionButton];
Dann stellen Sie das ein contentSize Eigenschaft der Scrollansicht:
sectionScrollView.contentSize = CGSizeMake (523.0f, 680.0f);
Das contentSize Diese Eigenschaft steuert die Länge und Höhe des scrollbaren Inhalts und muss festgelegt werden, damit dieses Objekt ordnungsgemäß funktioniert. Die angegebenen Werte sind A) die zweite Spalte X Versatz plus 250 (die Länge einer einzelnen Schaltfläche) und B) die erste Spalte Y Versatz, da die erste Spalte die größere vertikale Höhe hat.
Fügen Sie nun die folgenden Codezeilen hinzu:
sectionScrollView.hidden = YES; [tableOfContentsView addSubview: sectionScrollView];
Oben fügen wir die Bildlaufansicht zur Hauptansicht des Inhaltsverzeichnisses hinzu, aber wissen Sie, warum wir sie zuerst ausblenden? Erinnern Sie sich an ein vorheriges Tutorial in dieser Serie, dass wir das Inhaltsverzeichnis manuell aktivieren und deaktivieren mussten UIButton Objekte, um zu verhindern, dass Blätter beim Berühren die Kapitelauswahl vorzeitig auslösen. Alle Schaltflächenobjekte sind jetzt in der Bildlaufansicht eingebettet. Wir möchten jedoch weiterhin verhindern, dass die Bildlaufansicht Berührungsereignisse erfasst, wenn sie nicht angezeigt werden.
Da die Schaltflächenobjekte nicht mehr manuell zwischen aktivierten und deaktivierten Status umgeschaltet werden müssen, suchen Sie WOTWViewController.m für "enabled = YES" und "enabled = NO", und entfernen Sie alle Zeilen, die für das Umschalten dieses Werts auf den Abschnittsschaltflächen verantwortlich waren, einschließlich derjenigen innerhalb der displayTableOfContents und contentsButtonPressed: Methoden.
Nachdem Sie die oben genannten Zeilen entfernt haben, nehmen Sie die folgenden Änderungen vor, um stattdessen die Bildlaufansicht auszublenden und anzuzeigen:
- (void) displayTableOfContents // Den Seitenschieber ausblenden self.pageSlider.hidden = YES; // Zeige die Scroll-Ansicht sectionScrollView.hidden = NO; // Animiere den Übergang mit einer horizontalen Drehung von rechts nach links [UIView beginAnimations: nil context: nil]; [UIView setAnimationDuration: 0.5f]; [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView: self-> leavesView Cache: YES]; [self-> leavesView bringSubviewToFront: tableOfContentsView]; [UIView commitAnimations]; - (void) contentsButtonPressed: (UIButton *) sender // Aktualisieren der PDF-Anzeigeposition self-> leavesView.currentPageIndex = sender.tag; // Anzeige des UISliders self.pageSlider.hidden = NO; self.pageSlider.value = (Float) Sender.tag; // Animiere das PDF zurück an den Anfang der BlätterAnsicht [UIView beginAnimations: nil context: nil]; [UIView setAnimationDuration: 0.5f]; [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft forView: self-> leavesView Cache: YES]; [self-> leavesView sendSubviewToBack: tableOfContentsView]; [UIView commitAnimations]; // Die zum Inhaltsverzeichnis hinzugefügte Bildlaufansicht ausblenden, wenn sie sich nicht in der Ansicht befindet sectionScrollView.hidden = YES;
Die Bildlaufansicht sollte jetzt ausgeblendet sein, wenn die Blätteransicht angezeigt wird, und angezeigt werden, wenn das Inhaltsverzeichnis angezeigt wird. Speichern, erstellen und führen Sie Ihr Projekt aus. Alle unsere benutzerdefinierten Oberflächenobjekte sollten sich jetzt an Orientierungsänderungen anpassen!
Mein Ziel beim Schreiben dieser Serie war es, zu zeigen, wie Sie nützliche Funktionen zu einer Leaves-Standardimplementierung hinzufügen, und Sie können iOS-SDK-Programmier-Tricks und -Techniken anhand von Beispielen lernen. Ich hoffe, Sie haben mindestens ein paar interessante Nuggets gelernt und fanden, dass diese Serie in Ihren eigenen Projekten hilfreich ist. Fühlen Sie sich frei, unten einen Kommentar zu hinterlassen und mich wissen zu lassen, ob dies geholfen hat!
Im Verlauf dieser Serie haben wir sowohl Vorteile als auch Einschränkungen bei der Verwendung des Leaves-Projekts gesehen. Ich persönlich liebe es, wie Sie mit Leaves schnell die grundlegende Curl-Animation für die linke / rechte Seite erstellen können, während Sie eine Reihe verschiedener Inhaltsformate (einschließlich PDF) unterstützen. Wie Sie jedoch im Verlauf dieser Serie gesehen haben, ist die Implementierung des Standardprojekts sehr aufwendig, um für die meisten professionellen Projekte geeignet zu sein. Beim Versuch, einen Slider und ein Inhaltsverzeichnis hinzuzufügen, mussten wir uns mit dem Kernprojektcode befassen, und wir haben nicht einmal einige der komplexeren, aber häufig benötigten Funktionen wie Texthervorhebungen, Lesezeichen, Anmerkungen usw. erstellt.
Natürlich ist Leaves nicht die einzige Option, um diese Art von Funktionalität zu erreichen. In meinem ersten Beitrag erwähnte ich FlipView, HMGLTransitions und das PaperStack-Projekt (noch nicht veröffentlicht am 06.10.2011). Es gibt auch eine Reihe von Leaves-Projektgabeln und wahrscheinlich noch einige weitere Projekte, die ich hier nicht aufgeführt habe.
Meine Frage an die Community lautet: Entsprechen die aktuellen Open-Source-Optionen zum Erstellen von eReader-Anwendungen Ihren Anforderungen? Wenn nein, warum nicht? Welche Funktionen möchten Sie zu bestehenden Projekten hinzufügen, die derzeit nicht verfügbar sind? Soundoff unten. Ich erwäge derzeit, entweder einem der bereits bestehenden eReader-Projekte beizutreten oder vielleicht sogar ein neues zu starten, also würde ich gerne Ihr Feedback hören!
