Arbeiten mit dem iPhone 5 Display

In diesem Lernprogramm werden die erforderlichen Schritte beschrieben, um sicherzustellen, dass Ihre iOS-Apps auf dem neuen iPhone 5-Bildschirm weiterhin gut aussehen.


Laden Sie die neuesten Tools herunter

Um Apps erstellen zu können, die mit iOS 6 und dem iPhone 5 kompatibel sind, müssen Sie sicherstellen, dass Xcode 4.5 (oder höher) und das iOS 6-SDK auf Ihrem Entwicklungscomputer installiert sind. Bei geöffnetem Xcode auswählen Xcode> Über Xcode Über die Menüleiste können Sie die aktuell installierte Version überprüfen.

Um die neuesten Tools zu erhalten, müssen Sie nach der Registrierung als Apple-Entwickler das Apple Developer Center aufrufen.

Ich würde empfehlen, den zusätzlichen Schritt der Installation der iOS 5.1- und iOS 5.0-Simulatoren und der "Befehlszeilen-Tools" nach der Installation der neuesten Version von Xcode durchzuführen. Wählen Sie dazu Xcode> Voreinstellungen und dann zum gehen Downloads Tab. Installieren Sie die aufgelisteten zusätzlichen Optionen. Wenn Sie dies getan haben, sollte das Fenster so aussehen:


Verwenden Sie ein Standard-Startbild für das iPhone 5

Sie müssen ein Bild mit dem Namen angeben [email protected] in Ihrem Projekt, um das iPhone 5-Display voll ausnutzen zu können. Es mag beliebig erscheinen, aber das Vorhandensein dieser Datei bestimmt, ob Ihre Anwendung im Letterbox-Modus (d. H. Mit schwarzen Balken über und unter dem Inhalt) oder im Vollbildmodus ausgeführt wird.

Natürlich die [email protected] Die Datei hat noch einen anderen Zweck: Es wird das Standardbild angezeigt, wenn Ihre Anwendung auf ein iPhone 5 geladen wird. Diese Funktion hat dieselbe Funktion wie das Default.png Datei für Nicht-Retina-iPhone / iPod touch-Geräte und die [email protected] Datei für das iPhone 4 / 4S.

Bei der Ausführung eines Projekts in Xcode 4.5 ohne [email protected] Datei erhalten Sie möglicherweise ein automatisiertes Popup wie dieses:

Wenn dies der Fall ist, klicken Sie auf "Hinzufügen", damit Xcode einen soliden schwarzen Launcher für Sie erstellt. Denken Sie jedoch daran, es später zu ändern, damit es für Ihre Anwendung besser geeignet ist.

Wenn das Xcode-Popup nicht angezeigt wird, können Sie dieses Bild auf Ihrem Computer speichern und dann in den Xcode-Projektnavigatorbereich ziehen, um es Ihrem Projekt hinzuzufügen. Ein einfaches schwarzes Startbild ist nicht ideal, erfüllt jedoch die Anforderungen und versetzt Ihre App in den Vollbildmodus.

Erstellen und starten Sie Ihr Projekt auf einem iPhone 5. Idealerweise sollten Sie keine weiteren Anpassungen vornehmen! Es gibt jedoch eine Reihe von Gründen, warum Ihre App bei der neuen Auflösung nicht richtig aussieht. In der zweiten Hälfte dieses Lernprogramms werden Debugging-Anwendungen beschrieben, die nach diesem Schritt nicht ordnungsgemäß angezeigt werden.


Übergang zu dynamischen Layouts

iOS-Entwickler wurden im Vergleich zu ihren Android-Kollegen etwas verwöhnt, wenn es um die Layout-Programmierung geht. Zunächst hatten alle iPhone- und iPod touch-Bildschirme die gleiche Bildschirmauflösung: 320 x 480 Pixel. Als 2010 das Retina-Display des iPhone 4 und 4S eingeführt wurde, verdoppelte sich die Bildschirmauflösung auf 640x960 Pixel, jedoch für Entwickler wir sind immernoch Die Größe des Bildschirms kann als 320x480 angegeben werden. Warum? Denn mit iOS 4 hat Apple das Konzept der "logischen Punkte" in UIKit eingeführt. Diese Punkte könnten über das Pixel dynamisch auf physikalische Pixel abgebildet werden contentScaleFactor Eigentum der UIView Klasse. Das contentScaleFactor Anschließend wurde festgelegt, die Auflösungsänderung logisch zu spiegeln, indem der Standardwert 1,0 beim iPhone 3G / 3GS und 2,0 beim 4 / 4S festgelegt wird.

So zitieren Sie aus dem Zeichnungs- und Druckhandbuch von Apple für iOS:


