GUIDE: Tilpass apps til iPhone 5

[Jørnan]

Nye iPhone 5 har en høyere skjerm enn tidligere iPhone-modeller. I motsetning til da Apple lanserte iPhone 4 med retina-skjerm så er det ikke bare å skalere opp applikasjonen denne gangen. Denne guiden viser deg hvordan du som utvikler kan tilpasse dine apps til iPhone 5 - på tre forskjellige måter.



De tre forskjellige metodene som blir vist er:

• Autosizing


• Ren programmering


• Nytt storyboard

I denne guiden vil det bli brukt iOS 5.1 (fungerer utmerket med iOS 6 også) og Xcode 4.5. Det forutsettes litt kunnskaper om programmering til iOS siden dette er en guide for å tilpasse allerede eksisterende applikasjoner til iPhone 5. Jegerprøven som finnes i App Store vil bli brukt som eksempel for å vise hvordan det gjøres med ekte applikasjoner.

Uansett hvilken metode man ønsker å bruke så er det enkelte ting som må gjøres felles. For at iPhone 5 skal vise applikasjonen over hele skjermen og ikke ha en sort stripe i bunn og topp, må det legges til et oppstartsbilde for 4” skjermer. For å gjøre dette lages et bilde som heter “Default-568h@2x.png” på 640 x 1136 piksler av typen PNG. Dette brukes som oppstartsbilde på lik linje med bildene (Launch Images) som allerede eksisterer for vanlig skjerm og retina-skjerm.

Tilpassing med autosizeing

Autosizing er definitivt den enkleste måten å tilpasse applikasjonen på. Marker et av elementene på skjermen og trykk Alt+Cmd+5. Du vil nå få opp Size Inspector.

Her er det noe som kalles Autosizing. Hold musepekeren over den hvite firkanten med røde streker for å se effekten på høyre side. Klikk for å aktivere/deaktivere på strekene og se hva som skjer. For at elementene skal flytte seg korrekt på skjermen ønsker vi at elementene skal ha en fast avstand fra bunn istedenfor toppen som er standard. Dette vil flytte elementene nedover når skjermen blir lenger.









Trykk nå på knappen som utvider skjermen til 4”:



Nå ser vi at elementene har flyttet seg på skjermen! Dersom du har et bakgrunnsbilde, slik som Jegerprøven blir bildet strukket. Dette kan løses ved å trykke Alt+Cmd+4 og endre “Mode” til Aspect Fill”. Det endelige resultatet blir da som følger:




Fordeler:

• Enkelt å bruke


• Ingen ekstra kode

Ulemper:

• Elementer blir ikke alltid plassert der man ønsker

Tilpassing med programmering

Den andre metoden innebærer ikke å røre Interface Builder i det hele tatt, men å gjøre alle endringer i kildekoden. Det første vi må gjøre her da er å finne ut om applikasjonen kjører på en enhet med 3,5” eller 4” skjerm. For å gjøre dette skriver vi følgende kode i viewDidLoad:


if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
if ([[UIScreen mainScreen] respondsToSelector: @selector(scale)]) {
CGSize result = [[UIScreen mainScreen] bounds].size;
CGFloat scale = [UIScreen mainScreen].scale;
result = CGSizeMake(result.width * scale, result.height * scale);
if(result.height == 1136){
//Gjør nødvendige endringer
}
}
}

Der det står “//Gjør nødvendige endringer” så legger du inn koden under, med riktig navn på element og de koordinatene og størrelsen som er ønsket.

navnPåElement.frame = CGRectMake(X, Y, Bredde, Høyde);

Dersom applikasjonen din støtter rotering må du huske å ta hensyn til dette.

Fordeler:

• Du kan spesifisere helt nøyaktig hvordan applikasjonen skal se ut

Ulemper:

• Tungvindt


• Lett å gjøre feil


• Må ta hensyn til rotering

Nytt Storyboard

Den siste løsningen er å laget et helt nytt storyboard. Denne innebærer litt kode og enkle endringer i Interface Builder. Først skal vi opprette et nytt storyboard basert på det gamle. Trykk Cmd+N, velg Storyboard, trykk Next, velg “iPhone” og trykk Next igjen. Gi deretter et passende navn, i dette eksemplet er det brukt “MainStoryboard-568h@2x”.
Høyreklikk nå på ditt originale Storyboard og velg “Open as” -> “Source code”. Kopier deretter alt. Gjør det samme i ditt nye Storyboard og erstatt all koden der med den nye koden du kopierte ut nettopp. Velg deretter å åpne som “Interface Builder - iOS Storyboard”. Nå har du kopiert all informasjonen fra originalt Storyboard og kan begynne å gjøre endringer. Utvid visningen til 4” skjerm og tilpass slik du vil ha det.

Til slutt skal vi sørge for at applikasjonen laster inn korrekt Storyboard ved oppstart. Lim inn koden nedenfor i AppDelegate.m i application didFinishLaunchingWithOptions-metoden.


if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
if ([[UIScreen mainScreen] respondsToSelector: @selector(scale)]) {
CGSize result = [[UIScreen mainScreen] bounds].size;
CGFloat scale = [UIScreen mainScreen].scale;
result = CGSizeMake(result.width * scale, result.height * scale);

if(result.height == 960){
NSLog(@"iphone 4, 4s retina resolution");
}
if(result.height == 1136){
NSLog(@"iphone 5 resolution");
UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard-568h@2x" bundle:nil];

UIViewController *mainViewController = [storyboard instantiateInitialViewController];

_window.rootViewController = mainViewController;
}
}
else{
NSLog(@"iphone standard resolution");
}
}
else{
if ([[UIScreen mainScreen] respondsToSelector: @selector(scale)]) {
NSLog(@"ipad Retina resolution");
}
else{
NSLog(@"ipad Standard resolution");
}
}


Det er mulig å redusere koden til å kun omhandle iPhone 5 også, men denne gir muligheten for å sjekke etter alle skjermtyper dersom det skulle være aktuelt. Husk å endre navnet på ditt Storyboard dersom det er annerledes enn i eksemplet!

Fordeler:

• Du kan spesifisere helt nøyaktig hvordan applikasjonen skal se ut


• Minimalt med kildekode som må endres

Ulemper:

• Alle endringer i applikasjonen i ettertid må gjøres på to Storyboards

Jegerprøven endte opp med å lage et nytt Storyboard fordi dette gir både god oversikt, er enkelt å bruke og gir mulighet for å designet GUI akkurat slik man ønsker.

[Larsaronen]

Syntes autolayout burde bli nevnt her..

Autolayout er nytt i iOS 6 (kom til OS X i Lion), og er definitivt den beste måten å tilpasse brukergrensesnittet i forhold til skjermstørrelse. Autolayout kan brukes både i interfacebuilder og i kode.

Autolayout er også det som er aktivert som default hvis du lager nye apps..

Dersom man ønsker ett annet brukergrensesnitt for iPhone 5 så ville jeg anbefalt egen storyboard..

[i-Simen]

Flott guide, lærte noe selv som utvikler, men jeg bruker en kombinasjon av springs and struts (Autosizeing) og kode, synes det fungerer veldig flott for mitt bruk.

Forresten...

Du kan også bruke;


CGSize screenBounds = [[UIScreen mainScreen] bounds].size;

if (screenBounds.heigt == 568) {

NSLog(@"iPhone 4 tommer");

}else if (screenBounds.heigt == 480) {

NSLog(@"iPhone 3,5 tommer");

}


Selve pikselstørrelsen på skjermen er 640 x 1136, men bounds er 568, som splashscreen viser.