Introductie tot iPhone SDK-ontwikkeling

Mobiletuts + bestrijkt alle grote mobiele platforms - iPhone, Windows, Android en Blackberry. Deze tutorial kijkt naar ontwikkeling met de iPhone SDK. Je leert informatie over het iPhone-platform, hoe je je ontwikkelomgeving instelt en configureert en de stappen die nodig zijn om een ​​eenvoudige fortune-cookie-applicatie te maken!

Over het platform

iOS is een voor mobiele apparaten geoptimaliseerde variant van Mac OS X, gemaakt door Apple Inc. Het wordt gedistribueerd met alle iPod touch-, iPhone- en iPad-apparaten en neemt slechts ongeveer 500 MB opslagruimte in beslag.

Er zijn drie verschillende benaderingen voor iOS-ontwikkeling:

  1. Ontwikkeling van webapplicaties

    De originele iPhone OS 1.0 vereiste dat alle niet-Apple-applicaties webgebaseerd waren en werden uitgevoerd in de browser Mobile Safari. Omdat Mobile Safari geen plug-ins ondersteunt zoals Adobe Flash of Microsoft Silverlight, betekende dit dat alle toepassingen van derden oorspronkelijk werden geschreven in HTML, CSS en JavaScript. Deze methode van ontwikkeling blijft vandaag een haalbare optie, vooral voor toepassingen die toegankelijk moeten zijn op een breed scala aan apparaten of voor ontwikkelteams met een aversie tegen Mac OS X en Objective-C.

  2. Native Application Development

    Met de release van iPhone OS 2.0 en de introductie van de iPhone SDK en iTunes App Store, zijn ontwikkelaars aangemoedigd om native applicaties voor de iPhone te schrijven met behulp van Objective-C en Xcode. Native applicaties zijn gecompileerde binaries die op het apparaat van de gebruiker zijn geïnstalleerd en uitgevoerd. Deze applicaties krijgen aanzienlijke toegang tot de hardware van het apparaat en alleen binaire bestanden van native applicaties kunnen worden gedistribueerd via de iTunes App Store. Omdat het iPhone-besturingssysteem wordt uitgevoerd op iPod touch-, iPhone- en iPad-apparaten, kunnen de meeste toepassingen worden gebouwd voor alle drie apparaten met slechts kleine codevarianten, hoewel er aanzienlijke voordelen zijn bij het optimaliseren van uw toepassing voor het veel grotere iPad-scherm.

  3. Hybride applicatie-ontwikkeling

    Het is ook mogelijk om de bovenstaande benaderingen te combineren en iPhone-toepassingen te maken die op het apparaat van een gebruiker zijn geïnstalleerd, voornamelijk in HTML, CSS en JavaScript zijn geschreven en worden vrijgegeven via de iTunes App Store. Zulke applicaties worden steeds populairder dankzij open-sourcebibliotheken zoals QuickConnect en platforms zoals PhoneGap, AppCelerator en rhomobile.

Mobiletuts + behandelt alle bovenstaande methoden van iPhone OS-ontwikkeling, maar deze tutorial zal zich richten op native applicatie-ontwikkeling met de officiële iPhone SDK met Objective-C en Xcode. Dit is de door Apple aanbevolen methode om native iPhone OS-applicaties te bouwen voor distributie in de iTunes App Store.

Ermee beginnen

Om iPhone SDK-applicaties te ontwikkelen en door te gaan met deze tutorial, hebt u het volgende nodig:

  • Een op Intel gebaseerde Mac met Mac OS X Snow Leopard

    Als u native applicaties met de officiële iOS SDK wilt schrijven en uw applicaties wilt testen in de officiële iPhone- of iPad-simulator van Apple, moet u Snow Leopard, het nieuwste besturingssysteem voor pc en laptop van Apple, kunnen gebruiken.

  • Een Apple Developer-account.

    Dit is vereist om de iPhone SDK 4, de Xcode IDE en de iPhone Simulator te downloaden. U moet zich hier registreren voor een Apple Developer-account. Registratie is gratis en u kunt applicaties uitvoeren in de iPhone-simulator. Een gratis account is alles wat nodig is voor deze tutorial, maar om je apps daadwerkelijk op een apparaat uit te voeren of te publiceren via de iTunes App Store, moet je betalen om je in te schrijven voor het iPhone Developer Program.

  • Xcode en de iPhone SDK 4.

    Nadat u zich hebt aangemeld bij uw ontwikkelaarsaccount, downloadt en installeert u Xcode 3.2.5 en iPhone SDK 4 (of de nieuwste beschikbare versies).