In iOS wird zwischen den Koordinaten, die Sie in Ihrem Zeichencode angeben, und den Pixeln des zugrunde liegenden Geräts unterschieden. Bei der Verwendung nativer Zeichnungstechnologien wie Quartz, UIKit und Core-Animation sind der Zeichnungskoordinatenraum und der Koordinatenraum der Ansicht beide logische Koordinatenräume, wobei die Abstände in Punkten gemessen werden. Diese logischen Koordinatensysteme sind vom Gerätekoordinatenraum entkoppelt, der von den System-Frameworks zur Verwaltung der auf dem Bildschirm angezeigten Pixel verwendet wird.

Das System ordnet Punkte im Koordinatenraum der Ansicht automatisch den Pixeln im Gerätekoordinatenraum zu. Diese Zuordnung ist jedoch nicht immer eins zu eins. Dieses Verhalten führt zu einer wichtigen Tatsache, an die Sie immer denken sollten:

Ein Punkt entspricht nicht unbedingt einem physischen Pixel.

Die Verwendung von Punkten (und des logischen Koordinatensystems) dient dazu, eine einheitliche, geräteunabhängige Ausgabegröße bereitzustellen. Für die meisten Zwecke ist die tatsächliche Größe eines Punktes irrelevant. Das Ziel von points ist es, eine relativ konsistente Skalierung bereitzustellen, die Sie in Ihrem Code verwenden können, um die Größe und Position von Ansichten und gerenderten Inhalten festzulegen. Wie Punkte tatsächlich auf Pixel abgebildet werden, ist ein Detail, das von den Systemframeworks verarbeitet wird. Auf einem Gerät mit einem hochauflösenden Bildschirm kann eine Zeile, die einen Punkt breit ist, beispielsweise zu einer Zeile führen, die zwei physikalische Pixel breit ist. Das Ergebnis ist, dass, wenn Sie den gleichen Inhalt auf zwei ähnliche Geräte zeichnen, von denen nur eines über einen hochauflösenden Bildschirm verfügt, der Inhalt auf beiden Geräten in etwa die gleiche Größe aufweist.

Als iOS-Entwickler hatten wir es dank dieser Innovation recht einfach. Mit der Einführung der Auflösung von 640 x 1136 Pixeln des iPhone 5 wird jedoch bei Verwendung einer vertikalen Größe von 480 Punkten nicht mehr der gesamte verfügbare vertikale Raum ausgefüllt.

Um dies in Aktion zu sehen, nehmen Sie an, dass ein Programmierer versucht, dem Root-View-Controller seiner Anwendung eine benutzerdefinierte Hintergrundansicht programmgesteuert hinzuzufügen. Stellen Sie sich vor, dass der Programmierer diesen Code dafür geschrieben hat:

 UIView * customBackgroundView = [[UIView-Zuordnung] initWithFrame: CGRectMake (0.0f, 0.0f, 320.0f, 480.0f)]; customBackgroundView.backgroundColor = [UIColor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];

Vor dem iPhone 5 hätte der obige Codeblock gut funktioniert. Die 320x480-Logikpunkte würden 640x960 mit dem standardmäßigen Skalierungsfaktor 2.0 des iPhone 4 / 4S entsprechen. Auf dem iPhone 5 wird die Höhe jedoch immer noch auf 960 Pixel abgebildet und wird kurz ausfallen:

Die Lösung dieses Problems ist ziemlich einfach:

 UIView * customBackgroundView = [[UIView-Zuordnung] initWithFrame: CGRectMake (0.0f, 0.0f, self.view.frame.size.width, self.view.frame.size.height)]; customBackgroundView.backgroundColor = [UIColor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];

In diesem Szenario mussten wir nur die Größe der aktuellen Stammansicht dynamisch ziehen, um die neue, benutzerdefinierte Hintergrundansicht über den gesamten Bereich zu platzieren.

Nehmen wir für ein anderes Beispiel an, dass der Programmierer im Programm eine programmgesteuerte Ansicht erstellen wollte loadView: Methode:

 - (void) loadView CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame]; UIView * customView = [[UIView-Zuordnung] initWithFrame: applicationFrame]; customView.backgroundColor = [UIColor redColor]; customView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; self.view = customView; 

Das Anwendungsrahmen Eigentum von UIScreen gibt die Rahmenrechtecke des Rahmenrechtecks ​​zurück, die für das Fenster der aktuellen Anwendung verwendet werden, abzüglich des von der Statusleiste belegten Bereichs (falls sichtbar). Sie können alternativ nur das Begrenzungsrechteck des Bildschirms mit erhalten [[UIScreen mainScreen] Grenzen]. Beide Werte werden in logischen Punkten und nicht in Pixeln zurückgegeben.

Die obigen Codebeispiele sind zwar nützlich, jedoch auch etwas eingeschränkt. In der Praxis müssen Sie sich möglicherweise mit komplexeren Szenarien auseinandersetzen, bei denen viele Unteransichten abhängig von der Bildschirmhöhe des Geräts dynamisch angepasst werden.

