Begyndervejledning til iOS-udvikling Interface - Del I
Apple har i mange år været en førende industri i den mobile verden med sin iPhone og iPad-serie. På trods af den hype, det kan skabe med alle officielle udgivelser, har den også en stor del af markedsandele på mobilplatformen, og det er sandsynligvis årsagen til, at de fleste kunder vil have deres app til at eksistere i Apples appbutik. dermed bliver grunden til udviklere at lære og bygge iPhone-appen.
Den gode nyhed er, at iPhone applikationsudvikling ikke er så svært som du måske tror, og dette indlæg eksisterer som en omfattende guide til at gå igennem hele processen med at opbygge en applikation til iPhone.
Vi diskuterer årsagerne, faser og værktøjer til udvikling af appen, og i sidste ende følger du en nem vejledning til at designe den grundlæggende iPhone-applikation ved hjælp af Xcode.
Så hvad enten du lærer for erhvervslivet eller du bare har en fantastisk appidé, der kan gøre dig til en millionær, lad os komme i gang med at opbygge din første iPhone app!
Bemærk: Du skal bruge en computer med Macintosh-operativsystem (Mac OS) til Xcode-installation, applikationsudvikling og appindgivelse. Der er ingen måde du kan gøre på Windows lovligt.
Hvorfor udvikle til Apple?
Jeg ser dette spørgsmål ofte, så jeg vil forklare, hvorfor du bør være interesseret i iPhone-udvikling. Ligesom jeg har nævnt i introduktionen, iPhone i øjeblikket har en stor del af markedsandele i mobilplatformen.
Jeg mener, at denne grund skal være nok til at lære at udvikle iPhone-applikationen som om du udvikler dig selv eller klienter, de fleste håber sikkert, at deres app kan nås af mange mennesker i verden.
Fra udviklingssynspunktet, Apple kan godt lide ting, og dette gælder for deres produkter og rammer. iOS er operativsystemet, der styrer alle Apples mobilenheder. Disse omfatter iPod Touch, iPhone og iPad. Så husk, når du udvikler apps til iPhone, kan du være udvikler til alle andre enheder med iOS!
Desuden gør det, der gør ovenstående funktion endnu større, hvor meget det kodende arbejde kan gemmes. Når du skriver kode til iPhone applikation, er du bruger det samme programmeringssprog for alle Apples computerenheder. Det betyder, at når du udvikler iPhone-applikationen, kan appen senere integreres i iPad og endda Mac.
Objective-C er det centrale programmeringssprog, der driver alle deres rammer. Sammen med Objective-C, vil du også udvikle iPhone app med Kakao Touch, programmeringsrammen kører brugerinteraktion på iOS.
Dette er bare en smule information, så du kan komme i gang med iPhone App-udvikling. Udviklingen er ret kompliceret, men slapper af, tag det langsomt. Så grundene er her, og beslutningen er din. Uanset om svaret er ja eller ej, kan du altid hoppe lige ind i næste emne: designe apps til iPhone.
Planlægger din iPhone App Structure
I standard ideologien om at oprette en iPhone app, vil du gerne gå gennem et par faser. Den første fase omfatter planlægning og skitsering.
Først og fremmest skal du have en ide til hvad din app skal gøre. Hvorfor vil folk gerne downloade det? Og Hvilke funktioner vil du medtage? Dette er den vigtigste fase, som om du gør det rigtigt, du vil spare en masse forvirring og problemer i kodningsfasen.
Værst, det får dig tilbage til tegnebrættet.
Jeg anbefaler til skitser nogle røde ideer til et par sider (eller synspunkter) af din ansøgning. Træk bare et rektangelform, måske 5 eller 6 figurer på et ark papir, og træk derefter de funktioner, du vil have, på hver visning af din app.
Du kan tænke på synspunkter som forskellige sider på en hjemmeside. Hver visning vil tilbyde forskellige funktionaliteter, som f.eks. Et loginformular, en liste over kontakter eller en tabel med data.
Nedenfor har jeg lavet en kort samling af de forskellige UI-barelementer:
- Statuslinje - Viser enhedens nuværende batteriniveau, 3G-tilslutning, modtagesteder, telefonbærer og meget mere. Det anbefales, at du altid inkludere disse elementer.
- Navigations bar - Giver dine brugere mulighed for at navigere mellem sidehierarkier. Dette inkluderer ofte en knap på venstre side af linjen for at gøre det muligt for brugeren at vende tilbage til den forrige appvisning.
- Toolbar - Vises nederst på iPhone-appen. Dette vil holde nogle få ikoner bundet til nogle funktioner som f.eks Del, Hent, Slet, etc.
- Fanebladet - Meget ligner værktøjslinjen, undtagen nu arbejder du med faner. Når en bruger klikker på et faneblad, vil det automatisk blive fremhævet, og det vil vise en blankt hover tilstand. Denne bar bruges til at skifte mellem visninger i stedet for at tilbyde direkte funktionalitet.
Denne liste indeholder kun de værktøjslinjer, du kunne finde i de fleste apps. Der er nogle andre synspunkter og stilarter at overveje, som du kan finde dem i Apples brugsanvisninger til IOS UI Element. Jeg anbefaler stærkt at henvise til denne dokumentation, når du er i tvivl om iPhone's UI-elementer.
For tiden vil jeg ikke beskrive hvert brugerelement. Der er for mange elementer at overveje, og du vil ikke ende med at bruge dem alle i din enkelt app. Men som du skitser dine synspunkter, kan du trække inspiration fra de ovennævnte retningslinjer og andre iPhone apps du har nydt at bruge dem.
Design af Photoshop Mockups
Jeg formoder, at de fleste af jer er ret behagelige at arbejde med Adobe Photoshop. Det er premiere-softwaren til at skabe grafik til hjemmesider, bannere, logoer og mobilmockups. Design af grafik til internettet er en ret simpel proces, men det er lidt mere kompliceret, når det kommer til iPhone app design.
Hvis du søger at bygge en app, skal du virkelig skabe pixel-perfekt mockup design fra starten.
Til at begynde med bør vi diskutere Photoshop-indstillinger. Da vi designer til iPhone, skal vi overveje 2 forskellige design stilarter. Det almindelig iPhone-skærm er 320 x 480 pixel. IPhone 4 indeholder dog en nethinden, der fordobler mængden af pixels inden for samme skærmstørrelse. Så skal du fordoble opløsningen til 640 x 960 pixels og designe dine layouter til denne standard.
Det betyder, at du også skal lav 2 sæt ikoner til dine mockups. Oprindeligt ville ikoner være indstillet til 163ppi men det bliver du nødt til Inkluder ikoner med 326ppi til iPhone 4. Ikonerne er traditionelt markeret med @ 2x i slutningen af deres fils navn, f.eks “[email protected]“.
Lad os nu optimere vores nye dokumentindstillinger. Først skal vi redigere nogle præferencer, så adgang til Photoshop> Rediger> Indstillinger> Guider, gitter og skiver. Vi bliver Indstilling af vores Gridline hver 20px med underafsnit på 2. Ved design til retina display 2px linjen viser 1 point på skærmen. Dette er en vigtig regel, du skal huske på for at nedskalere din app.
Jeg plejer at finde det nemmere at bygge mine designs med højere opløsning og derefter skala dem ned, men du kan Prøv begge metoder og se, hvad der passer dig bedst. Vi bruger 640 x 960 pixel ved 326ppi - gem det som en brugerdefineret forudindstilling, hvis du tror at du bruger det ofte.
Bygning med skabelonelementer
Nu kan du bruge Photoshop til at oprette et pixel-perfekt layout alene, men det viser sig at være et meget udmattende og kedeligt arbejde.
Dette er en enorm fil med alt for mange elementer. For at gøre tingene lettere kan du trykke v v aktivere Flyt værktøj og klik på “Auto-Select” På dens valglinje, vælg derefter “Lag” hellere end “Gruppe”. Med indstillingerne kan du klikke på et hvilket som helst element, og Photoshop bringer dig til det tilsvarende lag!
Du er velkommen til at lege med mockup, eller du kan endda oprette din applikations prototype fra mockup. Afhængigt af din app kan du inkludere en række funktioner inden for kerneområdet, hvoraf mange kan findes i denne PSD-fil. Det er også muligt at gå til disse elementers lag og redigere skrifttyper, gradientfarver og andre design styles også. Lige Sørg for, at du ikke ændrer størrelsen på noget da alle søjler og UI-elementer er indstillet til standard standardstørrelser.
Udvikle Apps i Xcode
Udviklerværktøjet til iOS- og Mac OS X-programmering er opkaldt som Xcode. Hvis du kører OS X Lion, kan du finde Xcode og alle gældende pakker gratis i Mac App Store.
Når installationen er færdig, skal du starte Xcode og dens velkomstskærm skal komme op. Herfra kan du indlæse et ældre projekt eller vælge at lave en ny. For nu skal du klikke “Opret et nyt Xcode-projekt“, så kommer skabelonvinduet med nogle få muligheder. Under iOS> Ansøgning skal du klikke på “Single View Application” og hit “Næste”. Du kan giv den nye app et navn, såsom Prøve (helst ingen mellemrum), så på Virksomhedsidentifikator, skriv i et hvilket som helst ord som f.eks mit firma, og endelig vælge en mappe og hit “Gemme”.
Xcode vil bygge filmappen og sende dig til et nyt vindue til at arbejde. Du bør se mange af de valgte filindstillinger, men mappe, der er opkaldt efter din ansøgning er det primære fokus.
Med Xcode har du to muligheder for at designe frontendele. Den klassiske XIb / nib Formatet er standard til Mac OS X og iOS-apps, som kræver, at du designer en ny sidevisning hver gang. Men da du skaber flere visninger i en enkelt app, kan mængden af nib-filer blive alt for overvældende, så en ny storyboard filen indeholder alle dine nib-syn i en enkelt editor-rude. Herfra kan du nemt fjerne og tilføje UI-elementer og funktioner.
Derudover kommer du på tværs af .h og .m filer i samme mappegruppe. Disse er korte filnavne til header og implementering kode. Disse filer er, hvor du skriver alle Objective-C-funktionerne og variablerne, der kræves for at din app kan køre. Det kan være en god ide at forklare, hvordan Xcode arbejder med MVC (Model, View, Controller), hvilket er grunden til, at vi har brug for 2 filer til hver controller.
MVC Programmering Hierarki
For at forstå, hvordan appen fungerer, skal du forstå sin programmeringsarkitektur. Med Model, View, Controller (MVC) som et fundament, Xcode kan adskille alle dine skærme og interface kode fra dine logik- og behandlingsfunktioner, og der er ikke rigtig en anden mulighed at vælge. MVC kan virke forvirrende i starten, men hvis du forsøgte at forstå det og begynde at bygge nogle grundlæggende apps, kommer du til at elske strukturen.
For at gøre det lettere at forstå, har jeg præsenteret hvert objekt i listen nedenfor:
- Model - Indeholder alle dine logiske og kerne data. Dette omfatter variabler, forbindelser til eksterne RSS-feeds eller billeder, detaljerede funktioner og antal crunching. Dette lag er helt adskilt fra dine synspunkter, så du nemt kan ændre visninger og stadig har de samme data.
- Udsigt - En skærm eller visningsstil i din ansøgning. En tabel liste, profilside, artikelsammendragsside, lydafspiller, videospiller, disse er alle eksempler på visninger. Du kan ændre deres stilarter og fjerne elementer, men du arbejder stadig med de samme data i din model.
- Controller - Handler som mellemmand mellem de to andre. Du forbinder objekter i din visning med en ViewController, som sender oplysningerne til og fra din model. På den måde er det muligt at få en bruger til at trykke på en knap og registrere dette i din model. Kør derefter en log-out funktion og send den samme besked via samme controller “succesfuldt logget ud!”.
Så dybest set din modellen indeholder alle oplysninger og funktioner at du skal vise et sted på skærmen. Men modeller kan ikke interagere med skærmen, kun visninger kan. Visninger er for det meste alle visuelle, og det kan kun trække data gennem en ViewController. Det Controller er faktisk en meget mere raffineret måde at gemme dine bagendata på fra frontendesignet. På denne måde kan du renovere designet flere gange, mens du ikke mister nogen funktionalitet.
Med denne viden bør det ikke være svært at begynde at bygge dine første få apps. Som tidligere nævnt, Objective-C er det centrale programmeringssprog, du vil bruge til at udvikle appen. Det er bygget på C-sproget med opdateret syntaks og et par ekstra paradigmer. Du har brug for meget tid til at blive fortrolig med sproget, men for begynderlæren anbefaler jeg tutorial serien fra Mobiletuts+.
Design View med Storyboards
Nu hvor vi har undersøgt de tekniske aspekter af en ansøgning, bør vi bruge lidt tid på at designe grænsefladen. Jeg antager, at du har holdt “Storyboard” mulighed kontrolleres, når du opretter projektet, hvilket betyder at du kan finde en enkelt MainStoryboard_iPhone.storyboard fil et sted i foldergruppen placeret på venstre side af vinduet. Klik på filen for at vælge den og åbne visningen.
Et nyt sidebjælke skal vises direkte til højre for mappegruppen. Dette kaldes Dokumentoversigt og det er en slags hurtig forhåndsvisning metode til at kontrollere alle de tilgængelige visninger i denne storyboard.
Vi vil gerne starte med at tilføje blot et par sideelementer til vores view controller. Vi har brug for to forskellige elementer: a Navigations bar og a Fanebladet. Før vi tager fat i dem, har vi adgang til Attributter Inspektør (Se> Hjælpeprogrammer> Vis attributter Inspector) på højre side af vinduet, så kig efter Statuslinje etiket. Som standard er den indstillet til udledt som bruger standardstatus for iPhone status, men du kan også vælge Sort eller Gennemsigtig Sort hvis dit app design passer bedre til farven.
Objektbiblioteket
Hvis Hjælpeprogrammer rude i højre side af vinduet er ikke synligt, du kan aktivere det ved at få adgang til Vis> Hjælpeprogrammer> Vis hjælpeprogrammer. I ruden Hjælpeprogrammer ser du bunden til et panel, der hedder det Objektbibliotek. Det fik en rullemenu med “objekter” som første punkt på listen. Hvis du ikke kunne finde det, kan du vælge Vis> Hjælpeprogrammer> Vis objektbibliotek.
Fra rullemenuen i Objektbiblioteket skal du finde og vælge Windows og barer. Klik nu på Navigations bar, Træk det i vinduet med udsigt og placer det direkte under den sorte Statuslinje (med et batteriikon). Vi kan tilpasse barens titelbeskrivelse nu. Dobbeltklik på den tekst, som i øjeblikket læser “Titel“, og du vil se en etiket opkaldt “Titel” i panelet Hjælpeprogrammer, som du kan ændre titelbeskrivelsen til “Prøve” derfra. Hit “Gå ind” at se ændringen.
I vinduet Windows & Bars skal du rulle ned for at finde Fanebladet, Træk det derefter i visningsvinduet og læg det helt nederst på din app. Som standard ser disse 2 elementer fantastisk ud.
Nu vil du måske have navigationslinjens gradient for at matche fanebladet nederst, og for at gøre dette kan du klikke på navigationslinjen og se til højre ved Egenskaber panel i værktøjsruden. Den allerførste mulighed kaldes Stil, som er indstillet til standard. Skift Style fra Standard til Sort Opaque og vi vil have et matchende farve sæt!
Lad os også tilføje en anden faneknap i den nederste del af appen. Flyt din musemarkør til vinduet Windows & Bars igen og rul ned til Tab Bar Item, direkte under fanebladet. Træk dette ind i dit appvindue og læg det i midten af de 2 eksisterende knapper. Hvis du dobbeltklikker på denne nye knap, kan du se nogle ekstra muligheder i vinduet Hjælpeprogrammer, du ændrer elementets billede og titel derfra. For eksempel har jeg ændret titlen til “bogmærke” for det nyligt tilføjede Tab Bar-element.
Så dette er en kort tutorial om design af visninger inden for Xcode. Det er ikke en frygtelig vanskelig proces, men det vil kræve lidt mere tid at vænne sig til grænsefladen. Spil med nogle flere elementer, hvis du føler dig godt tilpas, også du kan lede til Apples iOS Development Resources for flere læringsressourcer, det er aldrig en dårlig ting at opdage mere!
Bliv afstemt for del II
Dette afsluttes vores første del af vejledningen til iPhone app design og udvikling. I næste del vil vi dykke lidt dybere ind i Objective-C og Cocoa Touch, og i sidste ende lærer du at opbygge en fungerende iPhone app, hold dig tilpas!
iOS Design Gallery
For designere derude håber jeg også på at få dig en vis inspiration, så jeg har medtaget en liste over fantastiske iPhone app synspunkter nedenfor. Listen indeholder et stort udvalg af inspirerende app elementer, som du sandsynligvis aldrig har lagt mærke til før. Du er velkommen til at dele dine ideer, appvisninger eller spørgsmål i kommentarfeltet nedenfor, tak!
Race Splitter
Tilfredshed Fjern
Tweetbot til iPhone
Reeder
Foursquare
MailChimp
Joystiq
Piictu
Mørke
