Share
In deze zelfstudie worden de nodige stappen besproken om ervoor te zorgen dat uw iOS-apps er goed uit blijven zien op het nieuwe iPhone 5-scherm.
Als u apps wilt maken die compatibel zijn met iOS 6 en de iPhone 5, moet u ervoor zorgen dat Xcode 4.5 (of hoger) en de iOS 6 SDK op uw ontwikkelingsmachine zijn geïnstalleerd. Open Xcode en selecteer Xcode> Over Xcode van de menubalk om de momenteel geïnstalleerde versie te controleren.
Om de nieuwste tools te krijgen, moet je na registratie als Apple-ontwikkelaar naar het Apple Developer Center gaan.
Ik zou aanraden de aanvullende stap te nemen om zowel de iOS 5.1- als de iOS 5.0-simulatoren en de "command line-tools" te installeren nadat u de nieuwste versie van Xcode hebt geïnstalleerd. Selecteer om dit te doen Xcode> Voorkeuren en ga dan naar de downloads tab. Installeer de extra opties die worden vermeld. Wanneer u dit hebt gedaan, ziet het venster er als volgt uit:
U moet een afbeelding met de naam opnemen [email protected] in uw project om ten volle te profiteren van het display van de iPhone 5. Het lijkt misschien willekeurig, maar het bestaan van dit bestand is wat bepaalt of uw toepassing in letterbox-modus wordt uitgevoerd (dat wil zeggen met zwarte banden boven en onder de inhoud) of in de modus voor volledig scherm.
Natuurlijk, de [email protected] bestand heeft ook een ander doel: het wordt de standaardafbeelding die wordt weergegeven wanneer je toepassing op een iPhone 5 wordt geladen. Dit heeft dezelfde functie als de Default.png bestand voor niet-retina iPhone / iPod touch-apparaten en de [email protected] bestand voor de iPhone 4 / 4S.
Bij het uitvoeren van een project in Xcode 4.5 zonder de [email protected] bestand, kunt u een automatische pop-up zoals deze krijgen:
Als dat zo is, ga je gang en klik je op "Toevoegen" om Xcode een solide zwarte launcher voor je te laten maken, vergeet niet om het later te veranderen in iets dat meer geschikt is voor jouw toepassing.
Als u de Xcode-pop-up niet ziet, kunt u deze afbeelding op uw computer opslaan en vervolgens naar het Xcode project-navigatorgebied slepen om het toe te voegen aan uw project. Een gewoon zwart opstartbeeld is niet ideaal, maar het voldoet aan de vereisten en plaatst uw app in de modus voor volledig scherm.
Bouw en run uw project op een iPhone 5. Idealiter zou je goed moeten zijn om te gaan zonder verdere aanpassingen! Er zijn echter een aantal redenen waarom uw app er misschien niet goed uitziet in de nieuwe resolutie. De tweede helft van deze zelfstudie behandelt foutopsporingsprogramma's die niet correct worden weergegeven na het volgen van deze stap.
iOS-ontwikkelaars zijn enigszins verwend in vergelijking met hun Android-peers als het gaat om het bekijken van lay-outprogramma's. Om te beginnen hadden alle oorspronkelijke schermen van de iPhone en iPod touch dezelfde weergaveresolutie: 320x480 pixels. Toen het retina-display van de iPhone 4 en 4S in 2010 werd geïntroduceerd, verdubbelde de schermresolutie tot 640x960 pixels, maar ontwikkelaars waren nog kunnen verwijzen naar de schermgrootte in code als 320x480. Waarom? Omdat met iOS 4 introduceerde Apple het concept van "logische punten" in UIKit. Deze punten kunnen dynamisch worden toegewezen aan fysieke pixels via de contentScaleFactor eigendom van de UIView klasse. De contentScaleFactor werd vervolgens ingesteld om logisch de wijziging van de resolutie te weerspiegelen door standaard in te stellen op 1.0 op de iPhone 3G / 3GS en 2.0 op de 4 / 4S.
Om te citeren uit Apple's Handleiding Tekenen en Afdrukken voor iOS:
Het systeem wijst punten in de coördinaatruimte van het aanzicht automatisch toe aan pixels in de ruimte van de apparaatcoördinaten, maar deze toewijzing gebeurt niet altijd één-op-één. Dit gedrag leidt tot een belangrijk feit dat u altijd moet onthouden:
Eén punt komt niet noodzakelijk overeen met één fysieke pixel.
Het doel van het gebruik van punten (en het logische coördinatensysteem) is om een consistente grootte van uitvoer te leveren die apparaatonafhankelijk is. Voor de meeste doeleinden is de werkelijke grootte van een punt niet relevant. Het doel van punten is om een relatief consistente schaal te bieden die u in uw code kunt gebruiken om de grootte en positie van weergaven en gerenderde inhoud te specificeren. Hoe punten daadwerkelijk worden toegewezen aan pixels, is een detail dat wordt afgehandeld door de systeemkaders. Op een apparaat met een scherm met een hoge resolutie kan een regel die één punt breed is, feitelijk resulteren in een lijn die twee fysieke pixels breed is. Het resultaat is dat als u dezelfde inhoud op twee vergelijkbare apparaten tekent, met slechts één met een scherm met een hoge resolutie, de inhoud op beide apparaten ongeveer even groot lijkt te zijn.
Dus als iOS-ontwikkelaars hebben we het dankzij deze innovatie vrij gemakkelijk gehad. Echter, met de introductie van de 640x1136px-resolutie van de iPhone 5 zal een verticaal formaat van 480 punten niet langer alle beschikbare verticale ruimte vullen.
Als u dit in actie wilt zien, ga er dan vanuit dat een programmeur probeert een aangepaste achtergrondweergave programmatisch toe te voegen aan de root view-controller van hun toepassing. Beweer dat de programmeur deze code heeft geschreven om dit te doen:
UIView * customBackgroundView = [[UIView alloc] initWithFrame: CGRectMake (0.0f, 0.0f, 320.0f, 480.0f)]; customBackgroundView.backgroundColor = [UIColor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];
Voorafgaand aan de iPhone 5 zou het bovenstaande codeblok prima hebben gewerkt. De logische punten van 320x480 wijzen naar 640x960 met de standaard 2.0 schaalfactor van de iPhone 4 / 4S. Op de iPhone 5 wordt de hoogte echter nog steeds toegewezen aan 960 pixels en komt deze te kort:
Het oplossen van dit probleem is vrij eenvoudig:
UIView * customBackgroundView = [[UIView alloc] initWithFrame: CGRectMake (0.0f, 0.0f, self.view.frame.size.width, self.view.frame.size.height)]; customBackgroundView.backgroundColor = [UIColor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];
In dit scenario moesten we alleen de grootte van de huidige basisweergave dynamisch trekken om de nieuwe, aangepaste achtergrondweergave over het hele gebied te plaatsen.
Laten we voor een ander voorbeeld aannemen dat de programmeur een nieuwe weergave programmatisch wilde creëren in de loadView: methode:
- (void) loadView CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame]; UIView * customView = [[UIView-toewijzing] initWithFrame: applicationFrame]; customView.backgroundColor = [UIColor redColor]; customView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; self.view = customView;
De applicationFrame eigendom van UIScreen retourneert de kaderrechthoekgrenzen die voor het venster van de huidige toepassing zijn gebruikt, minus het gebied dat wordt ingenomen door de statusbalk (indien zichtbaar). U kunt ook alleen de begrenzende rechthoek van het scherm krijgen [[UIScreen mainScreen] bounds]. Beide waarden worden geretourneerd in logische punten, niet in pixels.
Hoewel de bovenstaande codevoorbeelden handig zijn, zijn ze ook enigszins beperkt. In de praktijk zult u mogelijk te maken krijgen met complexere scenario's waarbij vele subvensters dynamisch worden gescand, afhankelijk van de schermhoogte van het apparaat.
Gelukkig zijn er minstens drie verschillende benaderingen die u kunt gebruiken om dit te doen.
De UIView eigendom autoresizingMask is een eenvoudige maar effectieve manier om ervoor te zorgen dat subview-objecten dynamisch worden aangepast ten opzichte van hun superview. In het bovenstaande codefragment heb ik dit gebruikt om ervoor te zorgen dat zowel de breedte als de hoogte van het aangepaste object voor de achtergrondweergave op de juiste manier worden geschaald met oriëntatiewijzigingen:
customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
Merk op dat de autoresizingMask eigenschap kan ook visueel worden beheerd vanuit Xcode / Interface Builder.
De meeste toepassingen die UIKit-besturingselementen en standaardcontainers gebruiken, zouden prima op de iPhone 5 moeten kunnen werken door variabele waarden voor het maken van frames te combineren (zoals eerder is weergegeven) en intelligente autoresizing-eigenschappen in subvensters in te stellen.
Raadpleeg de officiële Apple-documentatie en de programmeergids voor bekijken voor meer informatie.
Het nieuwe Auto Layout-systeem geïntroduceerd met iOS 6 biedt een geavanceerde methode voor het beheren van de weergave. Automatische lay-out gebruikt een systeem van beperkingen om weergaveverhoudingen uit te leggen en af te dwingen. Het enige nadeel van het gebruik van Auto Layout is dat het niet compatibel is met iOS 5 en ouder.
Verdere dekking van Auto Layout valt buiten het bestek van deze tutorial. Degenen die meer willen leren, moeten Apple's Cocoa Auto Layout Guide en de WWDC 2012 Introduction to Auto Layout-sessie raadplegen.
Een andere benadering die door sommigen wordt gehanteerd, is proberen te controleren of het huidige apparaat tijdens runtime een iPhone 5 is. De meest geavanceerde versie die ik heb gevonden is van dit antwoord op StackOverflow.
Het volgende is een enigszins aangepaste versie van de macro's die in de StackOverflow-post zijn gemaakt:
#define IS_IPHONE ([[[UIDevice currentDevice] model] isEqualToString: @ "iPhone"]) #define IS_IPOD ([[[UIDevice currentDevice] model] isEqualToString: @ "iPod touch"]) #define IS_HEIGHT_GTE_568 [[UIScreen mainScreen] bounds ] .size.height> = 568.0f #define IS_IPHONE_5 (IS_IPHONE && IS_HEIGHT_GTE_568)
De eerste en tweede macrocontrole om te zien of het huidige apparaat een iPhone of iPod touch is met behulp van de UIDevice klasse.
De derde macro controleert of de schermhoogte groter is dan of gelijk is aan drijvende-kommawaarde 568. Herhaal van boven dat het [[UIScreen mainScreen] bounds] bericht retourneert het selectiekader van het toepassingsvenster in logische punten en 568 logische punten worden toegewezen aan 1136 pixels met de standaardweergave contentScaleFactor van 1.0.
Ten slotte combineert de vierde macro twee van de voorgaande macro's in een IS_IPHONE_5 macro die (voorlopig) alleen WAAR zou moeten geven als de code op een iPhone 5 draait. Je zou de definitieve versie in je eigen code als volgt kunnen gebruiken:
if (IS_IPHONE_5) NSLog (@ "Hé, dit is een iPhone 5. Nou, misschien ... welk jaar is het?"); else NSLog (@ "Bummer, dit is geen iPhone 5 ...");
Hoewel de bovenstaande benadering mogelijk nuttig is, is deze ook foutgevoelig. Wat gebeurt er bijvoorbeeld als de iPhone 6 wordt uitgebracht met volledig nieuwe afmetingen? Ik zou adviseren deze benadering niet te gebruiken als het enigszins mogelijk is. Blijf in plaats daarvan bij Autoresizing Masks of Auto Layout als u een van die benaderingen kunt laten werken.
In deze zelfstudie zijn de verschillende beschikbare methoden voor het aanpassen van het vergrote iPhone 5-display uitgelegd. Als je moeite hebt gehad om je aan te passen aan de nieuwe schermgrootte, heb je hopelijk de inhoud nuttig gevonden!
Voel je vrij om feedback te geven die je hebt in de comments hieronder. U kunt ook contact met mij opnemen op Twitter, Google Plus of LinkedIN. Proost!
Accentsconagua