Glücklicherweise gibt es mindestens drei verschiedene Ansätze, die Sie dazu verwenden können.

Autoresizing anzeigen

Das UIView Eigentum autoresizingMask ist ein einfaches, aber effektives Mittel, um sicherzustellen, dass sich Subview-Objekte relativ zu ihrem Überblick dynamisch anpassen. Im obigen Codeausschnitt habe ich dies verwendet, um sicherzustellen, dass sowohl die Breite als auch die Höhe des benutzerdefinierten Hintergrundansichtobjekts entsprechend den Ausrichtungsänderungen entsprechend skaliert werden:

 customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

Notiere dass der autoresizingMask Diese Eigenschaft kann auch über den Xcode / Interface Builder visuell gesteuert werden.

Die meisten Anwendungen, die UIKit-Steuerelemente und Standardcontainer verwenden, sollten auf dem iPhone 5 problemlos funktionieren, indem sie die Werte für die Frame-Erstellung kombinieren (wie zuvor gezeigt) und intelligente Eigenschaften für die automatische Größenänderung in Unteransichten festlegen.

Weitere Informationen finden Sie in der offiziellen Apple-Dokumentation und im View-Programmierhandbuch.

Das Auto Layout System

Das neue Auto Layout-System, das mit iOS 6 eingeführt wurde, bietet eine erweiterte Methode zur Steuerung der Ansichtsplatzierung. Auto Layout verwendet ein System von Einschränkungen, um Sichtbeziehungen zu erklären und durchzusetzen. Der einzige Nachteil bei der Verwendung des automatischen Layouts ist, dass es nicht mit iOS 5 und früheren Versionen kompatibel ist.

Weitere Informationen zu Auto Layout sind nicht Gegenstand dieses Tutorials. Wer mehr erfahren möchte, sollte sich den Cocoa Auto Layout Guide von Apple und die WWDC 2012-Einführung in die Auto Layout-Sitzung ansehen.

Gerätetest

Ein anderer Ansatz, den einige verwenden, ist der Versuch, zu prüfen, ob das aktuelle Gerät zur Laufzeit ein iPhone 5 ist. Die am weitesten fortgeschrittene Version davon habe ich in StackOverflow gefunden.

Das Folgende ist eine leicht modifizierte Version der Makros, die im StackOverflow-Beitrag erstellt wurden:

 #define IS_IPHONE ([[[[UIDevice currentDevice] Modell] isEqualToString: @ "iPhone"]) #define IS_IPOD ([[[UIDevice currentDevice] Modell] isEqualToString: @ "iPod touch"]) #define IS_HEIGHT_GTE_568 [] ] .size.height> = 568.0f #define IS_IPHONE_5 (IS_IPHONE && IS_HEIGHT_GTE_568)

Das erste und das zweite Makro prüfen, ob das aktuelle Gerät ein iPhone oder ein iPod touch ist, indem Sie verwenden UIDevice Klasse.

Das dritte Makro prüft, ob die Bildschirmhöhe größer oder gleich dem Fließkommawert 568 ist [[UIScreen mainScreen] Grenzen] Die Nachricht gibt den Begrenzungsrahmen des Anwendungsfensters in logischen Punkten zurück, und 568 logische Punkte werden mit der Standardansicht auf 1136 Pixel abgebildet contentScaleFactor von 1,0.

Das vierte Makro kombiniert schließlich zwei der früheren Makros zu einem IS_IPHONE_5 Makro, das (vorerst) nur TRUE zurückgeben soll, wenn der Code auf einem iPhone 5 ausgeführt wird. Sie könnten die endgültige Version in Ihrem eigenen Code wie folgt verwenden:

 if (IS_IPHONE_5) NSLog (@ "Hey, das ist ein iPhone 5! Nun, vielleicht ... in welchem ​​Jahr?");  else NSLog (@ "Schade, das ist kein iPhone 5 ..."); 

Während der obige Ansatz möglicherweise nützlich ist, ist er auch fehleranfällig. Was passiert zum Beispiel, wenn das iPhone 6 mit völlig neuen Dimensionen veröffentlicht wird? Ich würde, wenn überhaupt möglich, von diesem Ansatz abraten. Bleiben Sie stattdessen bei Automatisch verkleinernden Masken oder Auto-Layout, wenn Sie einen dieser Ansätze zum Laufen bringen können.


Einpacken

In diesem Lernprogramm wurden die verschiedenen verfügbaren Methoden zur Aufnahme des vergrößerten iPhone 5-Displays erläutert. Wenn Sie Schwierigkeiten hatten, sich an die neue Bildschirmgröße anzupassen, haben Sie den Inhalt hoffentlich als hilfreich empfunden!

Fühlen Sie sich frei, Feedback zu hinterlassen, das Sie unten in den Kommentaren haben. Sie können sich auch über Twitter, Google Plus oder LinkedIN mit mir verbinden. Prost!