Share
Selv om vi allerede har lært litt i denne serien om iOS-utvikling, er jeg sikker på at du er ivrig etter å begynne å bygge iOS-programmer som gjør noe kul eller nyttig. I denne opplæringen blir ditt ønske gitt. Ved hjelp av Xcode, vil du opprette et iOS-prosjekt fra begynnelsen, endre prosjektets kildekode og kjøre programmet på enten iOS-simulatoren eller en fysisk enhet.
Colorific er navnet på programmet som vi skal bygge. Ideen bak Colorific er enkel, hver gang brukeren berører skjermen på enheten, endres fargene på skjermen. Selv om konseptet er grunnleggende, er Colorific perfekt for å komme i gang og utforske inn og ut av iOS-utviklingen.
Som vi så tidligere i denne serien, går hvert iOS-program gjennom livet som et Xcode-prosjekt. Hva er et Xcode-prosjekt? Et Xcode-prosjekt er en container eller et arkiv som inneholder filene, eiendelene og informasjonen som kreves for å bygge en eller flere produkter.
Vær oppmerksom på at dette ikke er begrenset til et prosjekts kildekode og eiendeler, for eksempel bilder og andre medier. Et prosjekt holder også oversikt over forbindelsene mellom de ulike elementene, og det vet hvordan man bygger de endelige produktene fra elementene.
Brann opp Xcode og opprett et nytt Xcode-prosjekt ved å velge Nytt> Prosjekt ... fra Fil Meny. Et alternativ er å trykke på Skift + Kommando + N.
I tilfelle Xcodes velkomstvindu dukker opp når du starter Xcode, foreslår jeg å lukke det slik at du lærer å lage et nytt prosjekt ved hjelp av Xcode-menyen.
Komme i gang med en ny applikasjon eller et prosjekt er enkelt i Xcode takket være programmaler som følger med. For programmet som vi skal lage, trenger vi Enkeltvisningsprogram mal. Ta gjerne en titt på de andre programmalene, men sørg for å velge Enkeltvisningsprogram mal for Colorific.
Etter å ha valgt Enkeltvisningsprogram mal og klikk på neste knappen, presenterer Xcode deg en liste over alternativer som lar deg konfigurere det nye prosjektet. La oss ta en titt på de ulike alternativene.
Du bør nå ha en god forståelse av de forskjellige konfigurasjonsalternativene når du konfigurerer et nytt Xcode-prosjekt. For dette prosjektet anbefaler jeg at du bruker alternativene som vist på skjermbildet ovenfor. Vær oppmerksom på at de fleste alternativer enkelt kan endres etter at du har opprettet prosjektet ditt. Klikk på neste knappen når du er ferdig med å konfigurere prosjektet.
I neste trinn spør Xcode hvor du vil lagre ditt nye prosjekt. Du har kanskje lagt merke til den lille boksen nederst i vinduet som er merket Opprett et git-repository på Min Mac. Den grå teksten under avkrysningsruten leser Xcode vil plassere prosjektet ditt under versjonskontroll.
Som jeg tidligere nevnte i denne serien, er kildekontroll uunnværlig i programvareutvikling. Denne serien vil ikke dekke dette emnet i detalj, men hvis du er seriøs om programvareutvikling, så anbefaler jeg sterkt å lese opp på kildekontroll.
Git er den mest populære SCM (Kildekodehåndtering) system i kakao samfunnet. Det er imidlertid helt mulig å bruke et annet SCM-system, for eksempel SVN eller Mercurial.
Fortell Xcode hvor du vil lagre prosjektet ditt, merk av i avmerkingsboksen for å godkjenne Xcode for å opprette et git repository for prosjektet, og klikk på Skape knapp.
Før vi går videre, vil jeg ta noen minutter til å utforske Xcodes brukergrensesnitt. Du kan se fire forskjellige områder:
Verktøylinjen øverst inneholder knappene og menyene som du finner deg selv ofte. Som vi så tidligere i denne serien, fortsetter knappene for å kjøre og stoppe et program i verktøylinjen.
Skjermbildet i midten av verktøylinjen ligner på skjermen du finner i iTunes. Den viser informasjon om prosjektets tilstand, for eksempel, det vil fortelle deg når en bygning lykkes eller mislykkes.
De to segmenterte kontrollene til høyre på verktøylinjen kan brukes til å tilpasse Xcodes brukergrensesnitt. Spill av med de forskjellige kontrollene for å finne ut hvordan hver av dem endrer Xcodes brukergrensesnitt.
Hovedformålet med venstre sidefelt er for navigasjon, og det kalles ofte Xcode navigator.
Navigatoren har forskjellige faner med Prosjektnavigator langt til venstre. Utvalget i venstre sidefelt avgjør hva som vises i Xcodes hovedvisning, arbeidsområdet.
Hovedvisningen eller arbeidsområdet er området der du vil tilbringe mesteparten av tiden din. Det er Xcodes arbeidshorse og viser hva som er valgt i navigatoren.
Mens venstre sidefelt styrer hva som vises i Xcodes hovedvisning, gjenspeiler innholdet i høyre sidefelt hva som blir vist eller valgt i hovedvisningen.
Den høyre sidebar, også kjent som inspektør, tilpasser seg det som brukeren velger i hovedvisningen.
Det er på tide å ta en titt på selve prosjektet. Prosjektets innhold vises i Prosjektnavigator, den første kategorien i venstre sidefelt. Velg første gjenstand i prosjektnavigatoren for å se prosjektdetaljer i hovedvisningen.
Hovedvisningen er sammensatt av to seksjoner, et sidebar til venstre og en detaljvisning til høyre. I sidelinjen ser du to elementer, prosjektet ditt med ett element og mål med to elementer.
Det er godt å vite tidlig på hva forskjellen er mellom et prosjekt og et mål. Som nevnt tidligere, er et prosjekt et lager for filene, eiendelene og dataene som kreves for å bygge en eller flere produkter. Et mål refererer imidlertid til en av disse produktene. Et mål inneholder de nødvendige instruksjonene for å bygge et produkt med prosjektets ressurser. Dette betyr at et prosjekt kan inneholde flere mål for å bygge flere produkter. Som du kan se, er et Xcode-prosjekt mer enn bare en mappe med en gjeng med filer i den.
Før vi begynner å endre kildekoden til prosjektet, kan det være interessant å bygge og kjøre ditt nye prosjekt for å se hva søknadsmalen har gitt oss gratis. Klikk på Løpe knappen øverst til venstre og sørg for at den aktive skjermen er konfigurert til å kjøre programmet i iOS-simulatoren ved å velge iPhone Retina (4-tommers).
Hvis alt gikk bra, skulle iOS-simulatoren starte programmet og vise en tom, hvit visning med den velkjente statuslinjen øverst.
La oss få våre hender skitne og endre programmets brukergrensesnitt. Åpne Prosjektnavigator og velg filen som heter Main.storyboard. En fil med en .storyboard utvidelse er en brukergrensesnittfil. I denne filen lager vi brukergrensesnittet til programmet.
Fortellingsbrettet inneholder ett element, en visningskontroller med den hvite visningen du så i iOS-simulatoren for noen få minutter siden. Arbeidsområdet består av et sidebjelke som viser objektets representasjon av scener av storyboardet. Den største delen av arbeidsområdet inneholder scenene eller brukergrensesnittet til applikasjonen.
Velg objektet som heter Utsikt i Vis kontrolleren scene i venstre sidefelt og se hvordan arbeidsområdet og den høyre sidefeltet oppdaterer innholdet. En gjeng med faner vises øverst i høyre sidefelt. Hver av kategoriene inneholder en samling av attributter knyttet til objektet som heter Utsikt.
Den nedre halvdelen av høyre sidefelt inneholder en seksjon med fire faner. Den tredje kategorien er representert ved et bilde av en tredimensjonal boks. Denne boksen er hvordan objekter vanligvis vises i Xcode.
Klikk på fanen med boksikonet og bla gjennom listen som vises. Listen er referert til som Objektbibliotek og inneholder ulike brukergrensesnittelementer, for eksempel knapper, skyveknapper og brytere.
I begynnelsen av denne opplæringen fortalte jeg deg at vi skulle lage et program med litt brukerinteraktivitet. Brukeren bør kunne berøre skjermen for å endre fargen.
Registrering av berøringer i et iOS-program kan gjøres på flere måter. En løsning er å bruke en knapp. I Objektbibliotek, finn elementet som heter UIButton og dra den fra objektbiblioteket til den hvite visningen i Xcodes arbeidsområde.
Brukeren bør kunne berøre hvilken som helst del av skjermen, noe som betyr at knappen skal dekke hele skjermen. Har du lagt merke til de seks små torgene på knappens kanter? Ved å flytte de små torgene, kan du endre knappens dimensjoner.
Juster størrelsen på knappen slik at den dekker hele skjermen. Ikke vær bekymret for statuslinjen øverst på skjermen.
Utsikten bak knappen er visningen som vil endre farge når brukeren berører skjermen. For øyeblikket blokkerer knappen visningen fra brukerens visning, så vi må endre knappens attributter.
Du har kanskje lagt merke til at knappen har blitt lagt til i listen over objekter i venstre sidefelt, under objektet som heter Utsikt. Velg knappen fra listen over objekter og velg Attributtsinspektør i høyre sidefelt - den fjerde kategorien fra venstre. Vi trenger bare å gjøre to justeringer.
Begynn med å endre typen av knappen fra System til Tilpasset. Dette vil gjøre knappen gjennomsiktig.
Den andre endringen vi må gjøre, er å fortelle brukeren hva han skal gjøre ved å endre knappens tittel. Tekstfeltet ved siden av etiketten Tittel for tiden leser Knapp. Endre dette til Trykk for å endre farge og sett Tekstfarge til svart så det er lesbart.
Hvis du er kjent med MVC (MOdel-Vforhåndsvisning-Controller) mønster, da har du en start på å lære iOS-utvikling. MVC-mønsteret er et mønster som finnes i mange språk og rammer, som Ruby on Rails og CodeIgniter.
Visningen i brukergrensesnittet faller i V kategori i MVC-mønsteret. En visning styres av en kontroller. Ta en titt på filnavnene i Prosjektnavigator til venstre. Filene representerer en visningskontroller som styrer visningen i brukergrensesnittet.
Hva gjør en visningskontroller? En visningskontroller kan gjøre hva du vil, men det er i første omgang ansvarlig for å håndtere alt som skjer i det syn at det forvalter. Dette inkluderer for eksempel berøringer fra brukeren. Hvis brukeren berører knappen i visningen, er det kontrollørens ansvar å håndtere berøringshendelsen.
Hvordan håndterer vi en berøringshendelse? Når det gjelder vår knapp, legger vi til en handling i visningsregulatoren. En handling er et fancy navn på en metode. Hva er en metode? En metode er i sin kjerne en C-funksjon. Vente. Hva? Ikke bekymre deg for terminologien for mye på dette punktet. De neste to innleggene vil dekke C og Mål-C mer detaljert. Det du trenger å huske er at en metode er som en metode i Ruby og PHP, eller en funksjon i JavaScript.
Hvis du påberoper en kontrollørens metode, gjør det noe som svar. Med andre ord, hvis en bruker berører knappen og vi kobler en metode til den berørte hendelsen, vil kontrolleren gjøre noe som svar på den berørte hendelsen.
For å legge til en handling i visningskontrolleren som styrer visningen i brukergrensesnittet, må vi gjøre noen endringer i filen som heter TSPViewController.h. Filer med a .h forlengelsen er headerfiler. En visningskontrollers headerfil inneholder informasjon om visningsregulatoren - klassen for visningskontrollen, for å være presis. Vi trenger bare å legge til en linje med kode til headerfilen. Ta en titt på hvordan jeg endret visningsregulatorens headerfil.
// // TSPViewController.h // Colorific // // Laget av Bart Jacobs på 27/03/14. // Copyright (c) 2014 Tuts +. Alle rettigheter reservert. // #import@interface TSPViewController: UIViewController - (IBAction) changeColor: (id) avsender; @slutt
Selv om vi ikke vil fokusere på syntaksen i denne opplæringen, er det ganske enkelt å forstå hva som skjer. Navnet på handlingen eller metoden er changeColor: og det har ett argument, avsender. Typen av argumentet er id, som betyr noe objekt. Hva er gjenstander igjen? Tålmodighet gresshopper. Handlingen slutter med en semikolon.
Vi har lagt til en handling for visningskontrolleren, men handlingen gjør ikke mye. Det vi har gjort er erklære en handling. Dette betyr ganske enkelt at enhver del av applikasjonen som tar en topp i tittelkontrollens headerfil, vet også at den har en handling som heter changeColor:. Det er som en restaurant som tilbyr deg menyen. Du kan se hva den har å tilby, men det viser deg ikke hva hvert element på menyen ser ut eller smaker som.
Det vi trenger å gjøre er å implementere handlingen, og det gjør vi i visningskontrollen implementeringsfil. Det er riktig. Filen med .m utvidelse er implementasjonsfilen. Velg filen som heter TSPViewController.m og se på innholdet.
Forventet du at det skulle være tomt? Xcode har gitt oss noen boilerplate-kode som er vanlig for visningskontrollere. Det fine med Objective-C er at det har svært lesbare metodenavn. Utviklere klager ofte på at metodenavnene er lange, men fordelen er at du vet hva en metode gjør bare ved å se på navnet.
Å implementere changeColor: handling, kopierer vi det vi skrev i headerfilen og erstattet bakkeskiven med en åpning og en lukkende krøllestang.
// // TSPViewController.m // Colorific // // Laget av Bart Jacobs på 27/03/14. // Copyright (c) 2014 Tuts +. Alle rettigheter reservert. // #import "TSPViewController.h" @interface TSPViewController () @end @implementation TSPViewController - (void) viewDidLoad [super viewDidLoad]; // Gjør eventuelle tilleggsoppsett etter at du har lastet opp visningen, vanligvis fra en nib. - (void) didReceiveMemoryWarning [super didReceiveMemoryWarning]; // Kast bort eventuelle ressurser som kan gjenopprettes. - (IBAction) changeColor: (id) avsender @end
Jeg har lagt til innholdet i hele implementasjonsfilen, slik at du kan se hvor du skal legge til implementeringsmetoden. Det må være etter @implementation TSPViewController og før sist @slutt. Legg også merke til at det ikke kan nestes i en annen metodeimplementering.
Det er på tide å gjøre noe nyttig i vår handling. Jeg skal ikke forklare hver linje av kode i detalj, men jeg vil gi deg kjennskap til hva som skjer.
- (IBAction) changeColor: (id) avsender int r = arc4random ()% 255; int g = arc4random ()% 255; int b = arc4random ()% 255; UIColor * farge = [UIColor colorWithRed: (r / 255.0) grønn: (g / 255.0) blå: (b / 255.0) alfa: 1.0]; [self.view setBackgroundColor: color];
Som du kanskje vet, er det mulig å bryte en farge ned i de tre primære fargene, rød, grønn og blå. I vår handling genererer vi tre tilfeldige tall mellom 0 og 255, og bruk disse tallene for å lage en tilfeldig farge.
Metoden vi bruker til å lage fargen er veldig beskrivende, colorWithRed, grønn, blå: a:. I den siste linjen av handlingen setter vi bakgrunnsfargen til visningen i brukergrensesnittet til denne nye, tilfeldig genererte fargen.
Ordet selv- refererer til visningsregulatoren. Ikke bekymre deg hvis ingen av dette gir mening. Det blir tydeligere når vi har dekket grunnleggende om C og Objective-C i de neste leksjonene.
Kommentarer er viktige når du skriver kode. Gjorde du spot på kommentarene jeg la til implementeringen av changeColor:? Enkeltlinjeproblemer begynner med to spisser i forkant (//), mens multiline kommentarer begynner med / * og avslutt med * /.
Metoden er implementert, men ingenting spektakulært vil skje når vi bygger og kjører applikasjonen. Prøv det hvis du ikke tror på meg.
Det som mangler er en forbindelse mellom knappen og visningskontrollens handling. Hvordan skal visningsansvarlig vite at changeColor: handling må utløses når knappen er tappet?
Å gjøre denne tilkoblingen er enkel. Åpne storyboardet ved å velge filen som heter Main.storyboard og velg Vis kontrolleren objekt i Se kontroller scene.
Med Vis kontrolleren objekt valgt, åpne Tilkoblingsinspektør i høyre sidefelt - den første kategorien fra høyre. Hvis du har fulgt trinnene riktig, bør du se vår nye handling i delen merket Mottatte handlinger.
Du bør se en tom sirkel til høyre for changeColor: handling. Klikk og dra fra sirkelen til knappen i brukergrensesnittet.
En meny vil dukke opp når du slipper musen. Pop-up-menyen inneholder en liste over berøringshendelsetyper. Berøringshendelsen som vi er interessert i er oppkalt Berør på innsiden. Denne hendelsen utløses når en bruker berører knappen og løfter fingeren. Dette er den vanligste oppførselen til de fleste knapper.
Etter at du har koblet til knappen og handlingen, bør du se at det rette sidebjelet gjenspeiler forbindelsen du nettopp har laget. Flott. Du har fullført din første virkelige søknad.
Bygg og kjør din søknad i iOS-simulatoren og start å trykke på simulatorens skjerm. Hver gang du trykker på skjermen, bør fargen skifte til en ny, tilfeldig farge. Hvor kult er det?
Vi har tatt mye grunnlag i denne opplæringen. Selv om dette innlegget var ganske lang, gjorde vi egentlig ikke veldig mye. Hvis du vet teorien, kan du opprette Colorific på mindre enn fem minutter.
I de neste to innleggene vil jeg dekke grunnleggende om C og Objective-C. Dette vil forberede deg på interessante ting i resten av serien.
Accentsconagua