Beginnersgids voor iOS-ontwikkeling De interface - Deel I
Apple is al jaren toonaangevend in de mobiele wereld met zijn iPhone- en iPad-serie. Ondanks de hype die het met elke officiële release kan creëren, houdt het ook een groot deel van de marktaandelen in het mobiele platform, en dit is waarschijnlijk de reden dat de meeste klanten willen dat hun app in de App Store van Apple bestaat; daarmee de reden voor ontwikkelaars om te leren en de iPhone-app te bouwen.
Het goede nieuws is dat de ontwikkeling van iPhone-applicaties niet zo moeilijk is als je zou denken, en deze post bestaat als een uitgebreide gids om je door het volledige proces van het bouwen van een applicatie voor iPhone te leiden.
We bespreken de redenen, fasen en hulpmiddelen voor het ontwikkelen van de app en uiteindelijk volg je een eenvoudige zelfstudie om de basis iPhone-applicatie te ontwerpen met behulp van de Xcode.
Dus of u nu voor zaken leert of gewoon een geweldig app-idee hebt waarmee u miljonair kunt worden, laten we aan de slag gaan met het bouwen van uw eerste iPhone-app!
Opmerking: je hebt een computer met Macintosh-besturingssysteem (Mac OS) nodig voor de installatie van Xcode, applicatie-ontwikkeling en het indienen van apps, je kunt het op legale wijze niet op Windows doen.
Waarom ontwikkelen voor Apple?
Ik zie deze vraag vaak gesteld, dus ik wil uitleggen waarom je geïnteresseerd zou moeten zijn in iPhone-ontwikkeling. Net zoals ik in de introductie heb aangegeven, iPhone momenteel bezit een groot deel van de marktaandelen in het mobiele platform.
Ik denk dat deze reden genoeg zou moeten zijn voor jou om de iPhone-applicatie te leren ontwikkelen, of je nu voor jezelf of klanten aan het ontwikkelen bent, de meeste mensen hopen waarschijnlijk dat hun app door veel mensen in de wereld kan worden gebruikt.
Vanuit het oogpunt van ontwikkeling, Apple houdt van dingen eenvoudig, en dit is van toepassing op hun producten en kaders. iOS is het besturingssysteem dat alle mobiele apparaten van Apple aandrijft. Deze omvatten iPod Touch, iPhone en iPad. Houd er dus rekening mee dat u apps voor de iPhone kunt ontwikkelen ontwikkelen voor alle andere apparaten met iOS!
Bovendien, wat de bovenstaande functie nog groter maakt, is hoeveel het coderingswerk kan worden opgeslagen. Wanneer je code voor de iPhone-applicatie schrijft, ben je dat dezelfde programmeertaal gebruiken voor alle computerapparatuur van Apple. Dat betekent dat wanneer je de iPhone-applicatie ontwikkelt, de app later kan worden geïntegreerd in de iPad en zelfs Mac.
Doelstelling C is de kern programmeertaal die al hun frameworks aandrijft. Samen met Objective-C ontwikkel je ook een iPhone-app met de Cocoa Touch, het programmeerraamwerk voor gebruikersinteractie op iOS.
Dit is allemaal een beetje informatie om u op weg te helpen bij het ontwikkelen van iPhone-apps. De ontwikkeling is een vrij ingewikkeld proces, maar ontspan je, doe het rustig aan. Dus de redenen zijn hier en de beslissing is aan jou. Of het antwoord nu ja is of niet, je kunt altijd meteen naar het volgende onderwerp springen: ontwerpen van apps voor iPhone.
Je iPhone-appstructuur plannen
In de standaardideologie van het maken van een iPhone-app die je wilt doorloop een paar fasen. De eerste fase omvat plannen en schetsen.
Allereerst moet je een idee hebben voor wat je app gaat doen. Waarom zouden mensen het willen downloaden?? En welke functies wil je opnemen? Dit is de belangrijkste fase, alsof je het goed doet bespaar veel verwarring en problemen in de coderingsfase.
Het ergste, het brengt je terug naar de tekentafel.
Ik raad het aan schets enkele ruwe ideeën voor een paar pagina's (of weergaven) van uw aanvraag. Teken gewoon een rechthoekige vorm, misschien 5 of 6 vormen op een vel papier en teken vervolgens de gewenste functies op elke weergave van uw app.
U kunt denken aan weergaven zoals verschillende pagina's op een website. Elke weergave biedt verschillende functies, zoals een aanmeldingsformulier, een lijst met contactpersonen of een gegevenstabel.
Hieronder heb ik een korte verzameling van de verschillende elementen van de UI-balk gemaakt:
- Statusbalk - Geeft het huidige batterijniveau, de 3G-verbinding, de ontvangstbalies, de telefoonmaatschappij en nog veel meer weer. Het wordt aanbevolen dat u altijd deze elementen opneemt.
- Navigatiebalk - Geeft uw gebruikers de mogelijkheid om te navigeren tussen pag hiërarchieën. Dit bevat vaak een knop aan de linkerkant van de balk om de gebruiker in staat te stellen terug te keren naar de vorige appweergave.
- Toolbar - Verschijnt aan de onderkant van de iPhone-app. Dit bevat een paar pictogrammen die zijn gekoppeld aan sommige functies zoals Delen, Download, Verwijder, enz.
- Tab toets - Zeer vergelijkbaar met de werkbalk, behalve dat je nu met tabbladen werkt. Wanneer een gebruiker op een tabbladpictogram klikt, wordt deze automatisch gemarkeerd en wordt de status 'Glanzend zweven' weergegeven. Deze balk wordt gebruikt om tussen weergaven te schakelen in plaats van directe functionaliteit aan te bieden.
Deze lijst bevat alleen de werkbalken die u in de meeste apps kon vinden. Er zijn een aantal andere opvattingen en stijlen om te overwegen, die u kunt vinden in Apple's iOS UI Element Gebruiksrichtlijnen. Ik raad ten zeerste aan om naar deze documentatie te verwijzen als je twijfels hebt over de gebruikersinterface-elementen van de iPhone.
In het belang van de tijd zal ik niet alle UI-elementen beschrijven. Er zijn te veel elementen om te overwegen, en je zult ze niet allemaal in je ene app gebruiken. Maar als u uw opvattingen schetst, kunt u dat haal inspiratie uit de hierboven voorgestelde richtlijnen en andere iPhone-apps je hebt genoten van het gebruik ervan.
Photoshop-mockups ontwerpen
Ik neem aan dat de meesten van jullie redelijk comfortabel werken met Adobe Photoshop. Het is de eerste software voor het maken van afbeeldingen voor websites, banners, logo's en mobiele mockups. Het ontwerpen van afbeeldingen voor internet is een vrij eenvoudig proces, maar het is een beetje ingewikkelder als het gaat om het ontwerp van een iPhone-app.
Als u op zoek bent naar een app die u echt zou moeten bouwen maak vanaf het begin pixel perfecte mockupontwerpen.
Om te beginnen moeten we de Photoshop-instellingen bespreken. Omdat we ontwerpen voor de iPhone, moeten we rekening houden met 2 verschillende ontwerpstijlen. De normale iPhone-weergave is 320 x 480 pixels. De iPhone 4 bevat echter een Retina-display dat het aantal pixels binnen dezelfde schermgrootte verdubbelt. Dat zou je dus moeten doen verdubbel de resolutie naar 640 x 960 pixels en ontwerp uw lay-outs volgens deze norm.
Dit betekent dat u dit ook moet doen maak 2 sets iconen voor je mockups. Oorspronkelijk zouden iconen zijn ingesteld op 163ppi maar dat moet je doen inclusief pictogrammen met 326ppi voor iPhone 4. De pictogrammen zijn traditioneel gemarkeerd met @ 2x aan het einde van de naam van het bestand, zoals “[email protected]“.
Laten we nu onze nieuwe documentinstellingen optimaliseren. Eerst moeten we een aantal voorkeuren bewerken, dus toegang tot Photoshop> Bewerken> Voorkeuren> Gidsen, raster en plakjes. We zullen zijn zet onze Gridline elke 20px met onderverdelingen op 2. Bij het ontwerpen van retina-display 2px-regel geeft 1 punt weer op het scherm. Dit is een belangrijke regel die u in gedachten moet houden voor het verkleinen van uw app.
Ik heb de neiging om het gemakkelijker te vinden om mijn ontwerpen met een hogere resolutie te maken dan ze te verkleinen, maar dat kan probeer beide methoden en kijk wat het beste bij je past. We gebruiken 640 x 960 pixels bij 326ppi - sla dit op als een aangepaste preset als je denkt dat je het veelvuldig zult gebruiken.
Gebouw met sjabloonelementen
Nu kun je de Photoshop gebruiken om zelf een pixel-perfecte lay-out te maken, maar dit blijkt een zeer vermoeiend en vervelend werk te zijn.
Dit is een enorm bestand met gewoon te veel elementen. Om dingen gemakkelijker te maken, kun je op v drukken om de. Te activeren Verplaats gereedschap en klik op de “Automatische selectie” op de optiebalk en selecteer vervolgens de “Laag” liever dan “Groep”. Met de instellingen kunt u op elk element klikken en Photoshop brengt u naar de bijbehorende laag!
Voel je vrij om met de mockup te spelen, of je kunt zelfs het prototype van je applicatie uit de mockup maken. Afhankelijk van je app kun je een hele reeks functies in het kerngebied opnemen, waarvan je er veel kunt vinden in dit PSD-bestand. Het is ook mogelijk om naar de lagen van deze elementen te gaan en de lettertypen, verloopkleuren en andere ontwerpstijlen ook te bewerken. Net zorg ervoor dat je niets aanpast omdat alle staven en UI-elementen zijn ingesteld op standaard standaardformaten.
Apps ontwikkelen in Xcode
De ontwikkelaarstool voor het programmeren van iOS en Mac OS X wordt genoemd als Xcode. Als u OS X Lion gebruikt, kunt u Xcode en alle van toepassing zijnde pakketten gratis vinden in de Mac App Store.
Nadat de installatie is voltooid, start u de Xcode en moet het welkomstscherm verschijnen. Vanaf hier kunt u een ouder project laden of ervoor kiezen om een nieuw project te maken. Voor nu moet je klikken “Maak een nieuw Xcode-project“, dan komt het sjabloonvenster met een paar opties. Klik onder iOS> Applicatie op “Toepassing enkele weergave” en druk op “volgende”. Jij kan geef de nieuwe app een naam, zoals Test (bij voorkeur geen spaties), dan op de Bedrijfsidentificatie, typ een woord zoals mijn bedrijf, en kies uiteindelijk een map en druk op “Opslaan”.
Xcode bouwt de bestandsdirectory en stuurt je naar een nieuw venster om te werken. Je zou veel bestandsopties moeten zien, maar de map die is vernoemd naar uw applicatie is de primaire focus.
Met Xcode heeft u twee opties voor het ontwerpen van front-end elementen. De klassieke xib / penpunt indeling is standaard voor Mac OS X- en iOS-apps, waardoor je elke keer een nieuwe paginaweergave moet ontwerpen. Omdat u echter meer weergaven in één app maakt, kan de hoeveelheid nib-bestanden veel te overweldigend worden, dus een nieuwe storyboard bestand bevat alle penpunten in een enkel editorpaneel. Vanaf hier kunt u eenvoudig UI-elementen en -functies verwijderen en toevoegen.
Bovendien kom je het tegen .h en .m bestanden in dezelfde mapgroep. Dit zijn korte bestandsnamen voor hoofd en implementatie code. In deze bestanden schrijft u alle Objective-C-functies en -variabelen die nodig zijn om uw app uit te voeren. Het kan een goed idee zijn om uit te leggen hoe Xcode werkt MVC (Model, Weergave, Controller), dat is de reden dat we voor elke controller 2 bestanden nodig hebben.
MVC programmeerhiërarchie
Om te begrijpen hoe de app werkt, moet u de programmeerarchitectuur ervan begrijpen. Met Model, View, Controller (MVC) als een basis, Xcode kan al uw displays en interfacecodes scheiden van uw logica- en verwerkingsfuncties en er is niet echt een andere optie om te kiezen. MVC lijkt in het begin misschien verwarrend, maar als je het probeert te begrijpen en een paar basis-apps gaat bouwen, zul je van de structuur gaan houden.
Om het gemakkelijker te begrijpen te maken, heb ik elk object in de onderstaande lijst gepresenteerd:
- Model - Bevat al uw logische en kerngegevens. Dit omvat variabelen, verbindingen met externe RSS-feeds of afbeeldingen, gedetailleerde functies en aantal crunching. Deze laag is volledig losgemaakt van uw weergaven, zodat u gemakkelijk van weergave kunt veranderen en toch dezelfde gegevens kunt gebruiken.
- Uitzicht - Een scherm- of weergavestijl in uw toepassing. Een tabellijst, profielpagina, artikeloverzichtspagina, audiospeler, videospeler, dit zijn allemaal voorbeelden van weergaven. Je kunt hun stijlen wijzigen en elementen verwijderen, maar je zult nog steeds met dezelfde gegevens in je Model werken.
- controleur - Fungeert als een tussenpersoon tussen de andere twee. U verbindt objecten in uw weergave met een ViewController die de informatie van en naar uw Model doorgeeft. Op deze manier is het dus mogelijk om een gebruiker op een knop te laten tikken en dit in uw model te registreren. Voer vervolgens een uitlogfunctie uit en doorloop dezelfde controller een bericht door “succesvol uitgelogd!”.
Dus eigenlijk jouw model bevat alle informatie en functies die u ergens op het scherm moet weergeven. Maar modellen kunnen geen interactie hebben met het scherm, alleen weergaven kunnen. Weergaven zijn meestal allemaal visuals en het kan alleen gegevens ophalen via een ViewController. De Controller is eigenlijk een veel verfijndere manier om uw back-endgegevens te verbergen voor het frontend-ontwerp. Op deze manier kunt u het ontwerp meerdere keren renoveren zonder dat u functionaliteit verliest.
Met deze kennis zou het niet moeilijk moeten zijn om je eerste paar apps te bouwen. Zoals eerder gezegd, Doelstelling C is de kern programmeertaal die u gaat gebruiken om de app te ontwikkelen. Het is gebouwd op de C-taal met bijgewerkte syntaxis en een paar extra paradigma's. Je hebt veel tijd nodig om vertrouwd te raken met de taal, maar voor de beginnersles raad ik de tutorialserie van Mobiletuts aan+.
Ontwerpweergave met storyboards
Nu we de technische aspecten van een toepassing hebben bekeken, moeten we een beetje tijd besteden aan het ontwerpen van de interface. Ik ga ervan uit dat je de “storyboard” keuze gecontroleerd bij het maken van het project, wat betekent dat je een single kunt vinden MainStoryboard_iPhone.storyboard bestand ergens in de mapgroep aan de linkerkant van het venster. Klik op het bestand om het te selecteren en de weergave te openen.
Een nieuwe zijbalk zou direct rechts van de mapgroep moeten verschijnen. Dit wordt het Documentoverzicht en het is een soort snelle voorbeeldmethode voor het controleren van alle beschikbare weergaven in dit storyboard.
We willen beginnen met het toevoegen van slechts een paar pagina-elementen in onze view controller. We hebben twee verschillende elementen nodig: a Navigatiebalk en een Tab toets. Voordat we ze pakken, heeft u toegang tot de Kenmerken Inspector (View> Utilities> Show Attributes Inspector) aan de rechterkant van het venster, zoek dan naar de Statusbalk label. Standaard staat deze ingesteld op Afgeleide die de standaard iPhone-statuskleur gebruikt, maar je kunt ook kiezen Zwart of Doorschijnend zwart als je app-ontwerp beter bij de kleur past.
De objectenbibliotheek
Als het nutsbedrijven paneel aan de rechterkant van het venster is niet zichtbaar, u kunt het inschakelen door toegang te krijgen tot Beeld> Hulpprogramma's> Hulpprogramma's tonen. Kijk in het deelvenster Functies onderaan een paneel genaamd Objectbibliotheek. Het kreeg een vervolgkeuzemenu met de “Voorwerpen” als het eerste item van de lijst. Als u het niet kunt vinden, selecteert u Beeld> Hulpprogramma's> Objectbibliotheek tonen.
Zoek en selecteer in het vervolgkeuzemenu van de Objectbibliotheek Windows & Bars. Klik nu op de Navigatiebalk, sleep het naar het kijkvenster en plaats het direct onder het zwart Statusbalk (met een batterijpictogram). We kunnen de titelbeschrijving van de bar nu aanpassen. Dubbelklik op de tekst die momenteel wordt gelezen “Titel“, en je ziet een label met de naam “Titel” in het deelvenster Functies, waar u de titelbeschrijving kunt wijzigen “Test” vanaf daar. Raken “invoeren” om de verandering te zien.
Nogmaals in het Windows & Bars-paneel, scroll naar beneden om de Tab toets, sleep het vervolgens naar het viewvenster en plaats het helemaal onderaan uw app. Standaard zien deze 2 elementen er fantastisch uit.
Nu wilt u misschien dat het verloop van de navigatiebalk overeenkomt met de tabbalk onderaan, en daarvoor kunt u op de navigatiebalk klikken en naar rechts kijken op attributen paneel in het paneel Utilities. De allereerste optie wordt genoemd Stijl, welke is ingesteld op Standaard. Verander de stijl van standaard in Zwart dekkend en we hebben een bijpassende kleurenset!
Laten we ook een andere tabknop toevoegen in de balk onderaan van de app. Beweeg uw muiscursor opnieuw naar het Windows & Bars-paneel en scrol omlaag naar Tabbalk Item, direct onder de Tab Bar. Sleep dit naar uw app-venster en plaats het in het midden van de 2 bestaande knoppen van de tabbladbalk. Als u op deze nieuwe knop dubbelklikt, ziet u enkele extra opties in het deelvenster Hulpprogramma's. U wijzigt de items beeld en titel vanaf daar. Ik heb bijvoorbeeld de titel gewijzigd in “Bladwijzer” voor het nieuw toegevoegde item in de tabbalk.
Dit is dus een korte tutorial over het ontwerpen van views binnen Xcode. Het is geen erg moeilijk proces, maar het zal wat meer tijd kosten om aan de interface te wennen. Speel met een paar meer elementen als je je prettig voelt, ook kun je naar Apple's iOS Development Resources gaan voor meer leermiddelen, het is nooit erg om meer te ontdekken!
Blijf op de hoogte voor deel II
Dit concludeert ons eerste deel van de handleiding voor iPhone-appontwerp en -ontwikkeling. In het volgende deel zullen we een beetje dieper ingaan op Objective-C en Cocoa Touch, en je zult uiteindelijk leren om een functionerende iPhone-app te bouwen, stay tuned!
iOS Design Gallery
Voor ontwerpers die er zijn, hoop ik je ook wat inspiratie te bezorgen, dus ik heb hieronder een lijst met geweldige iPhone-appweergaven opgenomen. De lijst bevat een grote verscheidenheid aan inspirerende app-elementen die je waarschijnlijk nog nooit eerder hebt opgemerkt. U kunt uw ideeën, app-weergaven of vragen delen in het gedeelte 'Opmerkingen' hieronder, bedankt!
Race splitter
Tevredenheid op afstand
Tweetbot voor iPhone
reeder
Vierkant
MailChimp
Joystiq
Piictu
Duisternis