Nadat je het bovenstaande hebt gehad, zou je klaar moeten zijn om een ​​duik te nemen in het bouwen van "Fortune Crunch", een eenvoudige iPhone-applicatie waarmee gebruikers een fortuinkoekje kunnen "crunchen" en een bericht kunnen lezen.

Stap 1. Start Xcode en maak uw project

Xcode is een geïntegreerde ontwikkelomgeving (IDE) die de verschillende hulpmiddelen combineert die nodig zijn om een ​​iPhone-programma samen te stellen in één toepassing. Start nu Xcode door ernaar te zoeken in schijnwerpers of gebruik de vinder om naar het standaard installatiepad van te gaan / Developer / Applications / Xcode.

Selecteer "Een nieuw Xcode-project maken" in het dialoogvenster dat verschijnt.

Selecteer "Toepassing" onder iOS in de linkerkolom. Maak uzelf vertrouwd met de verschillende soorten applicatiesjablonen die beschikbaar zijn in het inhoudspaneel. Deze zelfstudie is een eenvoudige app met één weergave, dus selecteer het pictogram "View-based Application" en klik op "Choose."

Voer de tekst "FortuneCrunch" in het veld "Opslaan als" in om ons project een naam te geven en klik op "Opslaan".

De projectsjabloon van FortuneCrunch zou nu op het scherm moeten worden getoond.

Het is belangrijk om te beseffen dat dit startpunt een volledig uitvoerbaar programma is. Ga je gang en gebruik de iPhone-simulator om de sjabloon uit te voeren door op te klikken "Build and Run" of door te selecteren Bouw> Build and Run vanuit de menubalk.

Hoewel de standaard toepassingssjabloon ongelooflijk saai is, is de iPhone-simulator dat niet. Klik op de startknop in de simulator om terug te keren naar het iPhone-dock en een beetje rond te bladeren. Let ook op de volgende snelkoppelingen van de simulator:

Command + linkerpijl: Draai het apparaat naar links.

Command + pijl naar rechts: Draai het apparaat naar rechts.

Ctrl + Command + Z: Emuleert een schudgebaar (dit wordt niet visueel weergegeven).

Stap 2. Start Interface Builder en maak de interface

De standaardinterface die is meegeleverd met een op weergave gebaseerde sjabloon is ongelooflijk saai, dus laten we doorgaan met het maken van onze gebruikersinterface van de fortune cookie-app. We zullen twee fortuin-cookie-afbeeldingen gebruiken die speciaal voor deze tutorial zijn gemaakt: cookie-closed.png en cookie-crunched.png. Je kunt ze vinden in het downloadbestand dat bij dit bericht hoort en ze worden gratis verspreid onder de WTFPL-licentie.

Na het verkrijgen van de benodigde fortune-cookie-afbeeldingen, start u Interface Builder door naar het deelvenster "Groepen en bestanden" in Xcode te gaan, de map "Resources" uit te breiden en te dubbelklikken op het bestand FortuneCrunchViewController.xib.

Interface Builder is een grafisch hulpmiddel waarmee u snel en gemakkelijk de lay-out van uw toepassing kunt maken zonder een enkele regel met Objective-C code te schrijven. Zoals we zullen zien, kunt u hiermee ook visueel relaties definiëren tussen objecten zoals knoppen en de methoden die u in uw toepassing schrijft.

Er zijn vier belangrijke Interface Builder-vensters die u moet kennen:

  1. Het XIB-venster. Dit venster heeft de titel "FortuneCrunchViewController.xib" en is een weergave van alles dat is opgeslagen in het XIB-bestand waarop u dubbelklikte om Interface Builder te openen. De eigenaar van bestand vertegenwoordigt een exemplaar van de klasse FortuneCrunchViewController. U kunt het aanzicht in het XIB-venster zien als het canvas voor uw een bekeken toepassing en First Responder is een tijdelijke aanduiding voor een tijdens runtime bepaald object dat reageert op acties zoals aanraakgebeurtenissen.
  2. De weergave-instantie. De weergave-instantie is in wezen uw canvas voor deze toepassing en moet vertrouwd lijken uit het uitvoeren van de sjabloon-app in stap 1. Wijzigingen die u hier aanbrengt, worden weergegeven wanneer we de toepassing bouwen en uitvoeren. Als de view-instantie niet open is of u deze na het sluiten opnieuw wilt openen, kunt u dit doen door te dubbelklikken op het pictogram "View" in het XIB-venster..
  3. De bibliotheek. De bibliotheek geeft objecten weer zoals knoppen, labels en tekstvelden die beschikbaar zijn voor gebruik in uw weergave. Objecten kunnen in uw canvas worden gemaakt door ze naar het view-exemplaar te slepen. Selecteer om de bibliotheek handmatig te openen Hulpmiddelen> Bibliotheek vanuit de menubalk.
  4. De inspecteur. De inspecteur biedt een gedetailleerd overzicht van de kenmerken en verbindingen van uw objecten. Open het infovenster door te selecteren Hulpmiddelen> Inspecteur als het nog niet open is. Let op de vier tabbladen boven in het infovenster: kenmerken, verbindingen, grootte en identiteit.

