Share
Velkommen til den andre i vår serie av begynnende iOS-utviklingsopplæringer. Denne opplæringen vil vise hvordan du bygger FortuneCrunch-programmet tidligere vist i vår "Introduksjon til iPhone SDK" -posten. I tillegg til å være i et videoformat, har denne versjonen blitt oppdatert for iOS4 og har mye mer detaljert informasjon om de ulike trinnene som er involvert i utformingen av programmet. Seere kan forvente å bli kjent med Xcode- og Interface Builder-arbeidsflytene, hvordan tilpasse knapper og svare på knapphendelser, og grunnleggende for Objective-C og Cocoa-Touch. Et skriftlig transkripsjon leveres også med dette innlegget.
Hei alle, dette er Mark Hammonds fra Mobiletuts +, og velkommen til det andre innlegget i serien vår på Beginning iOS Development. I dagens leksjon skal vi bygge et enkelt iOS-program kalt "FortuneCrunch." Jeg utviklet Fortune Crunch for å være "Hello World" av iPhone-programmering. Det gir akkurat nok detalj for at du skal begynne å forstå Xcode og Interface Builder-arbeidsflyten, grunnleggende for Objective-C-syntaks, og hvordan du svarer på knapphandlinger.
La oss begynne med å starte Xcode. Xcode er Apples proprietære integrerte utviklingsmiljø, og som sådan inneholder det alle verktøyene du trenger for å begynne å bygge opprinnelige iPhone-applikasjoner. Begynn med å velge "Opprett et nytt Xcode-prosjekt."
Du er nå presentert med en liste over forskjellige iOS-applikasjonsmaler. Hver mal er skreddersydd for en annen type applikasjon, og du kan lese mer av beskrivelsen gitt når du klikker på et malikon. For vår søknad skal vi velge «Vis-basert applikasjon» -malen fordi vi bare trenger en enkelt skjerm for dette prosjektet. Skriv inn navnet "FortuneCrunch" og klikk på lagre.
Og velkommen til Xcode. Vi vil dekke Xcode mer fullstendig i en fremtidig opplæring, men for nå vil jeg egentlig bare at du skal gjøre deg kjent med de tre hovedinnholdsområdene som presenteres. Ruten "Grupper og filer" er en liste over alle filene i prosjektet ditt. Hvis du velger en mappe, ser du alle filene i den som vises til høyre, og til slutt velger en individuell fil innholdet i ruten under. Dette er også kodeditoren din, som du kan forstørre ved å enten skyve ruten opp eller ned eller ved å dobbeltklikke på filen for å åpne den i et nytt vindu.
Ok, det er alt ganske intuitivt. La oss ta en nærmere titt på panelet Grupper og filer. "Klasser" -mappen er hvor nesten alle kildefilene i programmene dine blir lagret. Som du kanskje har gjettet, betyr dette at i Objective-C, er du naturligvis nesten alltid redigerer klassefiler fordi nesten alt i søknaden din er en gjenstand.
Som standard inneholder "Andre kilder" -mappen to svært nyttige filer: FortuneCrunch_Prefix.pch og main.m. Hovedfunksjonen i main.m kalles av iOS-operativsystemet og er den første koden som skal utføres i søknaden din. Selv om du sjelden vil bruke det, er det grunn null for utførelse av tilpasset kode. FortuneCrunch_Prefix.pch er en god måte å redusere oddsen ved å utvikle karpel-tunnel syndrom, det vil si at den lar deg automatisk importere kode fra ulike biblioteker eller headerfiler over alle prosjektkildelfiler. Ressursmappen brukes vanligvis til å organisere alle dine XIB-filer, plistfiler, bilder, lyd og video. Rammen Rammer viser alle rammene som er tilgjengelige for prosjektet ditt, og produktmappen viser programmet binært. Vær oppmerksom på at den for øyeblikket er rød, noe som betyr at den mangler fordi vi ikke har opprettet en binær fil enda.
La oss løse dette problemet nå. Pass på at byggingen din for simulatoren, i stedet for en fysisk enhet, og deretter fortsett, og klikk på "Build and Run" -ikonet for å starte kompileringsprosessen.
Velkommen til iPhone-simulatoren. Som du kan se, er dette vår standard prosjektmall i handling. Ganske kjedelig, ikke sant? Vi løser det neste.
Bytt tilbake til Xcode og finn FortuneCrunchViewController XIB-filen. En XIB inneholder informasjon om visningsgrensesnittet, og følgelig administreres det normalt av Interface Builder. Dobbeltklikk for å åpne filen i Interface Builder nå.
Ser på midten av skjermen, bør dette vinduet se spesielt kjent ut. Det er den visuelle representasjonen av visningen som styres av FortuneCrunchViewController-klassen, og vi så det da vi samlet vårt standardprosjekt. Når jeg jobber i Interface Builder, liker jeg å tenke på dette vinduet som "Lerret." I motsetning til kunstnerens lerret, kan vi imidlertid ikke trekke på visningen direkte, vi kan bare plassere objekter på toppen. Det er det som Bibliotek-vinduet er for. Gå videre og skann gjennom de forskjellige objektene som er oppført her, og la oss til og med eksperimentere litt. Vi kunne plassere en tabellvisning på lerretet, eller kanskje et bilde med en tekstvisning under. Men for våre formål skal vi bruke en knapp. Og ikke bare noen knapp, men en klasse som heter "UIButton." Dra knappen på skjermen nå. Så langt som standardknappene går, kan dette dessverre ikke bli mye verre estetisk. Pass på at knappen er valgt, og ta en titt på inspektørvinduet. Inspeksjonsvinduet viser forskjellige alternativer for å tilpasse objektene på visningen din, og disse alternativene er ganske bokstavelig vis den visuelle representasjonen av objektets egenskaper, også referert til som data medlemmer. Du vil legge merke til at en av de første alternativene for en UIButton er egenskapen "Type". La oss leke med dette for å se de ulike alternativene.
Vi har "Detail Disclosure", "Info Light", "Info Dark", "Add Contact", og vårt valg av valg i denne opplæringen, tilpasset. En egendefinert knapp lar deg sette bildene for alle tilgjengelige knapptilstander, som inkluderer standardstatus, uthevet tilstand, valgt tilstand og deaktivert tilstand.
For denne opplæringen skal vi bruke UIButton til å vise en formuekake med standardstatus. For å fortsette må vi importere bildene våre.
For å få FortuneCrunch-bildene som følger med denne opplæringen, må du laste ned FortuneCrunch-prosjektkoden som er vedlagt dette innlegget. Etter at du har lastet ned og pakket ut koden, åpner du FortuneCrunch-mappen, og du vil se de to bildene vi trenger i app-cookie-stengt punktping og kakekryddet punktping. Velg begge disse bildene, og dra dem deretter inn i ressursmappen i Xcode. Vær spesielt oppmerksom på denne dialogboksen, det er et alternativ øverst, "Kopier elementer til desinasjonskonserns mappe" som du må sjekke. Som du kanskje har gjettet, forteller dette Xcode at du faktisk skal kopiere og importere bildene til Xcode i stedet for bare å koble i filene. Klikk på Legg til, og du bør nå ha informasjonskapsel-stengt og cookie-crunched i prosjektet. Før vi fortsetter, ta en titt tilbake til FortuneCrunch-mappen. Du vil også dra i "Icon.png" -filen. Som standard blir hvilket ikon som heter "Icon.png" det applikasjonsikonet som vises av iOS. Legg merke til at vår ikon.png ikke har noen glans anvendt - dette blir automatisk brukt av iOS.
Nå, flip tilbake til Interface Builder. Velg UIButton-objektet og endre bildet for standardtilstanden til cookie-crunched.png. Velg deretter Layout -> Størrelse som passer. Sett på knappen slik du vil at den skal vises. Vi skal nå legge til en UILabel på lerretet for å representere vår formue. For min app skal jeg gå med teksten "Happy iPhone Hacking!" Tilpass teksten med inspeksjonsvinduets skriftvalg. Jeg skal endre fonten min til 12pt med en fet skrifttype. En ting å merke seg om skriftvisningen, vil alle skriftene på systemet bli presentert, men de fleste er ikke tilgjengelige på iOS som standard, så vær forsiktig når du velger en skrifttypestil. Endre størrelsen på etikettbredden med alternativet Layout -> Størrelse til passform, og dra den til der du vil ha den på formuepapiret. Jeg skal også endre fargen på teksten fra svart til rødt. Til slutt, sett den "skjulte" eiendommen til sann, fordi vi bare vil at denne etiketten skal vises etter at brukeren har tappet informasjonskapselbildet.
Vi har faktisk bare satt standardstatusen til vår UIButton for å lage informasjonskapsler slik at vi kunne plassere etiketten på riktig måte. Med det som er gjort, vil vi at standardknappen til vår knapp er det cooke-stengte bildet. Men både den uthevede tilstanden og den valgte tilstanden vil være det kakekrympte bildet. Som du kan se, vil Interface Builder ikke gjenspeile egenskapene som er angitt for disse statene; du må teste de med kode og iPhone Simulator.
Vårt cookie-lukket bilde har en hvit bakgrunn, men visningsbakgrunnen er grå. Endre visningen bakgrunn til hvit for å matche informasjonskapselene. Der, mye bedre.
Nå, fortsett og lagre arbeidet ditt i Interface Builder og deretter bytte tilbake til Xcode. "Bygg og kjøre" programmet igjen i Xcode for å se på fremdriften din.
Ikke helt hva du forventet, ikke sant? Med introduksjonen av iOS 4, støtter applikasjoner standardoppgaver for flere oppgaver. Så da vi trykket på hjemme-knappen før for å avslutte søknaden, stoppte vi faktisk ikke prosessen, vi sendte det bare til bakgrunnen. En måte å omgå dette faktum er å dobbeltklikke på hjemme-knappen, hold markøren over app-ikonet, og deretter avslutte appprosessen manuelt. En bedre måte er imidlertid å bruke "Build and Debug" i stedet for "Build and Run" når du utvikler appen din aktivt. Og nå kan du se våre endringer.
Før vi fortsetter å faktisk kode vår søknad, skal jeg gi deg en Pro Tips om Interface Builder-filer. Selv om du nesten alltid vil redigere XIB-fil med Interface Builder, er en XIB-fil egentlig bare en XML-fil som inneholder metadata om objekter som vil bli opprettet automatisk når visningscontrolleren er instantiated. Du kan se dette ved å klikke på FortuneCrunchViewController.xib og deretter velge Åpne som -> Kildekodefil. Hvis du bruker et versjonskontrollsystem som SVN, CVS eller GIT, vil du sannsynligvis også merke dette når du undersøker diffs mellom sjekker.
Nå, la oss fortsette å faktisk programmere vår app. Ta en titt på FortuneCrunchViewController.h og FortuneCrunchViewController.m. Disse to filene kombinert består av visningskontrollobjektet som vil styre enkeltvisningen i vår søknad. .H-filen refereres til som klassedeklarasjonen, eller grensesnittfilen, eller til og med bare "header" -filen. .M-filen refereres til som klassedisplayet eller implementasjonsfilen. Klassedeklarasjonsfilen brukes til å beskrive hva vår klasse er, mens klassedepartementfilen brukes til å beskrive hvordan klassen faktisk fungerer.
Selvfølgelig er de selvsagt bare tekstfiler. Det er det som er inne som teller. Slett alt som eksisterer i grensesnittfilen; Vi skal begynne fra bunnen av.
De første flere linjene inneholdt kommentarer som så ut slik:
// kommentar linje 1 // kommentar linje 2 // kommentar linje 3
Vel og bra, men Objective-C støtter også en annen kommentar stil:
/ * Kommentar linje 1 kommentar linje 2 kommentar linje 3 kommentar linje 4 * /
Jeg foretrekker å bruke multilinjens kommentarformat når det er mulig, men vi vil holde fast med enkeltlinjeproblemer for å reprodusere den opprinnelige filen.
Neste linje er en importerklæring. De #importere erklæring er et preprosessor-direktiv som gjør hvilken fil eller ramme som vi spesifiserer tilgjengelig for vår klasse. Det er som om du hadde skrevet inn innholdet i den filen eller rammen direkte på dette tidspunktet i kildefilen. Siden vi reproduserer den opprinnelige klassen definisjonen filen, vil vi si #importere å legge til UIKIT-rammeverket. Dette rammeverket inneholder mange av klassene vi skal bruke som er unike for iOS, som UIButton, UIImage, UIViewController osv..
Vårt neste skritt er å erklære at denne filen er en klassedeklarasjonsfil med @interface uttalelse. Som du kan se fra den automatiske fullføringsfunksjonen, er syntaksen for å deklare et klassegrensesnitt @ grensesnitt, klassenavn, kolon, superklasse navn, åpningskurvebrakett, interne variabler eller ivars, noen ganger kalt data medlemmer, lukkekurvbrakett etterfulgt av metode erklæringer, og deretter en @slutt uttalelse.
Vi ringer vår klasse FortuneCrunchViewController og oppgi superclassen som UIViewController som vi vil arve all funksjonalitet fra en standard ViewController og bare tilpasse delene som er unike for vårt syn. Vi kommer til å trenge to ivars i vår klasse, en for UIButton med vår informasjonskapsel, og en for UILabel som inneholder vår fortune cookie tekst. Erklære disse variablene slik:
IBOutlet UIButton * cookieButton; IBOutlet UILabel * fortuneLabel;
Alt som virkelig trengs for å deklarere enten ivar er klassenavn, asterisk, variabelnavns syntaks. De IBOutlet Søkeordet står for Interface Builder-utløpet, og brukes som en tag som tillater oss å gjøre koblinger til denne variabelen direkte i Interface Builder.
Vi kommer nå til å erklære at vi vil ha begge de ovennevnte variablene til å bli vurdert egenskaper av klassen. Gjør det med følgende linjer:
@property (nonatomic, behold) IBOutlet UIButton * cookieButton; @property (nonatomic, behold) IBOutlet UILabel * fortuneLabel;
Før vi går videre, la vi legge til metoden vi skal bruke i denne appen, for å endre bildet av informasjonskapselen når den er tappet:
-(IBAction) crunchCookie;
Den grunnleggende syntaksen for metodedeklarasjoner i Objective-C er et pluss- eller minustegn, en returtype og et metodenavn. I vårt tilfelle skal vi bruke minus fordi dette er en forekomstmetode. Hvis vi ønsket at denne metoden skulle være en del av klassen, ville vi bruke plustegnet for å lage en klassemetode. Deretter spesifiserer vi vår returtype som IBAction, som egentlig er et synonym for tomrom, den eneste forskjellen er at IBActions, eller Interface Builder-handlinger, kan manipuleres i Interface Builder.
Andre mulige returtyper inkluderer primitive typer som int, char og float, eller klasser som NSString, UIImage og NSNumber. Passende nok, heter vi vår klasse "crunchCookie" fordi det er nettopp det det vil gjøre.
Til slutt må vi legge til @slutt erklæring under vår metode for å avslutte vår @interface erklæring.
Lagre arbeidet ditt i Xcode, og bytt tilbake til Interface Builder.
Etter å ha erklært en etikett og en knapp i Xcode, må vi synkronisere objektene vi har plassert på visningen i IB med de i vår deklarasjonsfil.
Ta en titt på filens eierobjekt i XIB-innholdsvinduet. Hvis du ser på inspektøren for dette objektet, vil du legge merke til at filens eier faktisk er en forekomst av fortunecrunchViewController.h. Dette er representasjonen av klassedeklarasjonen som vi bare redigerte, og hvis du høyreklikker, vil du legge merke til at våre IBOutlet-variabler er oppført under uttaksseksjonen. Vi kan nå koble til vår knapp, og vår etikett.
Vi må også koble vår knapphandling til metoden vi erklærte. Velg knappen på lerretet og høyreklikk. Du ser denne lange listen over knapphendelser. De to vanligste er å røre på innsiden og berøre. Trykk på innsiden avfyres når en bruker rører ned på knappen, og slipper deretter knappen med fingeren fortsatt inne i knappens grenser. Så vil hendelsen ikke brenne til brukeren faktisk tar fingeren av knappen. I vårt tilfelle ønsker vi at bildet skal endres så snart som mulig, så vi vil bruke berøringshendelsen, som vil brenne så snart et trykk blir oppdaget på knappen. Dra fra berøringsnøkkelen til filens Eier-objekt for å synkronisere med vår crunchCookie-metode.
Det er det. Vi har nå våre IBOutlets og IBAction synkronisert med objektene i vår XIB-fil. Lagre arbeidet ditt og skift tilbake til Xcode.
Vi er endelig klare til å begynne å kode vår klassedisjonsfil. Åpne FortuneCrunchViewController.m. Som vi gjorde før, slett alt, så vi kan starte fra bunnen av.
Vi starter filen med noen vanlige boilerplate kommentarer:
// // FortuneCrunchViewController.m // FortuneCrunch //
Det første vi vil gjøre er å importere deklarasjonsfilen, eller headerfilen, som vi tidligere har kodet. Gjør det med importerklæringen:
#import "FortuneCrunchViewController.h"
Du lurer kanskje på hvorfor vi må importere topptekstfilen her. Hvorfor ikke bare skrive det inn direkte og hold alt i en fil? Faktisk kan du gjøre dette, men i klassen er klassedeklarasjoner og klassdefinisjoner vanligvis lagret i to separate filer.
Deretter må vi erklære vår implementering. Dette gjøres med @gjennomføring uttalelse:
@implementation FortuneCrunchViewController
Dette er ganske grei. Jeg vil fortsette og legge til kommandoen for å avslutte implementeringen vår også, så jeg glemmer ikke å gjøre det senere:
@slutt
I vår erklæringsfil uttalte vi at vi ønsket at både fortuneLabel og cookieButton skulle være egenskaper i denne klassen. Vi skal fullføre jobben nå ved å syntetisere disse egenskapene, slik som:
@synthesize cookieButton; @synthesize fortuneLabel;
Når en eiendom syntetiseres, blir metodene som er ansvarlige for lagring og henting av dataene lagret i disse egenskapene, automatisk opprettet for oss når applikasjonen er samlet. Dette betyr at vi vil være i stand til å tildele og hente verdier for egenskapene uten å skrive ut de kjeleplater som er nødvendige for å gjøre det.
Nå, la oss gå videre for å legge til den faktiske crunchCookie-metoden:
-(IBAction) crunchCookie [cookieButton setImage: [UIImage imageNamed: @ "cookie-crunched.png"] forState: UIControlStateNormal]; fortuneLabel.hidden = FALSE;
Det er det. På linjene 3-4 kaller vi setImage: forState-metoden til cookieButton-objektet, og passerer inn i en ny UIImage og UIControlStateNormal-konstanten. Dette ser nokså utlendinger til deg hvis du kommer fra et annet programmeringsspråk. Ikke bekymre deg for mye om syntaksen i denne opplæringen, alt vil bli avslørt i en fremtidig tut. Neste linje er enklere: Vi endrer verdien av fortuneLabel-objektets "skjulte" eiendom. Husk å sjekke "skjult" boksen i Interface Builder? Det satte denne egenskapen til ekte og gjorde etiketten skjult. Vi endrer det ved å sette den til FALSE her, så vår formue tekst vil bli vist når kaken smuldrer.
Vi er nesten klare til å bygge og feilsøke våre endringer, men det er noen flere metoder vi må legge til først:
-(void) viewDidUnload - (void) dealloc
Disse er arvede metoder fra UIViewController-klassen som omhandler minnehåndtering. De viewDidUnload Metoden kalles når enheten er lav i minnet og trenger å frigjøre ubrukte visninger. I dette scenariet må du frigjøre visningsrelaterte objekter som vil bli lastet opp når visningen er instantiated igjen. Disse elementene er vanligvis merket med IBOutlet-søkeordet, og i vårt tilfelle betyr det fortuneLabel og cookieButton-objektene. Frigjør dem slik:
-(void) viewDidUnload [cookieButton release]; cookieButton = nil; [FortuneLabel release]; fortuneLabel = nil;
De dealloc Metoden kalles når den faktiske FortuneCrunchViewController-objektet er i ferd med å bli distribuert eller fjernet, fra minnet. Du vil også lansere de samme objektene her også:
-(void) dealloc [cookieButton release]; [FortuneLabel release]; [super dealloc];
Igjen, ikke bekymre deg for mye om syntaksen for nå. Vi vil dykke dypere inn i minnehåndtering i en fremtidig opplæring.
Ok, klar til å se frukten av ditt harde arbeid? Lagre filen og klikk på bygge og feilsøke. Når du trykker på cookieButton, ser du din formue avslørt.
Gratulerer med å fullføre den andre opplæringen i serien vår på IOS-utvikling. iPhone-utvikling med Objective-C har en bratt læringskurve, men forhåpentligvis etter at du har fullført denne opplæringen, er du mer komfortabel med å arbeide med Xcode og Interface Builder, og begynner å forstå noen av grunnleggende for applikasjonsutvikling med Cocoa-Touch. Hvis du har spørsmål, vær så snill å legge dem i kommentarfeltet nedenfor, eller kontakt meg direkte via Twitter: @markhammonds. Til neste gang, Happy iPhone Hacking.
Accentsconagua