Oprettelse af din allerførste iOS-app.

Denne artikel vil lære dig, hvordan du opretter din helt egen iOS Tap Counter-app. Det er en rigtig enkel app, der stort set tæller de gange, du trykker på tap-knappen, og når du nulstiller, begynder den at tælle fra nul igen. Her er en simpel forhåndsvisning af, hvad du vil oprette.

Inden vi fortsætter, vil jeg fortælle dig, at denne tutorial vil tjekke flere koncepter som startere. Intet for skør her endnu, men er en god starter.

Opsætningen

  1. Først skal du sikre dig, at du har downloadet Xcode. Sørg for, at du også har den nyeste XCode. Kontroller med App Store, og sørg for, at der ikke er behov for en opdatering.
  2. Jeg bruger Xcode 8.3.2 med Swift 3 på det tidspunkt, hvor denne tutorial er op. Hvis du ser, at denne artikel har ændret sig eller ikke fungerer, så lad mig det vide, så jeg kan ændre artiklen i overensstemmelse hermed.
  3. Opret dit første projekt. Kør Xcode, og du skal være ved en velkomstskærm.
  4. Klik på Opret et nyt Xcode-projekt.
  5. Klik på Single View-applikationen, da dette er en meget enkel app, og vi bruger View. Der er andre muligheder, såsom spil - godt du kan oprette spil, iMessage-applikation - Opret en app til iMessage, dette kan være et tastatur, og et spil på tastaturet og en sidebaseret applikation - svarende til iBooks, idet der er mange swiping og mindre interaktion slags visninger.
  6. Klik derefter på Næste og give appen et navn i produktnavnet. Vælg team- og organisationsnavn, organisationsidentifikator. Sørg for, at sproget er hurtigt. For enheder kan du vælge, hvad du vil. Jeg vil bruge Universal-kan bruges til både iPad og iPhone. Men du kan kun bruge iPad til iPad eller iPhone kun til iPhone.
  7. Derfra vil Xcode bede dig om at vælge et sted, der skal gemme dette projekt. Du kan vælge at gemme det, hvor du end vil.
  8. Når du er færdig, skal du have et temmelig tomt projekt. Men vi ordner det snart.
  9. Klik på Main.storyboard
  10. Dette er din interface-builder. Det er her du laver det meste af frontend-arbejdet. Du laver designet og ser her.
  11. I nederste højre hjørne er det her du kan vælge emner og controllere som TableViewController, knapper, etiketter og tekstvisninger.
  12. Der er en søgelinje der også, som du kan bruge til at søge efter det, du har brug for.

Main.storyboard

  1. Søg efter navigationskontroller, og træk den ind på skærmen.
  2. Fjern derfra rootViewController. Se på højre rude, vælg rootViewController. Tryk på 'slet' -tasten. Gør nu kontrol og træk navigationskontrollen til View Controller og indstil den til Root View Controller.

Du skal derefter klikke på Navigation Controller, og til højre er der et tomt afkrydsningsfelt, der siger Er Initial View Controller. Sørg for, at du klikker på det

Hvad det gør er grundlæggende at fortælle Xcode at starte med navigationskontrollen snarere end bare visningen. Dette er så vores navigationslinje, som vi nu har, fungerer. Navigationslinjen er stort set den bjælke, du så i videoen øverst med 'Tæller' -titel og en 'Nulstil' -knap.

  1. Derfra vil du søge efter en etiket er 'Bibliotek' og trække det til View Controller.
  2. Søg nu efter knap, og gør den samme ting, men to gange.
  3. Juster derfra etiketter og knapper, som du vil ved at trække dem rundt. De linjer, du ser, når du flytter disse elementer, er justeringer, der lader dig vide, at du justerer dem et eller andet sted. Når du er færdig, kan du fjerne nulstillingsknappen på navigationslinjen, hvis du vil, hvilket er, hvad jeg gjorde, eller bare bruge din egen placering. Bare rolig, det vil ikke påvirke funktionaliteten.
  4. Nu vil vi vide, hvad der ville se. Så med Label, skal du klikke på det to gange, så kan du ændre det fra Label til det, du ønsker. Da dette er en tæller, skal du vælge et nummer. Til højre er der en fontattribut. Som standard er det System Font 17. Gør det større eller mindre, gør det i henhold til dine præferencer. Jeg brugte 60. Du kan gøre, hvad du kan lide.
  5. For knapperne er der en nulstilling og et tryk på. Så sørg for at mærke dem i overensstemmelse hermed. Du gør stort set det samme, som du gjorde med Label. Men du behøver ikke at ændre skrifttypen. Du kan hvis du vil.
  6. Til sidst vil vi have en titel til denne app. Så på navigationslinjen skal du klikke på den, indtil linjen er fremhævet. Du vil bemærke, at den højre rude nu viser Titel, Prompt og Tilbage-knap. skift titel til en titel, du kan lide.

Nu skulle du have noget tættere på dette.

Den sjove del

Nu vil vi komme ind i kodningsdelen af ​​denne app. Øverst på Xcode er der en Assistent Editor-knap. Det ligner et Venn-diagram.

Du skal nu se to ting, Interface Builder og koden til View Controller. Hvad vi vil gøre nu er at trykke på kontrol på dit tastatur, holde fast ved det og trække din etiket ind i koden helt øverst. Giv etiketten et navn som 'counterLabel'.

