Oppretter din aller første iOS-app.

Denne artikkelen vil lære deg hvordan du lager din helt egen iOS Tap Counter-app. Det er en veldig enkel app som ganske mye teller de gangene du trykker på trykknappen, og når du nullstiller, begynner den å telle fra null igjen. Her er en enkel forhåndsvisning av hva du vil lage.

Før vi fortsetter, vil jeg gi deg beskjed om at denne opplæringen kommer til å sjekke flere konsepter som startere. Ingenting er for sprø her ennå, men er en god start.

Oppsettet

  1. Først må du sørge for at Xcode er lastet ned. Forsikre deg om at du også har den siste XCode. Sjekk med App Store og sørg for at det ikke er nødvendig med en oppdatering.
  2. Jeg bruker Xcode 8.3.2 med Swift 3 på tidspunktet for opplæringen. Hvis du ser denne artikkelen når noe har endret seg eller ikke fungerer, vennligst gi meg beskjed så jeg kan endre artikkelen tilsvarende.
  3. Lag ditt første prosjekt. Kjør Xcode, og du bør være på en velkomstskjerm.
  4. Klikk på Opprett et nytt Xcode-prosjekt.
  5. Klikk på Single View Application da dette er en veldig enkel app og vi bruker View. Det er andre alternativer som spill - vel, du kan lage spill, iMessage-applikasjon - Lag en app for iMessage, dette kan være et tastatur, og et spill på tastaturet, og en sidebasert applikasjon - som ligner på iBooks, fordi det er mange sveipe og mindre interaksjon slags visninger.
  6. Klikk deretter på Neste og gi appen et navn i produktnavn. Velg Team og organisasjonsnavn, organisasjonsidentifikator. Forsikre deg om at språket er raskt. For enheter kan du velge hva du vil. Jeg skal bruke Universal-kan brukes til både iPad og iPhone. Men du kan bruke iPad-bare for iPad eller iPhone-bare for iPhone.
  7. Derfra vil Xcode be deg om å velge et sted du vil lagre dette prosjektet. Du kan velge å lagre den når du måtte ønske det.
  8. Når du er ferdig, bør du ha et ganske tomt prosjekt. Men det ordner vi snart.
  9. Klikk på Main.storyboard
  10. Dette er din Interface Builder. Det er her du gjør det meste av frontend-arbeidet. Du gjør designet og ser her.
  11. I nedre høyre hjørne er det her du kan velge elementer og kontrollere som TableViewController, knapper, etiketter og tekstvisninger.
  12. Det er en søkefelt der også som du kan bruke til å søke etter det du trenger.

Main.storyboard

  1. Søk etter navigasjonskontroller og dra den inn på skjermen.
  2. Derfra fjerner du rootViewController. Se på høyre rute, velg rootViewController. Trykk på "slett" -tasten. Nå kontroller og dra navigeringskontrolleren til View Controller og sett den som Root View Controller.

Du vil deretter klikke på Navigation Controller, og til høyre er det en tom avmerkingsboks som sier Er Initial View Controller. Forsikre deg om at du klikker på det

Hva det gjør er i utgangspunktet å fortelle Xcode å starte med navigasjonskontrolleren i stedet for bare utsikten. Dette er slik at navigasjonslinjen vår som vi har nå vil fungere. Navigeringslinjen er ganske mye linjen du så i videoen øverst med 'Teller' -tittel og en 'Tilbakestill' -knapp.

  1. Derfra vil du søke etter en etikett som er ‘biblioteket’ og dra den til visningskontrolleren.
  2. Søk nå etter knapp og gjør det samme, men to ganger.
  3. Derfra justerer du etikettene og knappene slik du vil ved å dra dem rundt. Linjene du ser når du flytter disse elementene er justeringer som lar deg vite at du justerer dem et sted. Når du er ferdig, kan du gå ut av tilbakestill-knappen i navigasjonsfeltet hvis du vil, det er det jeg gjorde, eller bare bruke din egen plassering. Ikke bekymre deg, det vil ikke påvirke funksjonaliteten.
  4. Nå vil vi vite hva som skulle se. Så med etikett, klikk på det to ganger, så kan du endre det fra etikett til det du ønsker. Siden dette er en teller, velger du et tall. Til høyre er det et Font-attributt. Som standard er det System Font 17. Gjør det større eller mindre, gjør det i henhold til dine preferanser. Jeg brukte 60. Du kan gjøre hva du vil.
  5. For knappene er det en tilbakestilling og et trykk. Så sørg for å merke dem tilsvarende. Du gjør stort sett det samme som du gjorde med Label. Men du trenger ikke å endre skrift. Du kan hvis du vil.
  6. Til slutt ønsker vi å ha en tittel på denne appen. Så på navigasjonsfeltet, klikk på den til linjen er uthevet. Du vil merke at høyre rute nå viser tittel, spørsmål og tilbake-knapp. endre tittel til en tittel du liker.

Nå bør du ha noe nærmere dette.

Den morsomme delen

Nå vil vi komme inn på kodingsdelen av denne appen. På toppen av Xcode er det en Assistent Editor-knapp. Det ser ut som et Venn-diagram.

Du skal nå se to ting, Interface Builder, og koden for View Controller. Det vi skal gjøre nå er å trykke på kontroll på tastaturet, holde fast i det og dra etiketten din inn i koden helt øverst. Gi etiketten et navn som ‘counterLabel’.

