Share
Med iPad og den nye iPhone 4 blir stadig mer populær, ser det ut til at iOS-enheter raskt går mot høyere oppløsning. Høyere oppløsning skjermer gir åpenbart en bedre brukeropplevelse, men for å utnytte dette må utviklere oppdatere programmene sine. Denne artikkelen vil forklare hva alt oppstyret handler om, og hvordan du får dine applikasjoner til å se bra ut på høyere oppløsninger ved å demonstrere to teknikker for grafikkoptimeringer.
IPad har en større skjerm, og så har den en større oppløsning. Med iPhone 4 gjorde Apple imidlertid noe annet: de økte oppløsningen uten å endre skjermens fysiske størrelse. Dette gir en høyere pixeldensitet, piksler er mindre og mer tett pakket. I en kvadratmeter av iPhone 4-skjermen er det rundt 106 000 piksler (ved 326 PPI, eller piksler per tommer), mens de eldre modellene bare har 26 tusen (på 163 PPI) i en tomme - 4 ganger mindre! Dette gjør at grafikk på skjermen virker som kontinuerlige linjer, fordi øyet ditt ikke kan se de enkelte pikslene. Apple kaller denne teknologien "Retina Display" fordi de hevder det menneskelige øye (netthinnen) ikke fysisk kan se pikslene i denne oppløsningen.
En av de store tingene med iPhone-utvikling, sammenlignet med andre plattformer, er at du vet nøyaktig størrelsen og oppløsningen din søknad vil bli vist på, slik at du kan designe og lage for å imøtekomme de dimensjonene spesifikt. For å beholde den fordelen så mye som mulig, har Apple doblet oppløsningen nøyaktig - hver piksel erstattes av 4 mindre piksler. Dette betyr at selv om du velger å ikke dra nytte av Retina Display, vil søknaden din se ut som den gjør i dag.
På iPad, hvor både skjermen og oppløsningen er større, har Apple tillatt "Pixel Doubling", som blåser opp programmene til 4 ganger sin størrelse. Når det gjelder piksler, er søknaden din etter fordobling den samme størrelsen som det ville være på Retina Display. På denne måten må du optimalisere søknaden din bare én gang, for å få dobbel oppløsning - på iPad og iPhone 4 (Med mindre du selvfølgelig vil lage en bestemt iPad-versjon.)
Du må holde en iPhone 4 i dine hender for å virkelig sette pris på skjermen og viktigheten av å oppdatere programmets grafikk. Optimerte applikasjoner ser merkbart bedre ut enn de som ikke er, og oppdatering er ikke så vanskelig som du kanskje tror.
Allerede uten å gjøre noe, vil noen standard Apple-leverte kakao-UI-elementer gjengis med en høyere oppløsning på iPhone 4. Tekst, Webvisninger og lignende oppdateres også automatisk, så hvis du bygger programmet helt ut av standard UI-elementer du har ingen optimalisering for å få til netthinnen! Imidlertid krever noen bilder eller bildebaserte egendefinerte brukergrensesnittelementer du måtte ha i søknaden litt mer arbeid.
Det første trinnet er å lage en høyere oppløsning av hver av bildene dine. Dette vil bli demonstrert i Photoshop, men de samme prinsippene kan brukes i et grafikkprogram.
Når du designer et grensesnitt i Photoshop, bør du bruke ikke destruktive metoder så mye som mulig. Å skape figurer med vektorgrafikk, ved hjelp av smarte objekter og lagstiler i stedet for filtre, gir større fleksibilitet under designprosessen. Når alt er redigerbart, er det enklere å lage små endringer, og det blir veldig enkelt å lage høyere oppløsning.
Som en demonstrasjon, vil vi lage en enkel knapp og deretter lage en høyoppløselig versjon av den.
Du bør jobbe med hovedgrensesnittet i den "gamle" oppløsningen på 320x480. Dette vil tillate deg å få en bedre ide om hva du oppretter. Å jobbe fra begynnelsen på hele 640x960-størrelsen kan være forvirrende, fordi det ser stort ut på de fleste skjermer - og når du ser på ditt design på iPhone, kan du oppdage at knappene som virket store i Photoshop, plutselig er små. De fleste iOS-enhetene er fremdeles 320x480, og du bør målrette mot denne oppløsningen når du designer.
Lag et nytt dokument, ved 320 × 480 og 163 ppi (iPhone 3G) og bruk Shape Tool, tegne et avrundet rektangel. Pass på at du lager et "Formlag" og ikke tegner en rasterform eller en bane. Stil rektangelet slik at det ser ut som en knapp med lagstiler som Gradient Overlay, Stroke, Inner Glow og Drop Shadow for å gi den dybde og form.
For å lage den store versjonen, velg Bildestørrelse fra bildemenyen og doble ppi til 326, iPhone 4 ppi. Dette vil doble bildestørrelsen til 640 × 960. Kontroller at Skala stiler er merket og klikk OK. Pass på at alt skaleres riktig. Du kan legge til små detaljer eller subtile teksturer som virkelig vil gjøre søknaden din skinnende på Retina Display. Du har nå en større versjon av brukergrensesnittet ditt, klar til å skille og lagre.
Nå som vi har grensesnittet i Retina-oppløsning, må vi søke det på vår søknad. Det er to måter å gjøre det på, hver med fordeler og ulemper.
Den offisielle måten å legge til høyoppløselig støtte til søknaden din, er å ha to versjoner av hvert bilde, en i "vanlig" oppløsning og en i dobbeltoppløsning. Når søknaden din vises på Retina Display, lastes det større bildet automatisk. Denne metoden gir full og nøyaktig kontroll over hvordan søknaden din vil se ut i hvert tilfelle, og det er veldig enkelt å søke på eksisterende programmer.
Fullstørrelses bildefilen skal bli oppkalt, men du vil, for eksempel "Button.png". Bruk dette bildet navn i koden din og Interface Builder hvor du vil referere bildet. Dobbelstørrelsesbildet skal være dobbelt så stort som det tilsvarende mindre bildet og oppkalt nøyaktig det samme med "@ 2x" vedlagt navnet. I vårt eksempel vil vi kalle det "[email protected]".
Dessverre vil denne teknikken ikke fungere på iPad; en pikseldoblet applikasjon vil ikke laste ressursen med høyere oppløsning. Dette vil trolig bli behandlet i fremtiden iOS 4-oppdateringen som er planlagt å komme til iPad i høst.
En alternativ metode for å legge til høyoppløselig støtte bruker skaling. Du laster bare den store bildressursen, og deretter skaler den til 50% i koden din eller ved hjelp av Interface Builder.
For å gjøre dette ved hjelp av Interface Builder, opprett en ny Round Rect Button (UIButton) og åpne Egenskaper Inspector (Command-1.) Sett knappetypen til "Custom" og velg det store bildet som Bakgrunn. Skriv hva du vil i Tittelattributtet og stil knappen videre hvis du vil. For å gjøre vår knapp riktig størrelse, gå til kategorien Størrelse og endre bredden og høyden på knappen til halvparten av bildet. Knappbildet, for eksempel, er 300x102, så knappen vil være 150x51. Fordi vi skalerer med nøyaktig 50%, ser den enkle skaleringsalgoritmen som brukes av Cocoa Touch, ganske bra ut, da bildet vårt er laget av 2 piksler og jevntallede pikselstørrelser, som er enkle å dele med 2.
Resultatet er så godt som det spesifikke bildet når skalert, men dette kan variere avhengig av bildet som brukes. Den samme teknikken kan enkelt tilpasses til bilder og tilpassede visninger for samme effekt. Ved å bruke denne måten får du mindre kontroll over hvordan søknaden din vil se på en mindre skjerm, men det har noen fordeler. Apppakken inneholder et av hvert bilde i stedet for en mindre og større kopi. Hvis søknaden din har mange bilder, kan det faktisk gjøre en forskjell i filstørrelsen. Videre er dette for øyeblikket den eneste måten å ha høyoppløselig grafikk på iPad når pixeldobling. Tekst- og Apple-grensesnittelementer vil fortsatt bli pixelert, men bilder med høyere oppløsning vil forbedre brukeropplevelsen til Apple legger til offisiell støtte for dobbeltoppløsning på iPad.
Accentsconagua