Begynnerveiledning for IOS-utvikling Grensesnittet - Del I
Apple har vært en ledende bransje i mobil verden i mange år med sin iPhone og iPad-serie. Til tross for sprøytenarkomanen som kan skape med alle offisielle utgivelser, har den også en stor del av markedsandeler i mobilplattformen, og dette er trolig grunnen til at de fleste kunder vil at appen skal eksistere i Apples appbutikk. dermed bli grunnen til at utviklere skal lære og bygge iPhone-appen.
Den gode nyheten er, iPhone applikasjonsutvikling er ikke så vanskelig som du kanskje tror, og dette innlegget eksisterer som en omfattende guide for å gå gjennom hele prosessen med å bygge et program for iPhone.
Vi diskuterer årsakene, faser og verktøy for å utvikle appen, og til slutt følger du en enkel opplæring for å designe grunnleggende iPhone-applikasjonen ved hjelp av Xcode.
Så om du lærer for forretninger eller du bare har en fantastisk appide som kan gjøre deg til en millionær, la oss begynne å bygge din første iPhone-app!
Merk: Du trenger en datamaskin med Macintosh-operativsystem (Mac OS) for Xcode-installasjon, applikasjonsutvikling og appinnlevering, det er ingen måte du kan gjøre på Windows lovlig.
Hvorfor utvikle for Apple?
Jeg ser dette spørsmålet ofte, så jeg vil forklare hvorfor du burde være interessert i iPhone-utvikling. Akkurat som jeg har sagt i introduksjonen, iPhone for øyeblikket har en stor del av markedsandeler i mobilplattformen.
Jeg tror at denne grunnen bør være nok til at du lærer å utvikle iPhone-applikasjonen som om du utvikler deg selv eller klienter, de fleste håper de sikkert at appen deres kan nås av mange mennesker i verden.
Fra utviklingssynspunktet, Apple liker ting enkelt, og dette gjelder deres produkter og rammer. iOS er operativsystemet som driver alle Apples mobilenheter. Disse inkluderer iPod Touch, iPhone og iPad. Så husk når du utvikler apps for iPhone, kan du være utvikler for alle andre enheter med iOS!
Dessuten gjør det som gir den ovennevnte funksjonen enda større, hvor mye det kodende arbeidet kan lagres. Når du skriver kode for iPhone-applikasjon, er du bruker det samme programmeringsspråket for alle Apples databehandlingsenheter. Det betyr at når du utvikler iPhone-applikasjonen, kan appen senere bli integrert i iPad og til og med Mac.
Objective-C er kjerneprogrammeringsspråket som driver alle sine rammer. Sammen med Objective-C, vil du også utvikle iPhone app med Kakao Touch, Programmeringsrammen kjører brukerinteraksjon på IOS.
Dette er alt bare litt informasjon for å komme i gang med iPhone app utvikling. Utviklingen er ganske komplisert, men slapp av, ta den sakte. Så grunnene er her, og beslutningen er din. Hvorvidt svaret er ja eller ikke, kan du alltid hoppe rett inn i neste emne: designe apper til iPhone.
Planlegger iPhone App Structure
I den vanlige ideologien om å lage en iPhone-app vil du gå gjennom noen få faser. Den første fasen inkluderer planlegging og skissering.
Først av alt må du ha en ide for hva appen din skal gjøre. Hvorfor vil folk laste ned den? Og Hvilke funksjoner vil du inkludere? Dette er den viktigste fasen som om du gjør det riktig, vil du lagre mye forvirring og problemer i kodingsfasen.
Verste, det kommer deg tilbake til tegnebrettet.
Jeg anbefaler til skisser noen grove ideer for noen få sider (eller visninger) av søknaden din. Bare tegne et rektangelform, kanskje 5 eller 6 figurer på et ark, og skriv deretter funksjonene du vil ha på hver visning av appen din.
Du kan tenke på meninger som forskjellige sider på et nettsted. Hver visning vil tilby forskjellig funksjonalitet, for eksempel et påloggingsskjema, en liste over kontakter eller en tabell med data.
Nedenfor har jeg laget en kort samling av de forskjellige UI-barelementene:
- Statuslinjen - Viser enhetens nåværende batterinivå, 3G-tilkobling, mottakere, telefonbærer og mye mer. Det anbefales at du alltid inkluderer disse elementene.
- Navigasjonslinje - Gir brukerne muligheten til å navigere mellom sidehierarkier. Dette inkluderer ofte en knapp på venstre side av linjen for å aktivere brukeren å gå tilbake til forrige appvisning.
- verktøylinje - Vises nederst på iPhone-appen. Dette vil holde noen ikoner knyttet til noen funksjoner som Dele, nedlasting, Slett, etc.
- Tab Bar - Svært lik verktøylinjen, bortsett fra nå jobber du med faner. Når en bruker klikker på et faneikon, blir det automatisk uthevet, og det vil vise en glanset hover-tilstand. Denne linjen brukes til å bytte mellom visninger i stedet for å tilby direkte funksjonalitet.
Denne listen inneholder bare verktøylinjer du kan finne i de fleste apper. Det er noen andre synspunkter og stiler å vurdere, som du finner dem i Apples retningslinjene for bruk av IOS brukergrensesnitt. Jeg anbefaler på det sterkeste at du henviser til denne dokumentasjonen når du er i tvil om iPhone-grensesnittets grensesnitt.
For tiden vil jeg ikke beskrive hvert brukergrensesnitt. Det er for mange elementer å vurdere, og du vil ikke ende opp med å bruke dem alle i din enkelt app. Men som du skisserer dine synspunkter, kan du trekk inspirasjon fra retningslinjene som er foreslått ovenfor, og andre iPhone apps du har hatt glede av å bruke dem.
Designe Photoshop Mockups
Jeg antar at de fleste av dere er ganske komfortable med Adobe Photoshop. Det er premiereprogramvaren for å lage grafikk for nettsider, bannere, logoer og mobilmockups. Design av grafikk for nettet er en ganske enkel prosess, men det er litt mer komplisert når det gjelder iPhone appdesign.
Hvis du ønsker å bygge en app du virkelig burde skape pixel-perfekt mockup design fra starten.
For å begynne med, bør vi diskutere Photoshop-innstillinger. Siden vi designer for iPhone, må vi vurdere 2 forskjellige designstiler. De vanlig iPhone-skjerm er 320 x 480 piksler. Men iPhone 4 inneholder en netthinnen som dobler mengden piksler i samme skjermstørrelse. Så du burde doble oppløsningen til 640 x 960 piksler og utform layoutene dine til denne standarden.
Dette betyr at du også må lag 2 sett med ikoner for mockups. Opprinnelig ville ikoner være satt til 163ppi men du må Inkluder ikoner med 326ppi for iPhone 4. Ikonene er tradisjonelt merket med @ 2x på slutten av filens navn, for eksempel “[email protected]“.
La oss nå optimalisere våre nye dokumentinnstillinger. Først må vi redigere noen innstillinger, så tilgang til Photoshop> Rediger> Innstillinger> Guider, rutenett og skiver. Vi blir setter vår Gridline hver 20px med underavdelinger på 2. Ved design for retina display 2px linjen vil vise 1 poeng på skjermen. Dette er en viktig regel du må huske på for å skalere ned appen din.
Jeg pleier å finne det lettere å bygge designene mine med høyere oppløsning og deretter skalere dem ned, men du kan Prøv begge metodene og se hva som passer best for deg. Vi bruker 640 x 960 piksler ved 326ppi - lagre dette som en egendefinert forhåndsinnstilling hvis du tror du bruker den ofte.
Bygg med malelementer
Nå kan du bruke Photoshop til å lage en piksel-perfekt layout på egen hånd, men dette viser seg å være et veldig utmattende og kjedelig arbeid.
Dette er en stor fil med bare for mange elementer. For å gjøre tingene enklere kan du trykke v for å aktivere Flytteverktøy og klikk på “Auto valg” På valglinjen, velg deretter “Lag” heller enn “Gruppe”. Med innstillingene kan du klikke på et hvilket som helst element, og Photoshop tar deg med til det tilsvarende laget!
Du er velkommen til å leke med mockup, eller du kan til og med lage programmets prototype fra mockup. Avhengig av appen din kan du inkludere en rekke funksjoner i kjernen, hvorav mange du kan finne i denne PSD-filen. Det er også mulig å gå til disse elementene lag og redigere skrifter, gradient farger og andre design stiler også. Bare sørg for at du ikke endrer størrelsen på noe siden alle stolpene og brukergrensesnittelementene er satt til standard standardstørrelser.
Utvikle Apps i Xcode
Utviklerverktøyet for iOS og Mac OS X programmering er oppkalt som Xcode. Hvis du kjører OS X Lion, kan du finne Xcode og alle aktuelle pakker gratis i Mac App Store.
Når installasjonen er fullført, start Xcode og velkomstskjermbildet skal komme opp. Herfra kan du laste inn et eldre prosjekt eller velge å lage en ny. For nå må du klikke “Lag et nytt Xcode-prosjekt“, så kommer malvinduet opp med noen få alternativer. Under IOS> Søknad, klikk på “Enkelt visningsprogram” og treffer “neste”. Du kan Gi den nye appen et navn, som for eksempel Test (helst ingen mellomrom), deretter på Bedriftsidentifikator, skriv inn et hvilket som helst ord som mitt selskap, og til slutt velge en katalog og klikk “Lagre”.
Xcode vil bygge filkatalogen og sende deg inn i et nytt vindu for arbeid. Du bør se mange filalternativer som er oppført, men mappe som er oppkalt etter søknaden din er hovedfokuset.
Med Xcode har du to muligheter for å designe frontendelementer. Det klassiske xib / spiss formatet er standard for Mac OS X og iOS-apper, som krever at du designer en ny sidevisning hver gang. Men da du lager flere visninger i en enkelt app, kan mengden av nib-filer bli altfor overveldende, så en ny storyboard filen inneholder alle dine nib-visninger i en enkelt redigeringsrute. Herfra kan du enkelt fjerne og legge til UI-elementer og funksjoner.
I tillegg kommer du over .h og .m filer i samme mappegruppe. Dette er korte filnavn for Overskrift og gjennomføring kode. Disse filene er hvor du skriver alle Objective-C-funksjonene og variablene som kreves for at appen skal kjøre. Det kan være lurt å forklare hvordan Xcode jobber med MVC (modell, visning, kontroller), som er grunnen til at vi trenger 2 filer for hver kontroller.
MVC Programmerings Hierarki
For å forstå hvordan appen fungerer, må du forstå programmeringsarkitekturen. Med Modell, View, Controller (MVC) som grunnlag, Xcode kan skille alle skjermene og grensesnittkoden fra logikk- og behandlingsfunksjonene, og det er egentlig ikke et annet valg å velge. MVC kan virke forvirrende først, men hvis du prøvde å forstå det og begynne å bygge noen grunnleggende programmer, kommer du til å elske strukturen.
For å gjøre det lettere å forstå, har jeg presentert hvert objekt i listen under:
- Modell - Holder alle dine logiske og kjerne data. Dette inkluderer variabler, tilkoblinger til eksterne RSS-feeder eller bilder, detaljerte funksjoner og antall knase. Dette laget er helt løsrevet fra visningene dine, slik at du enkelt kan endre visninger og fortsatt ha samme data som fungerer.
- Utsikt - En skjerm eller skjermstil i søknaden din. En tabellliste, profilside, artikkelsammendragsside, lydspiller, videospiller, disse er alle eksempler på visninger. Du kan endre stiler og fjerne elementer, men du vil fortsatt jobbe med de samme dataene i modellen.
- Controller - Fungerer som mellommann mellom de to andre. Du kobler objekter i ditt syn til en ViewController som overfører informasjonen til og fra din modell. På denne måten er det mulig å få en bruker til å trykke på en knapp og registrere dette i din modell. Kjør deretter en loggfunksjon, og gjennom samme kontroller, send en melding “vellykket utlogget!”.
Så i utgangspunktet din Modellen inneholder all informasjon og funksjoner at du må vise et sted på skjermen. Men modeller kan ikke samhandle med skjermen, bare visninger kan. Visninger er for det meste alle visuelle, og det kan bare trekke data gjennom en ViewController. De Kontrolleren er faktisk en mye mer raffinert måte å skjule bakendataene dine fra frontendesignet. På denne måten kan du renovere designet flere ganger mens du ikke mister noen funksjonalitet.
Med denne kunnskapen bør det ikke være vanskelig å begynne å bygge dine første få apps. Som nevnt tidligere, Objective-C er kjerneprogrammeringsspråket du skal bruke til å utvikle appen. Den er bygget på C-språket med oppdatert syntaks og noen få ekstra paradigmer. Du trenger mye tid for å bli kjent med språket, men for nybegynnerlæringen anbefaler jeg opplæringsserien fra Mobiletuts+.
Designvisning med Storyboards
Nå som vi har sett på de tekniske aspektene ved et program, bør vi bruke litt tid på å designe grensesnittet. Jeg antar at du har holdt “Storyboard” alternativ sjekket når du oppretter prosjektet, noe som betyr at du kan finne en enkelt MainStoryboard_iPhone.storyboard filen et sted i mappegruppen som er plassert på venstre side av vinduet. Klikk på filen for å velge den og åpne visningen.
Et nytt sidebjelke skal vises direkte til høyre for mappegruppen. Dette kalles Dokumentoversikt og det er en slags hurtig forhåndsvisning metode for å sjekke alle tilgjengelige visninger i denne storyboard.
Vi ønsker å begynne med å legge til bare noen få sideelementer i vår visningskontroller. Vi trenger to forskjellige elementer: a Navigasjonslinje og a Tab Bar. Før vi tar tak i dem, får du tilgang til Attributtsinspektør (Se> Verktøy> Vis attributter Inspector) på høyre side av vinduet, og se etter Statuslinjen merkelapp. Som standard er den satt til inferred som bruker standard iPhone status farge, men du kan også velge Svart eller Gjennomsiktig Svart hvis appdesign passer bedre til fargen.
Objektets bibliotek
Hvis verktøy ruten i høyre side av vinduet er ikke synlig, du kan aktivere den ved tilgang til Vis> Verktøy> Vis verktøy. På bunnpanelet, se på bunnen for et panel som heter Objektbibliotek. Den har en rullegardinmeny med “objekter” som det første elementet i listen. Hvis du ikke finner det, kan du velge Vis> Verktøy> Vis objektbibliotek.
Finn og velg fra rullegardinmenyen til Objektbiblioteket Windows og barer. Klikk nå på Navigasjonslinje, dra den inn i visningsvinduet og plasser den direkte under den svarte Statuslinjen (med et batteriikon). Vi kan tilpasse barens tittelbeskrivelse nå. Dobbeltklikk på teksten som for øyeblikket leser “Tittel“, og du vil se en etikett som heter “Tittel” i Verktøy-panelet, som du kan endre tittelbeskrivelsen til “Test” derfra. Truffet “Tast inn” å oppleve endringen.
Igjen i Windows & Bars-panelet, bla ned for å finne Tab Bar, så dra den inn i visningsvinduet og legg den helt nederst på appen din. Disse 2 elementene ser som standard ut som fantastisk.
Nå kan du kanskje ha navigasjonslinjens gradient for å matche flippelinjen nederst, og for å gjøre dette kan du klikke på navigasjonslinjen og se til høyre ved Egenskaper panelet i Verktøy-panelet. Det aller første alternativet kalles Stil, som er satt til standard. Endre stilen fra Standard til Svart Opak og vi har et matchende fargesett!
La oss også legge til en annen faneknapp i den nederste linjen i appen. Flytt musepekeren til vinduet Windows og barer igjen og bla ned til Tab Bar-objekt, rett under fanen. Dra dette inn i appvinduet og legg det i midten av de to eksisterende knappene for knappene. Hvis du dobbeltklikker på denne nye knappen, kan du se noen ekstra alternativer i Verktøy-panelet, du endrer elementets bilde og tittel derfra. For eksempel har jeg endret tittelen til “Bookmark” for det nylig lagt til Tab Bar-elementet.
Så dette er en kort opplæring om utforming av visninger innenfor Xcode. Det er ikke en veldig vanskelig prosess, men det vil kreve litt mer tid for å bli vant til grensesnittet. Spill med noen flere elementer hvis du føler deg komfortabel, og du kan også gå til Apples IOS Development Resources for flere læringsressurser, det er aldri en dårlig ting å oppdage mer!
Hold deg klar for del II
Dette avsluttes vår første del av guiden for iPhone app design og utvikling. I neste del vil vi dype litt dypere inn i Objective-C og Cocoa Touch, og du vil til slutt lære å bygge en fungerende iPhone app, hold deg innstilt!
iOS Design Gallery
For designere der ute håper jeg også å gi deg litt inspirasjon, så jeg har tatt med en liste over fantastiske iPhone-appvisninger nedenfor. Listen inneholder et stort utvalg av inspirerende app elementer som du sannsynligvis aldri har lagt merke til før. Du er velkommen til å dele dine ideer, appvisninger eller spørsmål i kommentarseksjonen nedenfor, takk!
Race Splitter
Tilfredsstillelse Remote
Tweetbot til iPhone
Reeder
Foursquare
MailChimp
joystiq
Piictu
Mørke