Nu u bekend bent met Interface Builder, kunnen we doorgaan met het instellen van de interface van onze toepassing.

Laten we eerst de achtergrondkleur veranderen van grijs naar wit. Doe dit door de View Expression die hierboven is beschreven te selecteren. In het inspectorvenster moeten de weergave-eigenschappen nu worden geladen. Selecteer het tabblad attributen in het infovenster, zoek het achtergrondkenmerk en kleurenpalet op en verander de kleur in wit.

Nu gaan we een knop maken om onze gelukskoekje te vertegenwoordigen. Typ in het bibliotheekvenster "UIButton" in het zoekvak onderaan.

Sleep vervolgens de knop naar de weergave-instantie.

We moeten de images cookie-closed.png en cookie-crunched.png toevoegen aan de map resources in Xcode. Schakel terug naar het hoofdvenster van Xcode en sleep elke afbeelding naar de map Resources in het deelvenster Groepen en bestanden. Een dialoogvenster verschijnt. Vink het vakje aan met de tekst "Items naar de doelgroep kopiëren" en klik op "Toevoegen".

Schakel terug naar Interface Builder en selecteer de eerder toegevoegde UIButton. Gebruik het tabblad Kenmerken van de inspecteur om de eigenschap image in cookie-crunched.png en het afbeeldingstype in "aangepast" te veranderen. Pas het formaat van de UIButton aan de grootte van de afbeelding aan door Opmaak> Formaat passend.

We hebben nu een gebroken fortuinkoekje op het scherm. Laten we ons fortuin creëren door een UILabel vanuit de bibliotheek naar de weergave te slepen. Wijzig de tekst om 'Happy iPhone Hacking' te lezen en gebruik het tabblad 'Kenmerken van de inspecteur' om het lettertype te wijzigen in 12 puntsgrootte en het lettertype vet te maken. Pas het UILabel aan de tekst aan en plaats het op de witte papierstrook bovenop de afbeelding van het gebroken koekje. Selecteer nu het selectievakje "Verborgen", want we willen alleen dat dit label wordt weergegeven nadat de gebruiker op de knop heeft getikt.

Selecteer opnieuw de UIButton en wijzig de afbeeldingsinstelling op het tabblad Kenmerken van de inspecteur in cookie-closed.png.

Sla al uw werk op in Interface Builder, en ga dan terug naar Xcode en bouw en voer je applicatie opnieuw uit. Je zou nu de ongebroken fortune cookie-knop op het scherm moeten zien.

Stap 3. Codeer het headerbestand van FortuneCrunchViewController

Met de interface geconfigureerd, zijn we klaar om in Objective-C te duiken en beginnen met het schrijven van de code die onze applicatie zal laten functioneren.

Terug in Xcode, selecteer het FortuneCrunchViewController.h bestand onder de Klassen map in de Groepen en bestanden ruit. Dit bestand is een zogenaamd "header", "interface" of "declaration" -bestand voor de klasse FortuneCrunchViewController. Hierin verklaren we de interne variabelen, methoden, protocollen en andere componenten die in de klas zullen worden gebruikt.

De FortuneCrunchViewController-klasse werd visueel weergegeven in Interface Builder als het "canvas" waarmee we de UILabel- en UIButton-instanties konden slepen. We gaan het klassenheaderbestand nu bijwerken, zodat we later in onze code naar deze objecten kunnen verwijzen.

Werk het headerbestand bij door de volgende wijzigingen aan te brengen:

 #importeren  @interface FortuneCrunchViewController: UIViewController IBOutlet UIButton * fortuneCookieButton; IBOutlet UILabel * fortuneLabel;  @property (nonatomic, retain) IBOutlet UIButton * fortuneCookieButton; @property (nonatomic, retain) IBOutlet UILabel * fortuneLabel; - (IBAction) crunchCookie: (id) afzender; @einde 