Nu når du har etiket, skal du gøre det samme for de to knapper. Men her er tingene ændrer sig lidt. I forbindelse skal du klikke på rullemenuen og vælge Handling - Dette giver os mulighed for at lade appen gøre noget, når brugeren banker på knappen. Gør det samme for begge dele, og giv dem et meningsfuldt navn som 'tapButtonTapped'.

Én, du er færdig med, skal du klikke på visningskontrolleren i venstre rude og skifte Assistent Editor tilbage til den normale, der ligner en masse linjer.

Okay, først skriver vi denne kode i: var counter: Int = 0 (Dette er en variabel, der tillader er af typen Integer, og vi indstiller den til nul.) Der er en var og lad, men vi kommer ind på det med en anden artikel. Men dybest set kan ændres, lad ikke kan.

Nu hvor vi har en tæller, er vi nødt til at vise dette nummer. I funktionen viewDidLoad skal du indtaste dette i counterLabel.text = String (tæller) (så ændre conterLabel til hvad du navngav din label. .Text giver os grundlæggende mulighed for at ændre teksten i etiketten. String () konverterer hvad der er inde i en streng siden vores tællervariabel er af typen int.

Okay nu har vi dybest set, at appen viser antallet, der skal åbnes. Vi skal nu tilføje funktioner for at nulstille og trykke på. Vi starter med tryk.

Inde i IBAction for tap-knappen vil vi tilføje 1 hver gang brugeren tapper 1. Så hvad vi gør er at tilføje et til nummer. Udskift derefter teksten i etiketten med nummer. Det gør vi ved at gøre følgende:

Nu når du gør dette, vil du sikre dig, at du gjorde det rigtigt. Så kør appen! Brug CMD + R eller tryk på afspilningsknappen øverst.

Hvis du har bemærket, er der muligvis noget galt, kan knapperne være overalt. Men når du rammer tap, tilføjes det til det forrige nummer. Hvis du ikke kan se knappeknappen, eller etiketter og knapper er overalt. Gå tilbage til Main.storyboard. Hvad vi vil gøre nu, er at indstille dem til det sted, vi ønsker, at det skal være. Fordi dette er en simpel tutorial. Jeg kommer ikke i dybden med begrænsninger. Vi bruger Apples foreslåede kontrakter. Så i Main.storyboard skal du sørge for, at du er i View Controller. Bekræft, at du er ved at klikke på noget i ViewController som baggrunden, men ikke elementerne i View. Hvis du ser på Interface Builder er der en knap, som du kan se på billedet herunder, når du klikker på det, ser du nogle muligheder, klik på Nulstil til foreslåede begrænsninger. Kør det nu igen, og tingene skal se lidt kendte ud.

Den knap, du trykker påDen menu, du vil se.

Nu tilbage til IBActions

Inde i den anden IBAction har vi den til nulstillingsknappen. Vi vil indstille tallet tilbage til 0. Så vi gør det: tal = 0. Det er det, tallet er nu 0. Men det vises ikke på appen, når du trykker på den. Gå videre og prøv det. Kør appen igen.

Så for at løse dette er problemet, at vi ikke har opdateret counter-mærket, så vi er nødt til at gøre det. Prøv at finde ud af dette. Hvis du stadig sidder fast, er svaret nederst på siden.

Nu har du stort set tilføjet de grundlæggende elementer. Appen fungerer stort set. Du trykker på tryk, og det tilføjer en til tælleren. Du rammer nulstilling, og tælleren er tilbage på 0.

Ekstra, ekstra!

Nu, hvis du vil gøre noget lidt sjovere eller ekstra. Vi kan slippe af med den grimme linje på navigationslinjen. Her er koden til det:

Lad os adressere elefanten i rummet først, HVILKEN ER DET? gør der?

Det er en valgfri, temmelig meget, det lader Xcode vide, at der er en mulighed for, at der ikke er nogen navigationController, og at det er okay at have nul eller at det er fraværende. Dette er så koden stadig kan køre, hvis der ikke er nogen controller. Valgfrit bruges primært, når der er en mulighed for nul, men det påvirker ikke programmet meget. Vi vil tillade nul, fordi det ikke ændrer noget, men Xcode tillader det ikke som standard. Hvis det ikke er tilfældet, vil appen gå ned, så med det valgfri vil det være lettere.

Nu der bliver behandlet, lader talekode.

Den første linje er stort set indstilling og tomt baggrundsbillede. Hvis du bruger UIImage (), er det stort set tomt og omgår behovet for faktisk at bruge et billede af enhver art. Dette er således, at der ikke er noget baggrundsbillede.

Den anden linje fjerner dybest set skyggebilledet, der dybest set er linjen / kanten i bunden. Men du har begge brug for at arbejde, fordi vi ikke ønsker nogen af ​​dem, så linjen ikke vises.

Nu er det gjort, har du en nøjagtig kopi af den app, der vises i begyndelsen!

Svar: counterLabel.text = String (nummer)

Andy Wong

Andy er junior ved St. John's University. Han har en lidenskab for at bygge produkter, arbejde i tech-branchen, prøve nye ting og generelt forsøge at lære noget nyt dagligt. Han er i øjeblikket på udkig efter en softwareingeniør / udvikler-praktik i NYC eller San Francisco (Foretrukket ~ blev forelsket i byen). Den eneste lidenskab, jeg har mere end at bygge, er at opbygge noget nyttigt. Noget, der hjælper mennesker på måder, der aldrig før var muligt.

Lad os forbinde! (Twitter) (Homepage) (Linkedin)