Share
Ook al hebben we in deze serie al veel geleerd over de ontwikkeling van iOS, ik weet zeker dat je graag iOS-applicaties gaat bouwen die iets leuks of nuttigs doen. In deze tutorial wordt uw wens toegekend. Met Xcode maakt u een iOS-project vanaf nul, wijzigt u de broncode van het project en voert u uw toepassing uit op de iOS Simulator of een fysiek apparaat.
Colorific is de naam van de applicatie die we gaan bouwen. Het idee achter Colorific is eenvoudig, elke keer dat de gebruiker het scherm van het apparaat aanraakt, verandert de kleur van het scherm. Hoewel het concept eenvoudig is, is Colorific perfect om aan de slag te gaan en de ins en outs van iOS-ontwikkeling te verkennen.
Zoals we eerder in deze serie zagen, gaat elke iOS-applicatie door het leven als een Xcode-project. Wat is een Xcode-project? Een Xcode-project is een container of repository die de bestanden, activa en informatie bevat die nodig zijn om een of meer producten te bouwen.
Merk op dat dit niet beperkt is tot de broncode en middelen van een project, zoals afbeeldingen en andere media. Een project houdt ook de verbanden tussen de verschillende elementen bij en weet hoe de eindproducten uit de elementen te bouwen.
Start Xcode op en maak een nieuw Xcode-project door te kiezen Nieuw> Project ... van de het dossier menu. Een alternatieve optie is drukken Shift + Command + N.
Als het welkomstvenster van Xcode verschijnt wanneer u Xcode start, raad ik aan het te sluiten, zodat u leert hoe u een nieuw project kunt maken met behulp van het menu van Xcode.
Aan de slag met een nieuwe applicatie of project is eenvoudig in Xcode dankzij de bijbehorende toepassingssjablonen. Voor de toepassing die we gaan maken, hebben we de Toepassing enkele weergave sjabloon. Kijk gerust naar de andere toepassingssjablonen, maar zorg ervoor dat u de Toepassing enkele weergave sjabloon voor Colorific.
Na het selecteren van de Toepassing enkele weergave sjabloon en klik op de volgende knop geeft Xcode u een lijst met opties waarmee u uw nieuwe project kunt configureren. Laten we de verschillende opties eens bekijken.
U moet nu een goed overzicht hebben van de verschillende configuratie-opties bij het opzetten van een nieuw Xcode-project. Voor dit project raad ik u aan de opties te gebruiken zoals weergegeven in de bovenstaande schermafbeelding. Merk op dat de meeste opties eenvoudig kunnen worden gewijzigd nadat u uw project hebt gemaakt. Klik op de volgende knop wanneer u klaar bent met het configureren van uw project.
In de volgende stap vraagt Xcode waar je je nieuwe project wilt opslaan. U hebt misschien het kleine selectievakje onder aan het venster met het label opgemerkt Maak een git repository op mijn Mac. De grijze tekst onder het selectievakje luidt Xcode plaatst uw project onder versiebeheer.
Zoals ik eerder in deze serie al zei, is bronbeheer onmisbaar in softwareontwikkeling. Deze serie behandelt dit onderwerp niet in detail, maar als je serieus bezig bent met het ontwikkelen van software, raad ik je aan om het lezen van bronbeheer te lezen.
Git is de meest populaire SCM (Broncodebeheer) systeem in de Cocoa-gemeenschap. Het is echter perfect mogelijk om een ander SCM-systeem te gebruiken, zoals SVN of Mercurial.
Vertel Xcode waar u uw project wilt opslaan, schakel het selectievakje in om Xcode te autoriseren om een git-repository voor het project te maken en klik op creëren knop.
Voordat we verder gaan, wil ik een paar minuten de tijd nemen om de gebruikersinterface van Xcode te verkennen. Je kunt vier verschillende gebieden zien:
De werkbalk bovenaan bevat de knoppen en menu's die u vaak gebruikt. Zoals we eerder in deze serie zagen, zijn de knoppen om een applicatie live uit te voeren en te stoppen in de werkbalk.
Het display in het midden van de werkbalk is vergelijkbaar met het scherm dat u in iTunes vindt. Het geeft informatie weer over de status van uw project, het geeft bijvoorbeeld aan wanneer een build slaagt of mislukt.
De twee gesegmenteerde besturingselementen aan de rechterkant van de werkbalk kunnen worden gebruikt om de gebruikersinterface van Xcode aan te passen. Speel met de verschillende bedieningselementen om erachter te komen hoe elk van hen de gebruikersinterface van Xcode verandert.
Het hoofddoel van de linkerzijbalk is navigatie en wordt vaak Xcode genoemd navigator.
De navigator heeft verschillende tabbladen met de Project Navigator helemaal links. De selectie in de linkerzijbalk bepaalt wat wordt weergegeven in de hoofdweergave van Xcode, de werkruimte.
Het hoofdvenster of de werkruimte is het gebied waar u het grootste deel van uw tijd zult doorbrengen. Het is het werkpaard van Xcode en toont alles wat in de navigator is geselecteerd.
Terwijl de linkerzijbalk bepaalt wat wordt weergegeven in de hoofdweergave van Xcode, geeft de inhoud van de rechterzijbalk weer wat wordt weergegeven of geselecteerd in de hoofdweergave.
De rechterzijbalk, ook wel bekend als de inspecteur, past zich aan aan wat de gebruiker in de hoofdweergave selecteert.
Het is tijd om het project zelf te bekijken. De inhoud van het project wordt weergegeven in de Project Navigator, het eerste tabblad in de linkerzijbalk. Selecteer de eerste item in de Project Navigator om de projectdetails in de hoofdweergave te bekijken.
Het hoofdaanzicht bestaat uit twee delen, een zijbalk aan de linkerkant en een detailweergave aan de rechterkant. In de zijbalk ziet u twee items, uw project met één item en doelen met twee items.
Het is goed om al vroeg te weten wat het verschil is tussen een project en een doelwit. Zoals ik eerder al zei, is een project een opslagplaats voor de bestanden, activa en gegevens die nodig zijn om een of meer producten te bouwen. Een doelwit verwijst echter naar een van die producten. Een doel bevat de nodige instructies om een product te bouwen met de middelen van het project. Dit betekent dat een project meerdere doelen kan bevatten om meerdere producten te bouwen. Zoals u kunt zien, is een Xcode-project meer dan alleen een map met een aantal bestanden erin.
Voordat we beginnen met het aanpassen van de broncode van het project, kan het interessant zijn om uw nieuwe project te bouwen en uit te voeren om te zien wat de toepassingssjabloon ons gratis heeft gegeven. Klik op de Rennen knop in de linkerbovenhoek en zorg ervoor dat het actieve schema is geconfigureerd om de toepassing in de iOS Simulator uit te voeren door te selecteren iPhone Retina (4-inch).
Als alles goed is gegaan, zou de iOS-simulator je applicatie moeten starten en een leeg, wit beeld weergeven met de vertrouwde statusbalk bovenaan.
Laten we onze handen vies maken en de gebruikersinterface van de toepassing aanpassen. Open de Project Navigator en selecteer het bestand met de naam Main.storyboard. Een bestand met een .storyboard extensie is een gebruikersinterfacebestand. In dit bestand maken we de gebruikersinterface van de toepassing.
Het storyboard bevat één item, een view-controller met de witte weergave die je zojuist in de iOS-simulator zag. De werkruimte bestaat uit een zijbalk die de objectrepresentatie van de scenes van het storyboard. Het grootste deel van de werkruimte bevat de scènes of de gebruikersinterface van de toepassing.
Selecteer het object met de naam Uitzicht in de Bekijk Controller Tafereel in de linkerzijbalk en zie hoe de werkruimte en de rechterzijbalk hun inhoud bijwerken. Een aantal tabbladen verschijnen bovenaan de rechterzijbalk. Elk van de tabbladen bevat een verzameling kenmerken met betrekking tot het genoemde object Uitzicht.
De onderste helft van de rechterzijbalk bevat een sectie met vier tabbladen. Het derde tabblad wordt weergegeven door een afbeelding van een driedimensionaal kader. Dit vak is hoe objecten vaak worden weergegeven in Xcode.
Klik op het tabblad met het pictogram van het vak en blader door de lijst die wordt weergegeven. De lijst wordt de Objectbibliotheek en bevat verschillende elementen van de gebruikersinterface, zoals knoppen, schuiven en schakelaars.
Aan het begin van deze tutorial vertelde ik je dat we een applicatie gingen maken met wat gebruikersinteractiviteit. De gebruiker moet het scherm kunnen aanraken om de kleur te wijzigen.
Het detecteren van aanrakingen in een iOS-applicatie kan op verschillende manieren worden gedaan. Een oplossing is om een knop te gebruiken. In de Objectbibliotheek, zoek het item met de naam UIButton en sleep het vanuit de Objectbibliotheek naar de witte weergave in de werkruimte van Xcode.
De gebruiker moet elk willekeurig deel van het scherm kunnen aanraken, wat betekent dat de knop het volledige scherm moet beslaan. Heb je de zes kleine vierkantjes aan de randen van de knop opgemerkt? Door de kleine vierkanten te verplaatsen, kunt u de dimensies van de knop wijzigen.
Pas de grootte van de knop aan zodat deze het hele scherm bedekt. Maak je geen zorgen over de statusbalk aan de bovenkant van het scherm.
De weergave achter de knop is de weergave die van kleur verandert wanneer de gebruiker het scherm aanraakt. Op dit moment blokkeert de knop de weergave vanuit de weergave van de gebruiker, dus we moeten de attributen van de knop aanpassen.
U hebt misschien gemerkt dat de knop is toegevoegd aan de lijst met objecten in de linkerzijbalk, onder het object met de naam Uitzicht. Selecteer de knop in de lijst met objecten en selecteer de Kenmerken Inspector in de rechterzijbalk - het vierde tabblad van links. We hoeven maar twee aanpassingen te doen.
Begin met het veranderen van het type knop van Systeem naar gewoonte. Hierdoor wordt de knop transparant.
De tweede verandering die we moeten maken, is de gebruiker vertellen wat hij moet doen door de knoptitel te wijzigen. Het tekstveld naast het label Titel leest op dit moment Knop. Wijzig dit in Tik om de kleur te wijzigen en stel de Tekst kleur naar zwart, zodat het leesbaar is.
Als u bekend bent met de MVC (Model-View-Controller) patroon, dan heb je een voorsprong beginnen met het leren van iOS-ontwikkeling. Het MVC-patroon is een patroon dat voorkomt in vele talen en kaders, zoals Ruby on Rails en CodeIgniter.
Het beeld in onze gebruikersinterface valt in de V categorie in het MVC-patroon. Een weergave wordt bestuurd door een controller. Bekijk de bestandsnamen in de Project Navigator aan de linkerzijde. De bestanden vertegenwoordigen een weergavecontroller die de weergave in onze gebruikersinterface bestuurt.
Wat doet een view-controller? Een view-controller kan doen wat je wilt, maar hij is in de eerste plaats verantwoordelijk voor het verwerken van alles wat gebeurt in de weergave die het beheert. Dit omvat bijvoorbeeld aanrakingen van de gebruiker. Als de gebruiker de knop in de weergave aanraakt, is het de verantwoordelijkheid van de controller om de aanraakgebeurtenis af te handelen.
Hoe gaan we om met een aanraakgebeurtenis? In het geval van onze knop voegen we een actie toe aan de view-controller. Een actie is een mooie naam voor een methode. Wat is een methode? Een methode is in essentie een C-functie. Wacht. Wat? Maak je op dit moment niet te veel zorgen om de terminologie. De volgende twee berichten behandelen C en Objective-C in meer detail. Wat u moet onthouden, is dat een methode een methode is in Ruby en PHP, of een functie in JavaScript.
Als je een methode van een controller aanroept, doet het iets in reactie daarop. Met andere woorden, als een gebruiker de knop aanraakt en we een methode verbinden met die aanraakgebeurtenis, dan zal de controller iets doen als reactie op die aanraakgebeurtenis.
Als u een actie wilt toevoegen aan de view-controller die de weergave in onze gebruikersinterface beheert, moeten we enkele wijzigingen in het genoemde bestand aanbrengen TSPViewController.h. Bestanden met een .h extensie zijn header-bestanden. Het header-bestand van een view controller bevat informatie over de view controller, de klasse view controller, om precies te zijn. We hoeven slechts één regel code aan het headerbestand toe te voegen. Bekijk hoe ik het header-bestand van de view controller heb aangepast.
// // TSPViewController.h // Colorific // // Gemaakt door Bart Jacobs op 27/03/14. // Copyright (c) Tuts + 2014. Alle rechten voorbehouden. // #import@interface TSPViewController: UIViewController - (IBAction) changeColor: (id) afzender; @einde
Hoewel we ons in deze tutorial niet concentreren op de syntaxis, is het redelijk eenvoudig om te begrijpen wat er aan de hand is. De naam van de actie of methode is verander kleur: en het heeft één argument, afzender. Het type van het argument is ID kaart, wat elk voorwerp betekent. Wat zijn objecten opnieuw? Geduld sprinkhaan. De actie eindigt met een puntkomma.
We hebben een actie toegevoegd aan de view controller, maar de actie doet niet veel. Wat we hebben gedaan is een actie verklaren. Dit betekent simpelweg dat elk onderdeel van de toepassing dat een piek maakt in het headerbestand van de view controller ook weet dat het een actie met de naam heeft verander kleur:. Het is net een restaurant dat je het menu biedt. Je kunt zien wat het te bieden heeft, maar het laat niet zien wat elk item op het menu ziet of smaakt.
Wat we moeten doen is de actie implementeren en dat doen we in de viewcontroller's implementatiebestand. Dat is juist. Het bestand met de .m extensie is het implementatiebestand. Selecteer het bestand met de naam TSPViewController.m en bekijk de inhoud ervan.
Had je verwacht dat het leeg zou zijn? Xcode heeft ons een boilerplate-code gegeven die gebruikelijk is voor view controllers. Het leuke van Objective-C is dat het zeer leesbare methodamen heeft. Ontwikkelaars klagen vaak dat de namen van de methoden lang zijn, maar het voordeel is dat u weet wat een methode doet door alleen naar de naam te kijken.
Om de verander kleur: actie, we kopiëren wat we hebben geschreven in het header-bestand en vervangen de achterliggende puntkomma door een openende en een gesloten accolade.
// // TSPViewController.m // Colorific // // Gemaakt door Bart Jacobs op 27/03/14. // Copyright (c) Tuts + 2014. Alle rechten voorbehouden. // #import "TSPViewController.h" @interface TSPViewController () @end @implementation TSPViewController - (void) viewDidLoad [super viewDidLoad]; // Voer een extra installatie uit nadat de weergave is geladen, meestal vanaf een punt. - (void) didReceiveMemoryWarning [super didReceiveMemoryWarning]; // Verwijder alle bronnen die opnieuw kunnen worden gemaakt. - (IBAction) changeColor: (id) afzender @end
Ik heb de inhoud van het volledige implementatiebestand toegevoegd, zodat u kunt zien waar u de methode-implementatie moet toevoegen. Het moet erop volgen @implementation TSPViewController en vóór de laatste @einde. Merk ook op dat het niet kan worden genest in een andere methode-implementatie.
Het is tijd om iets nuttigs te doen in onze actie. Ik ga niet elke regel code in detail uitleggen, maar ik zal je de essentie van wat er gebeurt geven.
- (IBAction) changeColor: (id) afzender int r = arc4random ()% 255; int g = arc4random ()% 255; int b = arc4random ()% 255; UIColor * color = [UIColor colorWithRed: (r / 255.0) groen: (g / 255.0) blauw: (b / 255.0) alpha: 1.0]; [self.view setBackgroundColor: color];
Zoals je wellicht weet, is het mogelijk om een kleur te splitsen in de drie primaire kleuren, rood, groen en blauw. In onze actie genereren we drie willekeurige getallen tussen 0 en 255, en gebruik deze nummers om een willekeurige kleur te maken.
De methode die we gebruiken om de kleur te maken is zeer beschrijvend, colorWithRed: groen: blauw: alpha:. In de laatste regel van onze actie stellen we de achtergrondkleur van de weergave in onze gebruikersinterface in op deze nieuwe, willekeurig gegenereerde kleur.
Het woord zelf verwijst naar de view controller. Maak je geen zorgen als niets van dit logisch is. Het wordt duidelijker als we in de volgende lessen de basisbeginselen van C en Objective-C hebben behandeld.
Opmerkingen zijn belangrijk bij het schrijven van code. Heb je de opmerkingen opgemerkt die ik heb toegevoegd aan de implementatie van verander kleur:? Opmerkingen met enkele regel beginnen met twee schuine strepen naar voren (//), terwijl opmerkingen met meerdere regels beginnen met / * en eindigen met * /.
De methode is geïmplementeerd, maar er gebeurt niets spectaculairs wanneer we de applicatie bouwen en uitvoeren. Probeer het eens, als je me niet gelooft.
Wat ontbreekt is een verbinding tussen de knop en de actie van de view controller. Hoe moet de view controller weten dat de verander kleur: actie moet worden geactiveerd wanneer op de knop wordt getikt?
Het maken van deze verbinding is eenvoudig. Open het storyboard door het bestand met de naam te selecteren Main.storyboard en selecteer de Bekijk Controller object in de Bekijk Controller Scene.
Met de Bekijk Controller geselecteerde object, open de Verbindingen Inspecteur in de rechterzijbalk - het eerste tabblad van rechts. Als u de stappen correct hebt uitgevoerd, ziet u onze nieuwe actie in het gedeelte met het label Ontvangen acties.
Je zou een lege cirkel aan de rechterkant van de verander kleur: actie. Klik en sleep van de cirkel naar de knop in onze gebruikersinterface.
Er verschijnt een menu wanneer u de muis loslaat. Het pop-upmenu bevat een lijst met Touch-gebeurtenistypen. De aanraakgebeurtenis waarin we geïnteresseerd zijn, wordt genoemd Touch Up Inside. Deze gebeurtenis wordt geactiveerd wanneer een gebruiker de knop aanraakt en de vinger opheft. Dit is het meest voorkomende gedrag van de meeste knoppen.
Nadat je de knop en de actie hebt verbonden, zou je moeten zien dat de rechterzijbalk de verbinding weergeeft die je zojuist hebt gemaakt. Super goed. U hebt uw eerste echte aanvraag met succes voltooid.
Bouw en run uw applicatie in de iOS Simulator en begin met tikken op het scherm van de simulator. Elke keer dat je op het scherm tikt, verandert de kleur in een nieuwe, willekeurige kleur. Hoe cool is dat?
We hebben veel aandacht besteed aan deze tutorial. Ook al was dit bericht vrij lang, we hebben eigenlijk niet echt veel gedaan. Als je de theorie kent, kun je Colorific in minder dan vijf minuten maken.
In de volgende twee berichten zal ik ingaan op de basisprincipes van C en Objective-C. Dit bereidt je voor op de interessante dingen in de rest van de serie.
Accentsconagua