Lijn 1 staat bekend als een preprocessor-richtlijn en vertelt in feite aan de preprocessor dat het UIKit-raamwerk beschikbaar moet zijn voor gebruik binnen de klas.

Lijn 3 gebruikt @interface om te verklaren dat dit een interfacedefinitie is voor de klasse FortuneCrunchViewController. Het gedeelte ": UIViewController" van deze regel betekent dat FortuneCrunchViewController een onderliggende klasse van de klasse UIViewController is.

Regel 5 declareert een UIButton class pointer genaamd fortuneCookieButton als een IBOutlet. De IBOutlet-tag heeft geen betekenis voor de compiler en wordt alleen gebruikt door Interface Builder om te bepalen welke objecten in de klasse kunnen worden verbonden met hun visuele weergave in het Interface Builder XIB-bestand. De UIButton-klasse moet bekend zijn uit ons werk in stap 2.

Regel 6, vergelijkbaar met regel 5, declareert een UILabel class pointer genaamd fortuneLabel als een IBOutlet.

Regels 10-11 gebruiken de @property-opdracht om de compiler te laten weten dat fortuneCookieButton en fortuneLabel toegankelijk zijn als eigenschappen van de klasse, maar dat we de methoden om ze later dynamisch te gebruiken declareren.

Lijn 13 is een functiehandtekening voor de crunchCookie-methode. Het - (IBAction) gedeelte van de verklaring verklaart dat deze methode van het IBAction-gegevenstype is, dat in wezen hetzelfde is als van het ongeldige gegevenstype, met als enig opmerkelijk verschil dat IBAction deze methode toegankelijk maakt als een actie in Interface Builder . Het gedeelte ": (id) afzender" vertelt de compiler om een ​​argument "afzender" van het gegevenstype "id" te accepteren. In Cocoa-Touch is id een generiek gegevenstype dat een verwijzing naar elke subklasse van NSObject kan zijn en in onze toepassing die de crunchCookie-methode aanroept door op de FortuneCookieButton te drukken, wordt feitelijk een verwijzing naar de fortuneCookieButton verzonden als het "afzender" -object. Dit is niet noodzakelijk voor onze applicatie, maar het is hier opgenomen omdat het een gebruikelijke conventie is die u vaak zult zien.

Tot slot geeft regel 15 aan dat dit het einde is van onze @interface-verklaring.

Stap 4. Verbind Interface Builder met FortuneCrunchViewController

Nu we de interne variabelen en methoden hebben verklaard die door onze applicatie zullen worden gebruikt en ze met IBOutlet en IBAction zijn getagd, moeten we de cirkel voltooien door onze Interface Builder-objecten aan te sluiten op de klasse FortuneCrunchViewController.

Dubbelklik op het bestand FortuneCrunchViewController.xib en start Interface Builder opnieuw.

Klik met de rechtermuisknop of klik op het object Object van het bestand in de XIB-controller. Er verschijnt een venster met de verschillende objecten in de eigenaar van het bestand die kunnen worden verbonden met objecten in de XIB. Merk op dat de 'weergave' al voor ons is verbonden.

Klik op de cirkel rechts van fortuneCookieButton en sleep vanuit het vak Eigenaar naar de werkelijke UIButton op het canvas. Het vak Eigenaar van het bestand moet grafisch worden bijgewerkt om de verbinding tussen fortuneCookieButton en het object UIButton op dezelfde manier weer te geven als waarmee de verbinding tussen het view-outvenster en het View-object wordt aangegeven.

Doe nu hetzelfde voor de fortuneLabel-verbinding.

We moeten nu een verband leggen tussen de UIButton en onze crunchCookie-methode. Interface Builder biedt ons veel verschillende manieren om dit te doen. Klik met de muis of klik met de rechtermuisknop op onze fortune cookie-knop om een ​​lijst met beschikbare evenementen weer te geven.

Twee van de meest gebruikte opties zijn:

  • Touch Down. Deze optie vertelt Interface Builder om onze methode af te vuren wanneer deze een vinger "touch down" op het element detecteert.
  • Touch Up Inside.Deze optie vertelt Interface Builder dat onze methode moet worden geactiveerd nadat de gebruiker zowel een vinger op het element heeft aangeraakt en vervolgens ook de vinger van het element heeft losgelaten..

