Uw allereerste iOS-app maken.

Dit artikel leert je hoe je je eigen iOS Tap Counter-app kunt maken. Het is een heel eenvoudige app die vrijwel de tijden telt dat je op de tikknop drukt en wanneer je reset, begint hij weer vanaf nul te tellen. Hier is een eenvoudig voorbeeld van wat u gaat maken.

Voordat we verder gaan, wil ik je laten weten dat deze tutorial verschillende concepten als starters gaat controleren. Niets is hier te gek, maar het is een prima starter.

De opzet

  1. Eerst moet je ervoor zorgen dat je Xcode hebt gedownload. Zorg ervoor dat je ook de nieuwste XCode hebt. Neem contact op met de App Store en zorg dat er geen update nodig is.
  2. Ik gebruik Xcode 8.3.2 met Swift 3 op het moment dat deze tutorial klaar is. Als tegen de tijd dat je dit artikel ziet iets is veranderd of niet werkt, laat het me weten zodat ik het artikel dienovereenkomstig kan wijzigen.
  3. Maak je eerste project. Voer Xcode uit en je zou op een welkomstscherm moeten zijn.
  4. Klik op Een nieuw Xcode-project maken.
  5. Klik op Single View Application omdat dit een zeer eenvoudige app is en we View gebruiken. Er zijn andere opties zoals Games - nou ja, je kunt games maken, iMessage-applicatie - Maak een app voor de iMessage dit kan een toetsenbord zijn, en een game op het toetsenbord en een op pagina's gebaseerde applicatie - vergelijkbaar met iBooks omdat er veel vegen en minder interactie soort weergaven.
  6. Klik vervolgens op Volgende en geef de app een naam in Productnaam. Kies Team- en organisatienaam, organisatie-ID. Zorg ervoor dat de taal snel is. Voor apparaten kunt u kiezen wat u leuk vindt. Ik ga Universal gebruiken - kan worden gebruikt voor zowel iPad als iPhone. Maar u kunt alleen iPad gebruiken voor de iPad of alleen iPhone voor de iPhone.
  7. Van daaruit vraagt ​​Xcode u om een ​​locatie te kiezen om dit project op te slaan. U kunt ervoor kiezen om het op te slaan waar u maar wilt.
  8. Nadat u klaar bent, zou u een vrij leeg project moeten hebben. Maar dat zullen we snel oplossen.
  9. Klik op Main.storyboard
  10. Dit is je Interface Builder. Dit is waar je het meeste front-end werk doet. Jij doet het ontwerp en kijkt hier.
  11. In de rechterbenedenhoek kunt u hier items en controllers selecteren, zoals TableViewController, knoppen, labels en tekstweergaven.
  12. Er is ook een zoekbalk die u kunt gebruiken om te zoeken naar wat u nodig hebt.

Main.storyboard

  1. Zoek naar de navigatiecontroller en sleep deze naar het scherm.
  2. Verwijder vanaf daar de rootViewController. Kijk naar het rechterdeelvenster en selecteer rootViewController. Druk op de ‘delete’ toets. Voer nu de besturing uit en sleep de navigatiecontroller naar de View Controller en stel deze in als Root View Controller.

U klikt vervolgens op Navigatiecontroller en aan de rechterkant is er een leeg selectievakje met de tekst Is Initial View Controller. Zorg ervoor dat je daarop klikt

