Share
Nu de iPad en de nieuwe iPhone 4 steeds populairder worden, lijkt het erop dat iOS-apparaten snel naar schermen met een hogere resolutie gaan. Schermen met een hogere resolutie zorgen uiteraard voor een betere gebruikerservaring, maar om hiervan te profiteren, moeten ontwikkelaars hun applicaties bijwerken. Dit artikel zal uitleggen waar al het gedoe over gaat en hoe je je applicaties er beter uit laat zien met hogere resoluties door twee technieken voor grafische optimalisaties te demonstreren..
De iPad heeft een groter scherm en heeft dus een grotere resolutie. Met de iPhone 4 deed Apple echter iets anders: ze verhoogden de resolutie zonder de fysieke grootte van het scherm te veranderen. Dit zorgt voor een hogere pixeldichtheid, pixels zijn kleiner en strakker verpakt. In een vierkante centimeter van het scherm van de iPhone 4 zijn er ongeveer 106 duizend pixels (bij 326 PPI of Pixels per Inch), terwijl de oudere modellen slechts ongeveer 26 duizend (bij 163 PPI) in een inch hebben - 4 keer minder! Hierdoor lijken afbeeldingen op het scherm op ononderbroken lijnen, omdat uw ogen de afzonderlijke pixels niet kunnen zien. Apple noemt deze technologie de "Retina Display" omdat ze beweren dat het menselijk oog (het netvlies) de pixels niet fysiek kan zien met deze resolutie.
Een van de geweldige dingen over de ontwikkeling van de iPhone, vergeleken met andere platforms, is dat u de precieze grootte en resolutie kent waarop uw toepassing zou worden weergegeven, zodat u kunt ontwerpen en creëren om specifiek tegemoet te komen aan die dimensies. Om dat voordeel zo veel mogelijk te behouden, heeft Apple de resolutie precies verdubbeld - elke pixel is vervangen door 4 kleinere pixels. Dit betekent dat zelfs als u ervoor kiest om geen gebruik te maken van het Retina-display, uw applicatie er hetzelfde uitziet als vandaag.
Op de iPad, waar zowel het scherm als de resolutie groter zijn, heeft Apple toestemming gegeven voor "Pixelverdubbeling", waarmee uw toepassingen tot vier keer groter worden. In termen van pixels is uw toepassing na het verdubbelen dezelfde grootte als op het Retina-display. Op deze manier moet je je applicatie slechts één keer optimaliseren, voor een dubbele resolutie - op de iPad en de iPhone 4 (tenzij je een specifieke iPad-versie wilt maken).
Je moet een iPhone 4 in handen hebben om het scherm echt te waarderen en het belang van het bijwerken van de grafische afbeeldingen van je applicatie. Geoptimaliseerde applicaties zien er merkbaar beter uit dan diegene die dat niet zijn, en updaten is niet zo moeilijk als je zou denken.
Al zonder iets te doen, zal elke standaard door Apple geleverde Cocoa UI-elementen met een hogere resolutie worden weergegeven op de iPhone 4. Tekst, Webweergaven en dergelijke worden ook automatisch bijgewerkt, dus als je je applicatie helemaal uit standaard UI-elementen bouwt die je hebt geen optimalisaties voor het retina-display! Alle afbeeldingen of op afbeeldingen gebaseerde aangepaste gebruikersinterface-elementen die u mogelijk in uw toepassing hebt, vereisen echter wat meer werk.
De eerste stap is om een versie met hogere resolutie van elk van uw afbeeldingen te maken. Dit wordt gedemonstreerd in Photoshop, maar dezelfde principes kunnen worden toegepast in elk grafisch programma.
Wanneer u een interface in Photoshop ontwerpt, moet u zoveel mogelijk niet-destructieve methoden gebruiken. Het maken van uw vormen met vectorafbeeldingen, met behulp van slimme objecten en laagstijlen in plaats van filters, biedt meer flexibiliteit tijdens het ontwerpproces. Wanneer alles bewerkbaar is, is het maken van kleine wijzigingen eenvoudiger en wordt het maken van afbeeldingen met een hogere resolutie heel eenvoudig.
Als demonstratie zullen we een eenvoudige knop maken en vervolgens een versie met een hoge resolutie maken.
Je zou moeten werken aan de hoofdinterface in de "oude" resolutie "van 320x480. Dit geeft je een beter idee van wat je aan het creëren bent. Vanaf het begin werken op de volledige 640x960-maat kan verwarrend zijn, omdat het er op de meeste monitoren enorm uitziet - en bij het bekijken van je ontwerp op de iPhone zou je kunnen ontdekken dat de knoppen die in Photoshop groot leken opeens klein waren. De meeste iOS-apparaten zijn nog steeds 320x480, en u moet die resolutie richten op het ontwerpen.
Maak een nieuw document, op 320 × 480 en 163 ppi (iPhone 3G) en gebruik het Vormgereedschap om een afgeronde rechthoek te tekenen. Zorg ervoor dat u een "vormlaag" maakt en geen rastervorm of een pad tekent. Style de rechthoek om er uit te zien als een knop met Layer Styles zoals Gradient Overlay, Stroke, Inner Glow en Drop Shadow om het diepte en vorm te geven.
Als u de grote versie wilt maken, selecteert u Afbeeldingsgrootte in het menu Afbeelding en verdubbelt u de ppi in 326, iPhone 4 ppi. Hierdoor wordt onze afbeeldingsgrootte verdubbeld tot 640 × 960. Controleer of Schaalstijlen is aangevinkt en klik op OK. Zorg dat alles goed is opgeschaald. U kunt kleine details of subtiele texturen toevoegen die uw toepassing echt laten stralen op het Retina-display. U hebt nu een grotere versie van uw gebruikersinterface, klaar om in te delen en op te slaan.
Nu we onze interface in Retina-resolutie hebben, moeten we deze toepassen op onze applicatie. Er zijn twee manieren om dat te doen, elk met voor- en nadelen.
De officiële manier om ondersteuning voor hoge resolutie aan uw toepassing toe te voegen is door twee versies van elke afbeelding te hebben, één in "normale" resolutie en één in dubbele resolutie. Wanneer uw toepassing wordt bekeken op het Retina-display, wordt de grotere afbeelding automatisch geladen. Deze methode zorgt voor volledige en nauwkeurige controle over hoe uw applicatie er in elk geval uit zal zien en is zeer eenvoudig toe te passen op uw bestaande applicaties.
Het volledige afbeeldingsbestand moet de naam krijgen die u wilt, zoals "Button.png". Gebruik deze afbeeldingsnaam in uw code en Interface Builder waar u ook naar de afbeelding wilt verwijzen. De afbeelding met dubbele grootte moet twee keer zo groot zijn als de overeenkomende kleinere afbeelding en moet exact hetzelfde worden genoemd met '@ 2x' aan de naam. In ons voorbeeld noemen we dit "[email protected]".
Helaas werkt deze techniek niet op de iPad; een pixel-verdubbelde toepassing laadt de bron met hogere resolutie niet. Dit zal waarschijnlijk worden aangepakt in de toekomstige iOS 4-update die dit najaar naar de iPad komt.
Een alternatieve methode voor het toevoegen van ondersteuning met een hoge resolutie is het gebruik van schaling. U laadt alleen de grote afbeeldingsresource en schaal deze vervolgens naar 50% in uw code of met behulp van Interface Builder.
Om dit te doen met behulp van Interface Builder, maakt u een nieuwe Round Rect-knop (UIButton) en opent u de Attributes Inspector (Command-1.) Stel het knoptype in op "Custom" en selecteer de grote afbeelding als Achtergrond. Schrijf wat je wilt in het kenmerk Titel en style de knop verder als je wilt. Om onze knop de juiste maat te geven, gaat u naar het tabblad Grootte en wijzigt u de breedte en hoogte van de knop in de helft van die van de afbeelding. De knopafbeelding is bijvoorbeeld 300 x 102 pixels, dus de knop is 150 x 51 pixels. Omdat we precies 50% scaleren, ziet zelfs het eenvoudige schaalalgoritme dat door Cocoa Touch wordt gebruikt er redelijk goed uit, aangezien ons beeld bestaat uit 2 pixelstreken en even genummerde pixelgroottes, die gemakkelijk te delen zijn door 2.
Het resultaat is net zo goed als het beeld met de specifieke afmetingen wanneer geschaald, maar dit kan variëren afhankelijk van de gebruikte afbeelding. Dezelfde techniek kan eenvoudig worden aangepast aan afbeeldingen en aangepaste weergaven voor hetzelfde effect. Door op deze manier te gebruiken, heeft u minder controle over hoe uw toepassing eruitziet op een kleiner scherm, maar het heeft een aantal voordelen. De app-bundel bevat een van elke afbeelding in plaats van een kleinere en grotere kopie. Als uw toepassing veel afbeeldingen bevat, kan dit feitelijk een verschil maken in de bestandsgrootte. Bovendien is dit momenteel de enige manier om afbeeldingen met een hoge resolutie op de iPad te hebben bij pixelverdubbeling. Tekst- en Apple UI-elementen zullen nog steeds worden gepixeld, maar afbeeldingen met een hogere resolutie zullen de gebruikerservaring verbeteren totdat Apple officiële ondersteuning voor dubbele resolutie op de iPad toevoegt.
Accentsconagua