Share
Mit dem iPad und dem neuen iPhone 4 werden iOS-Geräte auf dem Weg zu Displays mit höherer Auflösung. Bildschirme mit höherer Auflösung sorgen offensichtlich für ein besseres Benutzererlebnis. Um dies jedoch nutzen zu können, müssen Entwickler ihre Anwendungen aktualisieren. In diesem Artikel wird erläutert, worum es bei dem ganzen Aufruhr geht und wie Sie Ihre Anwendungen bei höheren Auflösungen gut aussehen lassen, indem Sie zwei Techniken für die Grafikoptimierung demonstrieren.
Das iPad hat einen größeren Bildschirm und damit eine größere Auflösung. Mit dem iPhone 4 hat Apple jedoch etwas anderes getan: Sie haben die Auflösung erhöht, ohne die physische Größe des Bildschirms zu verändern. Dies führt zu einer höheren Pixeldichte, Pixel sind kleiner und enger gepackt. In einem Quadratzentimeter des iPhone 4-Bildschirms gibt es rund 106 Tausend Pixel (bei 326 PPI oder Pixels per Inch), während die älteren Modelle nur etwa 26 Tausend Pixel (bei 163 PPI) in einem Zoll haben - viermal weniger! Dadurch erscheinen Grafiken auf dem Bildschirm als durchgezogene Linien, da Ihr Auge die einzelnen Pixel nicht sehen kann. Apple nennt diese Technologie "Retina-Display", da das menschliche Auge (die Retina) die Pixel bei dieser Auflösung nicht physisch sehen kann.
Im Vergleich zu anderen Plattformen ist es eines der großen Dinge bei der iPhone-Entwicklung, dass Sie die genaue Größe und Auflösung kennen, in der Ihre Anwendung angezeigt werden soll. Sie können also speziell für diese Dimensionen entwerfen und erstellen. Um diesen Vorteil so gut wie möglich zu halten, hat Apple die Auflösung exakt verdoppelt - jedes Pixel wird durch 4 kleinere Pixel ersetzt. Dies bedeutet, dass Ihre Anwendung auch dann aussehen wird, wenn Sie sich dafür entscheiden, das Retina-Display nicht zu nutzen.
Auf dem iPad, wo sowohl der Bildschirm als auch die Auflösung größer sind, hat Apple die "Pixelverdoppelung" zugelassen, die Ihre Anwendungen auf das Vierfache ihrer Größe aufbläst. In Bezug auf Pixel hat Ihre Anwendung nach dem Verdoppeln dieselbe Größe wie auf dem Retina-Display. Auf diese Weise müssen Sie Ihre Anwendung nur einmal optimieren, um die Auflösung zu verdoppeln - auf dem iPad und dem iPhone 4 (es sei denn, Sie möchten natürlich eine bestimmte iPad-Version erstellen.)
Sie müssen ein iPhone 4 in den Händen halten, um den Bildschirm wirklich zu schätzen und zu wissen, wie wichtig es ist, die Grafik Ihrer Anwendung zu aktualisieren. Optimierte Anwendungen sehen deutlich besser aus als andere, und das Aktualisieren ist nicht so schwer, wie Sie vielleicht denken.
Ohne dass Sie etwas tun müssen, werden alle von Apple bereitgestellten Cocoa-Oberflächenelemente auf dem iPhone 4 mit einer höheren Auflösung wiedergegeben. Text, Webansichten und Ähnliches werden ebenfalls automatisch aktualisiert. Wenn Sie also Ihre Anwendung vollständig aus Standard-Oberflächenelementen zusammenstellen, verfügen Sie nicht über entsprechende Elemente Keine Optimierungen für die Retina-Anzeige! Für Bilder oder bildbasierte benutzerdefinierte Benutzeroberflächenelemente, die Sie möglicherweise in Ihrer Anwendung verwenden, ist jedoch noch etwas Arbeit erforderlich.
Der erste Schritt besteht darin, für jedes Ihrer Bilder eine höhere Auflösung zu erstellen. Dies wird in Photoshop gezeigt, aber die gleichen Prinzipien können in jedem Grafikprogramm angewendet werden.
Wenn Sie in Photoshop eine Benutzeroberfläche entwerfen, sollten Sie möglichst zerstörungsfreie Methoden verwenden. Das Erstellen Ihrer Formen mit Vektorgrafiken, die Verwendung intelligenter Objekte und Ebenenstile anstelle von Filtern ermöglichen eine größere Flexibilität während des Entwurfsprozesses. Wenn alles bearbeitet werden kann, sind kleine Änderungen einfacher und das Erstellen von Grafiken mit höherer Auflösung wird sehr einfach.
Zur Demonstration erstellen wir eine einfache Schaltfläche und erstellen dann eine hochauflösende Version.
Sie sollten an der Hauptschnittstelle in der "alten" Auflösung von 320x480 arbeiten. Auf diese Weise haben Sie eine bessere Vorstellung davon, was Sie erstellen. Das Arbeiten mit der gesamten Größe von 640 x 960 kann von Anfang an verwirrend sein, da es auf den meisten Monitoren riesig aussieht. Wenn Sie Ihr Design auf dem iPhone betrachten, werden Sie feststellen, dass die in Photoshop großen Tasten plötzlich klein sind. Die meisten iOS-Geräte sind immer noch 320x480, und Sie sollten beim Entwerfen auf diese Auflösung abzielen.
Erstellen Sie ein neues Dokument mit 320 × 480 und 163 ppi (iPhone 3G) und zeichnen Sie mit dem Shape-Tool ein abgerundetes Rechteck. Stellen Sie sicher, dass Sie eine "Formebene" erstellen und keine Rasterform oder einen Pfad zeichnen. Gestalten Sie das Rechteck mit Ebenenstilen wie Verlaufsüberlagerung, Strich, Inneres Glühen und Schlagschatten wie eine Schaltfläche, um Tiefe und Form zu erhalten.
Um eine große Version zu erstellen, wählen Sie im Menü Bild die Option Bildgröße aus, und doppelklicken Sie auf 326, iPhone 4 ppi. Dadurch wird unsere Bildgröße auf 640 × 960 verdoppelt. Stellen Sie sicher, dass Skalierungsstile aktiviert ist, und klicken Sie auf OK. Stellen Sie sicher, dass alles richtig skaliert ist. Sie können kleine Details oder subtile Texturen hinzufügen, die Ihre Anwendung auf dem Retina-Display zum Leuchten bringen. Sie haben jetzt eine größere Version Ihrer Benutzeroberfläche, die zum Schneiden und Speichern bereit ist.
Jetzt, da wir unsere Schnittstelle in Retina-Auflösung haben, müssen wir sie auf unsere Anwendung anwenden. Dafür gibt es zwei Möglichkeiten, jeweils mit Vor- und Nachteilen.
Die offizielle Möglichkeit, Ihrer Anwendung eine hochauflösende Unterstützung hinzuzufügen, besteht darin, zwei Versionen jedes Bildes zu haben, eine in „normaler“ Auflösung und eine in doppelter Auflösung. Immer wenn Ihre Anwendung auf dem Retina Display angezeigt wird, wird das größere Bild automatisch geladen. Diese Methode ermöglicht eine vollständige und genaue Kontrolle über das Aussehen Ihrer Anwendung in jedem Fall und lässt sich sehr einfach auf Ihre vorhandenen Anwendungen anwenden.
Die Bilddatei in voller Größe sollte beliebig benannt werden, z. B. „Button.png“. Verwenden Sie diesen Bildnamen in Ihrem Code und Interface Builder, wo immer Sie auf das Bild verweisen möchten. Das Bild in doppelter Größe sollte doppelt so groß sein wie sein übereinstimmendes kleineres Bild und mit dem Namen "@ 2x" identisch benannt. In unserem Beispiel würden wir es "[email protected]" nennen..
Leider funktioniert diese Technik auf dem iPad nicht. Eine pixelverdoppelte Anwendung lädt die Ressource mit höherer Auflösung nicht. Dies wird voraussichtlich im zukünftigen iOS 4-Update behandelt, das voraussichtlich im Herbst auf das iPad kommt.
Eine alternative Methode zum Hinzufügen einer Unterstützung mit hoher Auflösung ist die Verwendung der Skalierung. Sie laden nur die große Bildressource und skalieren sie in Ihrem Code oder mit dem Interface Builder auf 50%.
Erstellen Sie dazu mit dem Interface Builder eine neue runde Schaltfläche (UIB-Taste) und öffnen Sie den Attribut-Inspektor (Befehlstaste 1). Setzen Sie den Schaltflächentyp auf "Benutzerdefiniert" und wählen Sie das große Bild als Hintergrund aus. Schreiben Sie, was Sie möchten, in das Title-Attribut und gestalten Sie die Schaltfläche weiter, wenn Sie möchten. Wechseln Sie zur Registerkarte Größe, und ändern Sie die Breite und Höhe der Schaltfläche auf die Hälfte des Bilds. Das Bild der Schaltfläche ist beispielsweise 300x102, die Schaltfläche also 150x51. Da wir um genau 50% skalieren, sieht selbst der von Cocoa Touch verwendete einfache Skalierungsalgorithmus ziemlich gut aus, da unser Bild aus 2 Pixelstrichen und geradzahligen Pixelgrößen besteht, die leicht durch 2 zu teilen sind.
Das Ergebnis ist so gut wie das Bild mit einer bestimmten Größe, wenn es skaliert wird. Dies kann jedoch je nach verwendetem Bild variieren. Dieselbe Technik kann leicht an Bilder und benutzerdefinierte Ansichten angepasst werden, um denselben Effekt zu erzielen. Wenn Sie diese Methode verwenden, haben Sie weniger Kontrolle darüber, wie Ihre Anwendung auf einem kleineren Bildschirm aussehen wird, hat jedoch einige Vorteile. Das App-Paket enthält eines von jedem Bild anstelle einer kleineren und größeren Kopie. Wenn Ihre Anwendung viele Bilder enthält, kann sich dies tatsächlich auf die Dateigröße auswirken. Außerdem ist dies derzeit der einzige Weg, um bei Pixelverdopplung hochauflösende Grafiken auf dem iPad zu haben. Text- und Apple-Elemente der Benutzeroberfläche werden immer noch pixeliert, aber Bilder mit höherer Auflösung verbessern die Benutzererfahrung, bis Apple die doppelte Auflösung auf dem iPad offiziell unterstützt.
Accentsconagua