Nå som du har etikett, må du gjøre det samme for de to knappene. Men her er tingene endrer seg litt. I forbindelse klikker du på rullegardinmenyen og velger Handling - Dette lar oss få appen til å gjøre noe når brukeren banker på knappen. Gjør det samme for begge og gi dem et meningsfylt navn som ‘tapButtonTapped’.

Når du er ferdig med dette, klikker du på visningskontrolleren helt til venstre og endrer Assistent Editor tilbake til den normale som ser ut som en haug med linjer.

OK, først skriver vi denne koden i: var counter: Int = 0 (Dette er en variabel, som tillater er av typen Heltall, og vi setter den til null.) Det er en var og la, men vi vil komme inn på det med en annen artikkel. Men i utgangspunktet kan var endres, la kan ikke.

Nå som vi har en teller, må vi vise dette tallet. I viewDidLoad-funksjonen skriver du dette i counterLabel.text = Streng (teller) (så endre conterLabel til det du har navnet ditt. tellervariabelen vår er av typen int.

OK nå har vi i utgangspunktet at appen viser antallet ønsker at den skal åpnes. Vi må nå legge til funksjoner for å tilbakestille og trykke på. Vi starter med trykk.

Inne i IBAction for trykknappen vil vi legge til 1 hver gang brukeren banker på 1. Så det vi gjør er å legge til et nummer. Bytt deretter ut teksten i etiketten med nummer. Vi gjør det ved å gjøre følgende:

Nå etter at du har gjort dette, vil du forsikre deg om at du gjorde det riktig. Så kjør appen! Bruk CMD + R eller trykk på spillknappen på toppen.

Hvis du har lagt merke til, kan det hende at noe er galt, knappene kan være over alt. Men når du trykker på trykk, legger den til forrige nummer. Hvis du ikke ser knappeknappen, eller etikettene og knappene er over alt. Gå tilbake til Main.storyboard. Det vi skal gjøre nå er å sette dem på det stedet vi ønsker at det skal være. Fordi dette er en enkel tutorial. Jeg kommer ikke i dybden med begrensninger. Vi vil bruke Apples foreslåtte kontroverser. Så i Main.storyboard, sørg for at du er i View Controller. Bekreft at du er ved å klikke på noe i ViewController som bakgrunnen, men ikke elementene i View. Hvis du ser på Interface Builder er det en knapp du ser på bildet nedenfor, når du klikker på det, vil du se noen alternativer. Klikk på Tilbakestill til foreslåtte begrensninger. Nå kjør den igjen, og ting skal se litt kjent ut.

Knappen du trykker påMenyen du vil se.

Nå tilbake til IBActions

Inne i den andre IBA-enheten har vi den for tilbakestillingsknappen. Vi vil sette tallet tilbake til 0. Så vi gjør dette: antall = 0. Det er det, tallet er nå 0. Men det vises ikke på appen når du trykker på den. Gå på og prøv det. Kjør appen igjen.

Så for å fikse dette, er problemet at vi ikke har oppdatert counter Label, så vi trenger å gjøre det. Prøv å finne ut av dette. Hvis du fremdeles sitter fast, er svaret nederst på siden.

Nå har du stort sett lagt grunnleggende ned. Appen fungerer ganske mye. Du trykker på trykk, og den vil legge en til i telleren. Du treffer tilbakestilling og telleren er tilbake på 0.

Ekstra, ekstra!

Hvis du vil gjøre noe litt morsommere eller ekstra. Vi kan bli kvitt den stygge linjen på navigasjonsfeltet. Her er koden for det:

La oss adressere elefanten i rommet først, HVA SKJULER DET? gjør du der?

Det er valgfritt, ganske mye, det gir beskjed til Xcode om at det er en mulighet for at det ikke er noen navigasjonskontroller, og at det er greit å ha null eller at den er fraværende. Dette er slik at koden fremdeles kan kjøres hvis det ikke er noen kontroller. Valgfritt brukes først og fremst når det er en mulighet for null, men det påvirker ikke programmet så mye. Vi vil tillate null fordi den ikke endrer noe, men Xcode tillater det ikke som standard. Hvis den er null, vil appen krasje, så med valgfritt vil det være enklere.

Nå som blir behandlet, kan vi snakke kode.

Den første linjen er ganske mye innstilling og tomt bakgrunnsbilde. Hvis du bruker UIImage (), er det stort sett tomt og omgår behovet for å faktisk bruke et bilde av noe slag. Dette er slik at det ikke er noe bakgrunnsbilde.

Den andre linjen fjerner i utgangspunktet skyggebildet som i utgangspunktet er linjen / grensen i bunnen. Men du trenger begge to å jobbe fordi vi ikke vil ha noen av dem slik at linjen ikke vises.

Nå som det er gjort, har du en nøyaktig kopi av appen som vises i begynnelsen!

Svar: counterLabel.text = Streng (nummer)

Andy Wong

Andy er junior ved St. John's University. Han har en lidenskap for å bygge produkter, jobbe i teknologibransjen, prøve nye ting og generelt prøve å lære noe nytt daglig. Han er for tiden på jakt etter en programvareingeniør / utvikler internship i NYC eller San Francisco (Foretrukket ~ ble forelsket i byen). Den ene lidenskapen jeg har mer enn å bygge, er å bygge noe nyttig. Noe som hjelper mennesker på måter som aldri før var mulig.

La oss koble til! (Twitter) (Nettsted) (Linkedin)