Share
Med iPad och den nya iPhone 4 blir popularitet, verkar det som om iOS-enheter går snabbt mot högupplösta skärmar. Högupplösningsskärmar ger uppenbarligen en bättre användarupplevelse, men för att kunna dra nytta av detta måste utvecklare uppdatera sina applikationer. Den här artikeln kommer att förklara vad all väsen handlar om, och hur du gör dina program ser bra ut på högre upplösningar genom att visa två tekniker för grafikoptimeringar.
IPad har en större skärm, och så har den en större upplösning. Med iPhone 4 gjorde Apple dock något annat: de ökade upplösningen utan att ändra skärmens fysiska storlek. Detta ger en högre pixeldensitet, pixlarna är mindre och tätt packade. I en kvadrat tum av iPhone 4-skärmen finns cirka 106 tusen pixlar (vid 326 PPI, eller Pixlar per tum), medan de äldre modellerna bara har ungefär 26 tusen (vid 163 PPI) i tum - 4 gånger mindre! Detta gör att grafik på skärmen verkar som kontinuerliga linjer, eftersom ditt öga inte kan se de enskilda pixlarna. Apple kallar denna teknik "Retina Display" eftersom de hävdar det mänskliga ögat (näthinnan) inte fysiskt kan se bildpunkterna i denna resolution.
En av de stora sakerna om iPhone-utveckling, jämfört med andra plattformar, är att du vet den exakta storleken och upplösningen som din applikation skulle visas på, så att du kan designa och skapa för att tillgodose dessa dimensioner specifikt. För att hålla den fördelen så mycket som möjligt har Apple dubblet upplösningen exakt - varje pixel ersätts av 4 mindre pixlar. Det betyder att även om du väljer att inte utnyttja Retina Display, kommer din ansökan att se ut som den gör idag.
På iPad, där både skärmen och upplösningen är större, har Apple tillåtit för "Pixel Doubling", vilket blåser upp dina applikationer till 4 gånger dess storlek. När det gäller pixlar är din ansökan efter fördubbling lika stor som den skulle vara på näthinnans skärm. På så sätt behöver du bara optimera din ansökan en gång för dubbla upplösningen - på iPad och iPhone 4 (Om du självklart vill skapa en specifik iPad-version.)
Du måste hålla en iPhone 4 i dina händer för att verkligen uppskatta skärmen och vikten av att uppdatera programmets grafik. Optimerade applikationer ser märkbart bättre ut än de som inte är, och uppdatering är inte så svårt som du kanske tror.
Redan utan att göra något, kommer alla vanliga Apple-tillagda Kakao-UI-element att göra med en högre upplösning på iPhone 4. Text, Webvyer och liknande uppdateras också automatiskt, så om du bygger din applikation helt ut ur standard UI-element du har inga optimeringar för att göra till näthinnan! Men eventuella bilder eller bildbaserade anpassade användargränssnitt som du kanske har i din ansökan kräver lite mer arbete.
Det första steget är att göra en högre upplösningsversion av var och en av dina bilder. Detta kommer att demonstreras i Photoshop men samma principer kan tillämpas i något grafikprogram.
När du utformar ett gränssnitt i Photoshop bör du använda icke destruktiva metoder så mycket som möjligt. Att skapa dina former med vektorgrafik, genom att använda smarta objekt och lagstilar istället för filter, ger större flexibilitet under designprocessen. När allt är redigerbart är det lättare att göra små förändringar, och att skapa en högre upplösningsgrafik blir väldigt enkel.
Som en demonstration kommer vi att skapa en enkel knapp och sedan göra en högupplöst version av den.
Du bör arbeta på huvudgränssnittet i den "gamla" upplösningen "på 320x480. Det här låter dig få en bättre uppfattning om vad du skapar. Att arbeta från början på hela 640x960-storleken kan vara förvirrande, eftersom det ser stort ut på de flesta bildskärmar - och när du tittar på din design på iPhone kan du upptäcka att knapparna som verkade stora i Photoshop är plötsligt små. De flesta iOS-enheter är fortfarande 320x480, och du bör rikta den upplösningen när du utformar.
Skapa ett nytt dokument, 320 × 480 och 163 ppi (iPhone 3G) och använd Formverktyget, rita en rundad rektangel. Se till att du skapar ett "Formlag" och inte ritar en rasterform eller en sökväg. Stil rektangeln för att se ut som en knapp med lagstilar som Gradient Overlay, Stroke, Inner Glow och Drop Shadow för att ge det djup och form.
Om du vill göra den stora versionen väljer du Bildstorlek i bildmenyn och dubblar ppi till 326, iPhone 4 ppi. Detta kommer att fördubbla vår bildstorlek till 640 × 960. Se till att Skalformat är markerat och klicka på OK. Se till att allt skalas upp ordentligt. Du kan lägga till små detaljer eller subtila texturer som verkligen gör din ansökan lysande på näthinnans skärm. Du har nu en större version av ditt användargränssnitt, redo att skära och spara.
Nu när vi har vårt gränssnitt i Retina-upplösning måste vi tillämpa det på vår ansökan. Det finns två sätt att göra det, var och en med fördelar och nackdelar.
Det officiella sättet att lägga till högupplöst stöd till din ansökan är att ha två versioner av varje bild, en i "vanlig" upplösning och en i dubbel upplösning. När din ansökan ses på näthinnans display, laddas den större bilden automatiskt. Den här metoden möjliggör fullständig och exakt kontroll över hur din ansökan kommer att se ut i varje enskilt fall och är väldigt lätt att applicera på dina befintliga applikationer.
Fullstor bildfilen ska namnges men du vill, till exempel "Button.png". Använd detta bildnamn i din kod och gränssnittsbyggare vart du vill referera till bilden. Dubbelstorleksbilden ska vara dubbelt så stor som den matchande mindre bilden och heter exakt samma med "@ 2x" bifogad till namnet. I vårt exempel skulle vi kalla det "[email protected]".
Tyvärr fungerar inte tekniken på iPad. En pixel-dubbel applikation laddar inte upp den högre upplösningsresursen. Detta kommer antagligen att tas upp i framtiden iOS 4 uppdatering som är planerad att komma till iPad i höst.
En alternativ metod för att lägga till högupplösta stöd använder skalning. Du laddar bara den stora bildresursen och sedan skala den till 50% i din kod eller med hjälp av gränssnittsbyggare.
För att göra detta med hjälp av gränssnittsbyggare, skapa en ny Round Rect Button (UIButton) och öppna attribut inspektören (Command-1.) Ställ in knapptypen på "Custom" och välj den stora bilden som bakgrund. Skriv vad du vill ha i Titelattributet och sätt på knappen ytterligare om du vill. För att göra vår knapp rätt storlek, gå till fliken Storlek och ändra bredden och höjden på knappen till hälften av bilden. Knappbilden är till exempel 300x102, så knappen blir 150x51. Eftersom vi scalerar med exakt 50% ser även den enkla skalningsalgoritmen som används av Cocoa Touch ut ganska bra, eftersom vår bild är gjord av 2 pixelsträckor och jämntalade pixelstorlekar, som är lätta att dela med 2.
Resultatet är lika bra som den specifikt dimensionerade bilden när den skalas, men det kan variera beroende på vilken bild som används. Samma teknik kan enkelt anpassas till bilder och anpassade vyer för samma effekt. Med detta sätt får du mindre kontroll över hur din applikation kommer att se ut på en mindre skärm, men det har några fördelar. Apppaketet innehåller en av varje bild istället för en mindre och större kopia. Om din ansökan har många bilder kan det faktiskt göra skillnad i filstorlek. Dessutom är detta för närvarande det enda sättet att ha högupplösta bilder på iPad när pixel-dubblering. Text och Apple UI-element kommer fortfarande att pixeleras, men bilder med högre upplösning förbättrar användarupplevelsen tills Apple lägger till officiellt stöd för dubbel upplösning på iPad.
Accentsconagua