Wat dat doet, is in feite Xcode vertellen om met de navigatiecontroller te beginnen in plaats van alleen het uitzicht. Dit is dus onze navigatiebalk die we nu hebben zal werken. De navigatiebalk is zo ongeveer de balk die u in de video bovenaan zag met de titel 'Teller' en een knop 'Reset'.

  1. Van daaruit gaat u op zoek naar een label met de ‘Bibliotheek’ en sleept u dat naar de View Controller.
  2. Zoek nu naar de knop en doe hetzelfde maar twee keer.
  3. Lijn vanaf daar de labels en knoppen uit zoals u wilt door ze rond te slepen. De lijnen die u ziet terwijl u deze items verplaatst, zijn uitlijningen die u laten weten dat u het ergens uitlijnt. Nadat je klaar bent, kun je de resetknop op de navigatiebalk uitschakelen als je wilt, wat ik deed, of gewoon je eigen plaatsing gebruiken. Maak je geen zorgen, dit heeft geen invloed op de functionaliteit.
  4. Nu willen we weten wat we zouden gaan zien. Dus met Label, klik er twee keer op om het te veranderen van Label naar wat je wilt. Aangezien dit een teller is, kies een nummer. Nu is er rechts een kenmerk Font. Standaard is het systeemlettertype 17. Maak het groter of kleiner, doe het volgens uw voorkeur. Ik gebruikte 60. Je kunt doen wat je wilt.
  5. Voor de knoppen is er een reset en een tik. Zorg er dus voor dat u ze dienovereenkomstig labelt. Je doet vrijwel hetzelfde als met Label. Maar u hoeft het lettertype niet te wijzigen. Je kunt als je wilt.
  6. Ten slotte willen we een titel voor deze app hebben. Dus klik op de navigatiebalk erop totdat de balk is gemarkeerd. U zult merken dat het rechterdeelvenster nu de knop Titel, Aanwijzing en Terug toont. verander Titel in een titel die je leuk vindt.

Nu zou je hier iets dichterbij moeten hebben.

Het leuke gedeelte

Nu willen we in het coderingsgedeelte van deze app komen. Bovenaan Xcode bevindt zich een Assistent-editorknop. Het lijkt op een Venn-diagram.

U zou nu twee dingen moeten zien, de Interface Builder en de code voor View Controller. Wat we nu gaan doen, is druk op de knop op uw toetsenbord, houd het vast en sleep uw label naar de code bovenaan. Geef het label een naam als ‘counterLabel’.

Nu je een label hebt, moet je hetzelfde doen voor de twee knoppen. Maar hier is waar dingen een beetje veranderen. Klik in verband op de vervolgkeuzelijst en selecteer Actie - Hiermee kunnen de app iets doen wanneer de gebruiker op de knop tikt. Doe hetzelfde voor beide en geef ze een betekenisvolle naam zoals ‘tapButtonTapped’.

Als je hiermee klaar bent, klik je op de weergavecontroller in het linkerdeelvenster en verander je de Assistent-editor terug naar de normale die eruit ziet als een aantal regels.

Oké, eerst typen we deze code in: var counter: Int = 0 (Dit is een variabele, die toestaat is van het type Integer, en we stellen het in op nul.) Er is een var en laat maar we zullen daarop ingaan een ander artikel. Maar in principe kan var worden gewijzigd, laat niet.