Touch Up Inside is meestal de optie die wordt gekozen bij het werken met knoppen, maar in ons geval willen we dat het fortuinkoekje breekt zodra de vinger van de gebruiker het aanraakt, dus we binden het Touch Down-evenement aan onze crunchCookie-methode. Doe dit door vanuit de cirkel naar het object Eigenaar van bestand in het XIB-venster te slepen en vervolgens selecteer de crunchCookie-methode in het dialoogvenster dat verschijnt.

Sla uw werk op in Interface Builder en ga dan terug naar Xcode.

Stap 5. Codeer het implementatiebestand van FortuneCrunchViewController

Met het Interface Builder XIB-bestand geconfigureerd en onze klasse-interface geschreven, resteert alleen het coderen van de klassemethoden die de toepassing zal gebruiken om onze cookie te kraken en het waarzegetiket weer te geven. Het klasse-implementatiebestand is FortuneCrunchViewController.m, open het nu door het te selecteren in de Klassen map in de Groepen en bestanden paneel.

Werk de code bij naar het volgende:

 #import "FortuneCrunchViewController.h" @implementation FortuneCrunchViewController @synthesize fortuneCookieButton; @synthesize fortuneLabel; // Deze methode verandert de cookie-afbeelding wanneer de knop wordt ingedrukt: - (IBAction) crunchCookie: (id) afzender NSLog (@ "In crunchCookie"); [fortuneCookieButton setImage: [UIImage imageNamed: @ "cookie-crunched.png"] forState: UIControlStateNormal]; fortuneLabel.hidden = NO;  // Deze methoden hebben betrekking op geheugenbeheer: - (void) viewDidUnload [fortuneCookieButton release]; fortuneCookieButton = nul;  - (void) dealloc [fortuneCookieButton release]; [release fortuneLabel]; [super dealloc];  @end 

Regel 1 is de preprocessor-instructie om het interfacebestand op te nemen voordat de klasse wordt gecompileerd.

Regel 3 begint met onze klassenimplementatie.

Regel 5 - 6 gebruikt de @ synthesize-instructie om dynamisch methoden te maken voor het openen en opslaan van de fortuneCookieButton- en fortuneLabel-aanwijzerobjecten die we in het headerbestand hebben gedeclareerd. Deze stap verwijdert de noodzaak om code getVariable () en setVariable () -methoden in te dienen voor alle objecten die we declareren.

De crunchCookie-methode is te vinden op regel 8 - 12 en vormt de kern van dit programma.

Op regel 9 - 10 maken we een nieuw UIImage-object met behulp van de cookie-crunched.png-afbeelding. Vervolgens geven we dit object door in de setImage: forState: methode van het fortuneCookieButton-object. Deze methode wijzigt het afbeeldingskenmerk dat we handmatig instellen in cookie-closed.png in Interface Builder naar het nieuwe UIImage-object dat we hebben doorgegeven. Doorgeven van berichten is een centraal onderdeel van de taal van doelstelling-C en volgt over het algemeen dit patroon:

 [myObject-methodeParam1: waarde1 methodeParam2: waarde2]; 

Regel 11 benadert het attribuut "hidden" van het fortuneLabel-object en stelt de waarde in op NO. Dit zal ons labelobject onthullen na de beeldupdates van de gemalen cookie.

Alle overige regels behandelen problemen met geheugenbeheer die in toekomstige zelfstudies verder worden behandeld. Om samen te vatten, wanneer ons beeld wordt leeggemaakt, moet je er zeker van zijn dat je alle IBOutlet-objecten hebt vrijgegeven die je hebt gemaakt. Wat de dealloc-methode betreft, dit is de objectvernietiger en wordt opgeroepen wanneer het object op het punt staat te worden vernietigd. Beide methoden zijn standaard al in de klasse aanwezig, maar u moet de weergegeven regels toevoegen.

Met de bovenstaande code op zijn plaats, zijn we klaar om onze voltooide applicatie op te slaan, te compileren en uit te voeren!

Conclusie

Deze tutorial heeft u een korte inleiding gegeven over native iPhone OS-applicatie-ontwikkeling met Xcode, Interface Builder en de iPhone SDK. We hebben een aantal basisprincipes van het platform besproken en je hebt je voeten nat gemaakt met Interface Builder en Xcode.

Het materiaal dat in deze zelfstudie wordt behandeld, wordt uitgebreid in toekomstige zelfstudies terwijl we verder duiken in Objective-C, Cocoa-Touch en de iPhone SDK.