Creating ditt første iOS Application
5
Del
29
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter Lær iOS SDK Development Fra Scratch.How å teste App på en iOS DeviceLearning C:. En Primer
Selv om vi allerede har lært mye i denne serien på iOS utvikling, er jeg sikker på at du er ivrig etter å begynne å bygge iOS-applikasjoner som gjør noe kult eller nyttig. I denne opplæringen, er ditt ønske innvilget. Ved hjelp av Xcode, vil du lage en iOS-prosjekt fra scratch, endre prosjektets kildekoden, og kjøre programmet på enten iOS Simulator eller en fysisk enhet.
Colorific
< p> Colorific er navnet på programmet som vi er i ferd med å bygge. Ideen bak Colorific er enkel, hver gang brukeren berører skjermen på enheten, fargen på skjermen endres. Selv om konseptet er grunnleggende, er Colorific perfekt for å komme i gang og utforske ins og outs av iOS utvikling.
1. Opprett et nytt Xcode Prosjekt
Som vi så tidligere i denne serien, går hver iOS søknad gjennom livet som en Xcode prosjekt. Hva er en Xcode prosjekt? En Xcode prosjekt er en beholder eller depot som inneholder filene, eiendeler, og informasjon som er nødvendig for å bygge ett eller flere produkter.
Merk at dette ikke er begrenset til et prosjekt kildekode og eiendeler, for eksempel bilder og andre medier. Et prosjekt holder også styr på sammenhengene mellom de ulike elementene og den vet hvordan å bygge sluttproduktene fra dens elementer
Fyr opp Xcode og opprette et nytt Xcode prosjekt ved å velge Ny >.; Prosjekt ...
fra Fil
menyen. Et alternativ er å trykke Shift + Command + N.
I tilfelle Xcode velkommen vindu dukker opp når du starter Xcode, foreslår jeg å lukke den slik at du lærer hvordan du oppretter et nytt prosjekt med Xcode meny. Anmeldelser
2. Velg en programmaler
Komme i gang med et nytt program eller prosjekt er lett i Xcode takket være applikasjonsmaler som følger med det. For programmet som vi er i ferd med å opprette, trenger vi Enkel visning Application mal. Føl deg fri til å ta en titt på de andre applikasjonsmaler, men sørg for å velge Enkel visning Søknad mal for Colorific.
3. Konfigurere Prosjekt
Når du har valgt Enkel visning Application mal og klikke 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
Produktnavn:. Produktnavnet vil være navnet på søknaden din. Jeg har kalt min søknad Colorific, men gjerne navnet ditt søknaden hva du ønsker
Organization Name:. Organisasjonen navn kan være ditt eget navn eller navnet på firmaet. Xcode bruker organisasjonen navn til ulike formål, for eksempel legge en opphavsrett til hver kildefilen
Selskap Identifier. Selskapet identifikator er en unik streng som Xcode bruker (sammen med produktnavnet) for å opprette programmets bunt identifikator. Apple anbefaler å vedta omvendt-domenet navnekonvensjon i et forsøk på å gjøre dette unike. Legg merke til at domenet som du bruker har ingen tilknytning til DNS-systemet eller Internett-domenenavn. For eksempel er mitt selskap som heter Kode Foundry og ligger i Belgia, noe som betyr at firmaet mitt identifikator er be.codefoundry. Men jeg kunne like godt bruke be.code-støperi eller com.codefoundry. For hensikten med denne opplæringen, har jeg satt selskapet identifikator til com.tutsplus
Bundle Identifier. Selv om du ikke kan angi bunt identifikator når du oppretter en ny Xcode prosjekt, du kan endre det når du har opprettet prosjektet. Som standard er bunten identifikator kombinasjonen av selskapet identifikator og produktnavnet. Husk at mellomrom i produktnavnet er erstattet med streker i bunten identifikator, fordi bunten identifikator må ikke inneholde mellomrom
Class Prefix:. Når du oppretter egendefinerte klasser i prosjektet, er det viktig at klassen navnene ikke kolliderer med eksisterende klasse navn. Ved å angi en klasse prefiks, vil Xcode prefiks nye klasser med denne skikken klassen prefiks for å sørge for at navnekollisjoner er avverget. En vanlig metode er å bruke dine initialer, BJ i mitt tilfelle, eller en kombinasjon som refererer til din bedrift eller organisasjon, slik som TSP for Tuts +
Enheter. I den gjeldende versjonen av Xcode (5.1 på den tiden i skrivende stund), enhetene nedtrekksmenyen inneholder tre alternativer, iPad, iPhone, og Universal. Dette alternativet konfigurasjonen forteller Xcode hvilke enheter prosjekt målrettet mot. Ved å velge det siste alternativet, Universal, prosjekt mål både iPad og iPhone-enheten familie. IPod Touch er medlem av iPhone-enheten familie som du kanskje har gjettet.
Du skal nå ha en god forståelse av de ulike konfigurasjonsmuligheter når du setter opp en ny Xcode prosjekt. For dette prosjektet, anbefaler jeg at du bruker alternativene som vist i skjermbildet over. Merk at de fleste alternativene kan enkelt endres etter at du har opprettet prosjektet. Klikk på Neste når du er ferdig med å konfigurere prosjektet.
4. Lagre prosjektet
I neste trinn, spør Xcode hvor du vil lagre det nye prosjektet. Du har kanskje lagt merke til den lille boksen nederst i vinduet merket Opprett en git repository på My Mac. Den grå teksten under avkrysnings leser Xcode vil plassere prosjektet under versjonskontroll.
Som jeg nevnte tidligere 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 utvikling av programvare, så jeg anbefaler å lese opp på kildekontroll.
Git er den mest populære SCM ( Kildekode Ledelse
) system i Cocoa samfunnet. Men det er fullt mulig å bruke et annet SCM-system, slik som SVN eller Mercurial.
Fortell Xcode hvor du vil lagre prosjektet, krysser av for å autorisere Xcode å opprette en git repository for prosjektet, og klikk på Opprett-knappen.
5. Exploring Xcode brukergrensesnitt
Før vi går videre, ønsker jeg å ta noen minutter å utforske Xcode brukergrensesnitt. Du kan se fire forskjellige områder:
en verktøylinje øverst
en sidebar på venstre
en hovedvisningen i sentrum
en sidebar til rett
Toolbar
verktøylinjen øverst inneholder knapper og menyer som du finner deg selv å bruke ofte. Som vi så tidligere i denne serien, til knappene kjøre og stoppe et program lever i verktøylinjen.
I displayet i midten av verktøylinjen er lik den skjermen du finner i iTunes. Den viser informasjon om prosjektets tilstand, for eksempel, vil den fortelle deg når en bygge lykkes eller mislykkes.
De to segmentkontroller på høyre side av verktøylinjen kan brukes til å tilpasse Xcode brukergrensesnitt. Lek litt med de ulike kontroller for å finne ut hvordan hver av dem endrer Xcode brukergrensesnitt.
Navigator
Hovedformålet med sidepanelet til venstre er for navigasjon og det er ofte referert til som Xcode navigatør.
navigator har forskjellige faner med prosjektet Navigator helt til venstre. Utvalget i venstre sidebar bestemmer hva som skal vises i Xcode hovedvisningen arbeidsområdet.
Main View eller arbeidsområde
Hoved visning eller arbeidsområde er området der du vil tilbringe mesteparten av tid. Det er Xcode arbeidshest og viser hva som er valgt i navigatoren.
Inspector
Mens venstre sidebar styrer hva som blir vist i Xcode hovedvisningen innholdet i høyre sidebar gjenspeiler hva som blir vist eller valgt i hovedvisningen.
Den høyre sidebar, også kjent som inspektør, tilpasser seg til hva brukeren velger i hovedvisningen.
6. Utforske Prosjekt
Det er på tide å ta en titt på selve prosjektet. Prosjektets innhold vises i Prosjekt Navigator, den første kategorien i venstre sidebar. Velg første elementet
i prosjekt Navigator å se prosjektet detaljer i hovedvisningen.
Hovedvisningen er sammensatt av to deler, en sidebar på venstre side og en detaljvisning på høyre. I sidepanelet, ser du to elementer, prosjektet 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 jeg nevnte tidligere, er et prosjekt et oppbevaringssted for filene, eiendeler og data som kreves for å bygge ett eller flere produkter. Et mål, men refererer seg til en av disse produktene. Et mål inneholder de nødvendige instruksjoner for å bygge et produkt med prosjektets ressurser. Dette betyr at et prosjekt kan inneholde flere mål å bygge flere produkter. Som du kan se, er en Xcode prosjektet mer enn bare en mappe med en haug av filer i den.
7. Bygg og Run: Ta en
Før vi begynner å modifisere kildekoden til prosjektet, kan det være interessant å bygge og drive det nye prosjektet for å se hva programmet malen har gitt oss gratis. Klikk på Kjør-knappen øverst til venstre, og sørge for at den aktive ordningen er konfigurert til å kjøre programmet i iOS Simulator ved å velge iPhone Retina (4 tommer)
.
Hvis alt gikk vel, bør iOS Simulator starte programmet og vise en tom, hvit syn med den velkjente statuslinjen øverst.
8. Endre brukergrensesnitt
La oss få våre hender skitne og endre programmets brukergrensesnitt. Åpne Prosjekt Navigator og velg filen som heter Main.storyboard
. En fil med et .storyboard utvidelsen er et brukergrensesnitt-fil. I denne filen, skaper vi brukergrensesnittet i programmet.
Dreieboken inneholder ett element, en visning kontroller med den hvite visningen du så i iOS Simulator en liten stund siden. Arbeidsområdet er sammensatt av et sidepanel som viser objektet representasjon av scener
av dreieboken. Den største delen av arbeidsområdet inneholder scener eller brukergrensesnittet i programmet.
Velg objektet som heter Vis i View Controller
Scene
i venstre sidebar og se hvordan arbeidsområdet og høyre sidebar oppdatere innholdet. En haug med faner vises øverst i høyre sidebar. Hver av kategoriene inneholder en samling av attributter knyttet til objektet som heter View.
Den nedre halvdel av høyre sidepanelet inneholder en seksjon med fire kategorier. Den tredje kategori er representert ved et bilde av et tredimensjonalt boks. Denne boksen er hvordan objekter er vanligvis vises i Xcode.
Klikk på fanen med boksen ikonet og bla gjennom listen som vises. Listen er referert til som objektbiblioteket og inneholder ulike elementene i brukergrensesnittet, for eksempel knapper, glidere, og brytere.
Ved starten av denne opplæringen, jeg fortalte deg at vi skulle lage et program med noen bruker interaktivitet. Brukeren skal kunne berøre skjermen for å endre fargen.
Oppdage innslag i en iOS-applikasjonen kan gjøres på flere måter. En løsning er å bruke en knapp. I Object Library
, finne elementet heter
UIButton og dra den fra objektbiblioteket til den hvite utsikten i Xcode sin arbeidsplass.
Brukeren skal kunne berøre en hvilken som helst del av skjermen, hvilket innebærer at knappen skal dekke hele skjermen. Har du lagt merke til de seks, små firkanter på knappen kanter? Ved å flytte de små firkanter, kan du endre knappe dimensjoner.
Juster størrelsen på knappen for å gjøre det dekker hele skjermen. Ikke bekymre deg om statuslinjen øverst på skjermen.
Utsikten bak knappen er utsikten som vil endre farge når brukeren berører skjermen. I øyeblikket er knappen blokkerer utsikten fra brukerens syn så vi må endre knappens attributter.
Du har kanskje lagt merke til at har blitt lagt til listen over objekter på knappen i venstre sidebar, under objektet som heter View. Velg knappen fra listen over objekter og velge attributter Inspektør i høyre sidebar-fjerde fanen fra venstre. Vi trenger bare å gjøre to justeringer.
Start ved endring av type knappen fra System til Custom. Dette vil gjøre knappen gjennomsiktig.
Den andre endringen vi trenger å gjøre er å fortelle brukeren hva som skal gjøres ved å endre tittelen på knappen. Tekstfeltet ved siden av etiketten Tittel leser for tiden knapp. Endre dette til Trykk for å endre farge Hotell og sette Tekst Color
til svart, så det er lesbar.
9. Legg en handling til View Controller
Hvis du er kjent med MVC (Model-View-Controller) mønster, da har du et forsprang lære iOS utvikling. MVC mønsteret er et mønster som finnes i mange språk og rammeverk som Ruby on Rails og CodeIgniter.
Visningen i vår brukergrensesnittet faller i V kategori i MVC mønsteret. En visning styres av en styreenhet. Ta en titt på filnavnene i Prosjekt Navigator
til venstre. Filene representerer et syn kontrolleren som styrer visningen i vår brukergrensesnittet.
Hva gjør en visning controller gjøre? En visning kontrolleren kan gjøre hva du vil, men det er i utgangspunktet ansvarlig for å håndtere alt som skjer i den oppfatning at den klarer. Dette inkluderer for eksempel berører fra brukeren. Hvis brukeren berører knappen i visningen, er det kontrollerens ansvar å håndtere berørings hendelsen.
Hvordan takler vi et snev arrangement? I tilfelle av vår knappen, legger vi en handling til visningen kontrolleren. En handling er et fancy navn på en metode. Hva er en metode? En metode er ved sin kjerne et C-funksjon. Vente. Hva? Ikke bekymre deg om terminologien for mye på dette punktet. De neste to innleggene vil dekke C og Objective-C i mer detalj. Hva du trenger å huske er at en metode er som en metode i Ruby og PHP, eller en funksjon i Javascript.
Hvis du benytter en metode for en kontroller, gjør det noe svar. Med andre ord, hvis en bruker berører knappen og vi kobler en metode som berøring hendelse, så kontrolleren vil gjøre noe som svar på at kontakten hendelsen.
For å legge til en handling til visningen kontrolleren som styrer visningen i vår brukergrensesnitt, må vi gjøre noen endringer i filen som heter TSPViewController.h. Filer med en .h forlengelse er header-filer. En visning kontrollerens header filen inneholder informasjon om visningen controller-visningen kontrolleren klasse, for å være presis. Vi trenger bare å legge en linje med kode til header filen. Ta en titt på hvordan jeg endret syn kontrollerens header fil.
////TSPViewController.h //Colorific ////Laget av Bart Jacobs på 27/03/14 .//Copyright (c) 2014 Tuts +. Alle rettigheter reservert .//# import < UIKit /UIKit.h >interface TSPViewController: UIViewController- (IBAction) changeColor: (id) avsender;end
Selv om vi ikke vil fokusere på syntaksen i denne opplæringen er det ganske lett å forstå hva som skjer. Navnet på handlingen eller metoden er changeColor: og den har ett argument, avsender. Den type argumentet er id, som betyr et objekt. Hva er objekter igjen? Tålmodighet gresshoppe. Handlingen avsluttes med et semikolon.
10. Implementere Handling
Vi har lagt til en handling til visningen kontrolleren, men handlingen gjør ikke mye. Det vi har gjort er å erklære en handling. Det betyr ganske enkelt at alle deler av programmet som tar en topp på visningen kontrollerens header fil vet også at den har en handling som heter changeColor :. Det er som en restaurant som tilbyr deg på menyen. Du kan se hva den har å tilby, men det betyr ikke vise deg hva hvert element på menyen ser eller smaker som.
Det vi trenger å gjøre er å gjennomføre handlingen, og vi gjør det i visningen kontrolleren implementering fil. Det er riktig. Filen med BFD utvidelsen er gjennomføringen filen. Velg filen som heter TSPViewController.m og ta en titt på innholdet.
Har du forventer at det skal være tom? Xcode har gitt oss noen standardtekst kode som er vanlig for visning kontrollere. Det fine med Objective-C er at den har svært lesbare metodenavn. Utviklere ofte klager over at metodenavn er lange, men fordelen er at du vet hva en metode gjør bare ved å se navnet sitt
For å gjennomføre changeColor. Handling, kopierer vi hva vi skrev i overskriften filen og erstatte den etterfølgende semikolon med en åpning og en avsluttende krøllete brace.
////TSPViewController.m //Colorific ////Laget av Bart Jacobs på 27/03/14 .//Copyright (c) 2014 Tuts + . Alle rettigheter reservert .//# import "TSPViewController.h"@interface TSPViewController () @ enden @ implementering TSPViewController- (void) viewDidLoad {[super viewDidLoad]; //Gjør noe ekstra oppsett etter lasting utsikten, vanligvis fra en spiss} - (void) didReceiveMemoryWarning {[super didReceiveMemoryWarning].; //Kast noen ressurser som kan gjenskapes} - (IBAction) changeColor:. (Id) avsender {}end
Jeg har lagt innholdet i hele gjennomføringen filen slik at du kan se hvor du bør legge metoden gjennomføring. Det må være etterimplementation TSPViewController og før den sisteend. Vær også oppmerksom på at det ikke kan være nestet i en annen metode gjennomføringen.
Det er på tide å gjøre noe nyttig i vår aksjon. Jeg kommer ikke til å forklare hver linje med kode i detalj, men jeg skal gi deg kjerne av hva som skjer Anmeldelser - (IBAction) changeColor:. (Id) avsender {int r = arc4random ()% 255; int g = arc4random ()% 255; int b = arc4random ()% 255; UIColor * color = [UIColor colorWithRed: (r /255,0) green: (g /255,0) blue: (b /255,0) alpha: 1,0]; [self.view setBackgroundColor: farge];}
Som du kanskje vet, er det mulig å bryte en farge ned i de tre primærfargene, rød, grønn og blå. I vår aksjon, genererer vi tre tilfeldige tall mellom 0 og 255, og bruke disse tallene til å lage en tilfeldig farge
Den metoden vi bruker for å skape fargene er veldig beskrivende, colorWithRed.: Green: blå: alpha: . I den siste linjen i vår handling, setter vi den bakgrunnsfargen på visning i vår brukergrensesnittet til denne nye, tilfeldig genererte farge.
Ordet selv refererer til visningen kontrolleren. Ikke bekymre deg hvis ikke noe av dette er fornuftig. Det vil bli mer tydelig når vi har dekket det grunnleggende C og Objective-C i løpet av de neste timene.
Kommentarer er viktig når du skriver kode. Visste du øye på de kommentarene jeg har lagt til gjennomføringen av changeColor :? Enkelt linje kommentarer starte med to skråstreker (//), mens flere linjer kommentarer begynner med /* og avslutt med * /.
11. Koble Handling
Metoden er implementert, men ikke noe spektakulært som vil skje når vi bygge og kjøre programmet. Gi det en sjanse hvis du ikke tror meg.
Hva er savnet er en sammenheng mellom knappen og utsikten kontrollerens handling. Hvordan bør visningen kontrolleren vet at changeColor: tiltak må bli utløst når det bankes på knappen
Å gjøre denne sammenhengen er enkel. Åpne dreieboken ved å velge filen som heter Main.storyboard Hotell og velg View Controller
objekt i View Controller Scene
.
Med < b> View Controller
objekt valgt, åpner Connections Inspektør i høyre sidebar-den første kategorien fra høyre. Hvis du har fulgt trinnene riktig, bør du se vår nye tiltak i den delen som er merket mottatte Handlinger
Du bør se en tom sirkel på høyre for changeColor. Handling. Klikk og dra fra sirkelen til knappen i vår brukergrensesnittet.
En meny vil komme opp når du slipper muse. Hurtigmenyen inneholder en liste over typer berøring hendelses. Berørings tilfelle at vi er interessert i er oppkalt Touch Up Inside. Denne hendelsen utløses når en bruker berører knappen og løfter fingeren hennes. Dette er den vanligste oppførselen til de fleste knapper.
Etter å ha koblet knappen og handlingen, skal du se at retten sidebar reflekterer tilkoblingen du nettopp laget. Flott. Du har fullført din første virkelige søknaden.
12. Bygg og Run: Take 2
bygge og kjøre programmet i iOS Simulator og begynne å trykke på simulator skjerm. Hver gang du trykker på skjermen, bør fargen endres til en ny, tilfeldig farge. Hvor kult er ikke det?
Konklusjon
Vi har dekket mye bakken i denne opplæringen. Selv om dette innlegget var ganske lang, ikke vi faktisk gjøre veldig mye. Hvis du kjenner teorien, kan du opprette Colorific på mindre enn fem minutter.
I de neste to innleggene, jeg vil dekke grunnleggende C og Objective-C. Dette vil forberede deg for interessante ting i resten av serien.