Nu we een teller hebben, moeten we dit nummer laten zien. In de viewDidLoad-functie typt u dit in counterLabel.text = String (counter) (dus verander conterLabel in wat u ook uw label noemde. .Text laat ons in principe de tekst in het label wijzigen. String () converteert alles wat zich binnen in een string bevindt sinds onze tegenvariabele is van het type int.

Oké, nu hebben we de app in principe het nummer laten zien dat hij geopend is. We moeten nu functies toevoegen om te resetten en te tikken. We beginnen met tikken.

Binnen de IBAction voor de tikknop willen we 1 toevoegen telkens wanneer de gebruiker op 1 tikt. Dus wat we doen is er een toevoegen aan nummer. Vervang vervolgens de tekst op het etiket door het nummer. We doen dit door het volgende te doen:

Nadat je dit hebt gedaan, wil je zeker weten dat je het goed hebt gedaan. Dus voer de app uit! Gebruik CMD + R of druk op de afspeelknop bovenaan.

Als je hebt gemerkt dat er iets mis is, zijn de knoppen mogelijk overal. Maar wanneer u op tikt, wordt dit opgeteld bij het vorige nummer. Als u de knop niet ziet, tikt u op of zijn de labels en knoppen overal aanwezig. Ga terug naar Main.storyboard. Wat we nu gaan doen, is ze op de plaats zetten waar we willen dat het is. Omdat dit een eenvoudige tutorial is. Ik zal niet diepgaand ingaan op beperkingen. We zullen de voorgestelde contraints van Apple gebruiken. Zorg er dus in Main.storyboard voor dat u in View Controller bent. Bevestig dat u bent door op iets in ViewController te klikken, zoals de achtergrond maar niet op de items in View. Als u naar de Interface Builder kijkt, ziet u een knop in de onderstaande afbeelding. Als u erop klikt, ziet u enkele opties en klikt u op Reset naar voorgestelde beperkingen. Voer het nu opnieuw uit en de dingen moeten er een beetje bekend uitzien.

De knop waarop u tiktHet menu dat u ziet.

Nu terug naar de IBActions

Binnen de andere IBAction hebben we het voor de resetknop. We willen het getal terug op 0 zetten. Dus doen we dit: getal = 0. Dat is alles, het nummer is nu 0. Maar het wordt niet weergegeven in de app wanneer u erop tikt. Ga door en probeer het. Voer de app opnieuw uit.

Dus om dit op te lossen, is het probleem dat we het contraLabel niet hebben bijgewerkt, dus we moeten dat doen. Probeer deze uit te zoeken. Als je nog steeds vastzit, staat het antwoord onderaan de pagina.

Nu heb je zo ongeveer de basis toegevoegd. De app werkt vrijwel. Je tikt op en het zal er een aan de teller toevoegen. Je drukt op reset en de teller staat weer op 0.

Extra, Extra!

Nu, als je iets leukers of extra's wilt doen. We kunnen die lelijke lijn op de navigatiebalk verwijderen. Hier is de code daarvoor:

Laten we eerst de olifant in de kamer aanspreken, WAT IS HET? daar aan het doen?

Dat is een optionele, vrijwel, het laat Xcode weten dat er een mogelijkheid is dat er geen navigatieController is en dat het goed is om nul te hebben of afwezig te zijn. Dit is zodat de code nog steeds kan worden uitgevoerd als er geen controller is. Optioneel worden voornamelijk gebruikt wanneer er een mogelijkheid van nul is, maar dit heeft niet zoveel invloed op het programma. We willen de nul toestaan ​​omdat het niets verandert, maar Xcode staat het standaard niet toe. Als het nul is, zou de app crashen, dus met de Optioneel zal het gemakkelijker zijn.

Nu dat wordt behandeld, laten we praten code.

De eerste regel is vrijwel een instelling en een lege achtergrondafbeelding. Als u UIImage () gebruikt, is deze vrijwel leeg en overbodig de noodzaak om een ​​afbeelding van welke aard dan ook te gebruiken. Dit is zodat er geen achtergrondafbeelding is.

De tweede regel verwijdert in principe de schaduwafbeelding, die in feite de lijn / rand onderaan is. Maar je hebt beide nodig om te werken, omdat we geen van beide willen, zodat de regel niet wordt weergegeven.

Nu dat is gebeurd, heb je een exacte replica van de app die aan het begin wordt getoond!

Antwoord: counterLabel.text = String (nummer)

Andy Wong

Andy is junior aan de St. John's University. Hij heeft een passie voor het bouwen van producten, het werken in de technische industrie, het uitproberen van nieuwe dingen en in het algemeen proberen dagelijks iets nieuws te leren. Hij is momenteel op zoek naar een stageplaats voor softwareingenieur / ontwikkelaar in NYC of San Francisco (Preferred ~ werd verliefd op de stad). De enige passie die ik meer heb dan bouwen, is iets nuttigs bouwen. Iets dat mensen helpt op manieren die nooit eerder mogelijk waren.

Laten we verbinden! (Twitter) (website) (Linkedin)