Vodnik za začetnike za razvoj iOS-a Vmesnik - I. del

Apple je že vrsto let vodilna industrija v mobilnem svetu s serijo iPhone in iPad. Kljub hype, ki ga lahko ustvari z vsemi uradnimi izdajami, ima tudi velik delež tržnih deležev v mobilni platformi, in to je verjetno razlog, da bo večina strank želela, da njihova aplikacija obstaja v Apple App Store; tako postaja razlog za razvijalce, da se naučijo in zgradijo aplikacijo iPhone.

Dobra novica je, da razvoj aplikacij za iPhone ni tako težak, kot si morda mislite, in ta objava obstaja kot celovit vodnik, ki vas vodi skozi celoten proces izdelave aplikacije za iPhone.

Razpravljali bomo o razlogih, fazah in orodjih za razvoj aplikacije in na koncu boste sledili preprostim navodilom za oblikovanje osnovne aplikacije iPhone z uporabo kode Xcode..

Ne glede na to, ali se učite za podjetja ali imate neverjetno idejo o aplikaciji, zaradi katere ste lahko milijonar, začnimo z gradnjo svoje prve aplikacije za iPhone.!

Opomba: potrebovali boste računalnik z operacijskim sistemom Macintosh (Mac OS) za namestitev Xcode, razvoj aplikacij in oddajo aplikacij..

Zakaj razviti za Apple?

Vidim, da je to pogosto zastavljeno vprašanje, zato želim pojasniti, zakaj vas zanima razvoj iPhone. Tako kot sem navedel v uvodu, iPhone trenutno ima velik del tržnih deležev v mobilni platformi.

Menim, da bi moral biti ta razlog dovolj, da se naučite razvijati aplikacijo za iPhone, ne glede na to, ali se razvijate zase ali za stranke, večina ljudi verjetno upa, da bodo njihovi uporabniki lahko dostopali do številnih ljudi na svetu..

Z vidika razvoja, Apple ima rad preproste stvari, to velja za njihove izdelke in okvire. iOS je operacijski sistem, ki poganja vse Appleove mobilne naprave. Med njimi so iPod Touch, iPhone in iPad. Ne pozabite, ko razvijate aplikacije za iPhone, bi lahko bili razvijanje za vse druge naprave s sistemom iOS!

Poleg tega je tisto, kar naredi zgornjo funkcijo še večje, koliko je mogoče shraniti kodirno delo. Ko pišete kodo za aplikacijo iPhone, ste z istim programskim jezikom za vse Appleove računalniške naprave. To pomeni, da lahko, ko razvijate aplikacijo iPhone, aplikacijo kasneje vključite v iPad in celo Mac.

Cilj-C je osrednji programski jezik, ki napaja vse njihove okvire. Skupaj z Objective-C, boste razvili tudi iPhone aplikacijo Kakav Touch, programski okvir, ki poganja interakcijo uporabnikov na iOS.

To je vse samo malo informacij, da boste začeli na iPhone app razvoj. Razvoj je precej zapleten proces, vendar se sprostite, vzemite počasi. Torej so razlogi tukaj in odločitev je vaša. Ne glede na to, ali je odgovor da ali ne, lahko vedno skočite desno v naslednjo temo: oblikovanje aplikacij za iPhone.

Načrtovanje strukture aplikacije za iPhone

V standardni ideologiji ustvarjanja aplikacije za iPhone boste želeli skozi nekaj faz. Prva faza vključuje načrtovanje in skiciranje.

Najprej morate imeti idejo za kaj bo naredila vaša aplikacija. Zakaj bi jo ljudje želeli prenesti? In katere funkcije želite vključiti? To je najpomembnejša faza, kot če jo naredite prav, boste prihranite veliko zmede in težav v fazi kodiranja.

Najhuje, vrne vas nazaj na risalno desko.

Priporočam skiciraj nekaj grobih predlogov za nekaj strani (ali ogledov) vaše prijave. Samo narišite pravokotno obliko, morda 5 ali 6 oblik na list papirja, nato pa narišite želene funkcije za vsak pogled v aplikaciji.

O pogledih, kot so različne strani na spletnem mestu, si lahko zamislite. Vsak pogled ponuja različne funkcije, kot so obrazec za prijavo, seznam stikov ali tabela podatkov.

Spodaj sem izdelal kratko zbirko različnih elementov vrstice uporabniškega vmesnika:

• Statusna vrstica - Prikaže trenutno raven napolnjenosti baterije, povezavo 3G, sprejemnike, telefonski operater in še veliko več. Priporočljivo je, da te elemente vedno vključite.
• Navigacijska vrstica - Omogoča uporabnikom možnost krmarjenja med hierarhijami strani. To pogosto vključuje gumb na levi strani vrstice, ki uporabniku omogoča vrnitev v prejšnji pogled aplikacije.
• Orodna vrstica - Pojavi se na dnu aplikacije iPhone. To bo imelo nekaj ikon, povezanih z nekaterimi funkcijami, kot je Deliti, Prenesi, Izbriši, itd.
• Tab Bar - Zelo podobno orodni vrstici, razen zdaj, ko delate z zavihki. Ko uporabnik klikne ikono zavihka, se bo samodejno označil in prikazal bo sijajno stanje. Ta vrstica se uporablja za preklapljanje med pogledi namesto neposredne funkcionalnosti.

Ta seznam vsebuje samo orodne vrstice, ki ste jih našli v večini aplikacij. Obstajajo še nekateri drugi pogledi in slogi, ki jih lahko najdete v Smernicah za uporabo elementov uporabniškega vmesnika iOS UI. Priporočam, da se sklicujete na to dokumentacijo, če imate dvome glede elementov uporabniškega vmesnika iPhone.

V interesu časa ne bom opisoval vsakega elementa uporabniškega vmesnika. Preveč elementov je treba upoštevati, zato ne boste uporabili vseh v eni sami aplikaciji. Toda, ko si skicirate svoje poglede, lahko črpajte navdih iz zgornjih smernic in drugih aplikacij za iPhone uživali ste v njihovi uporabi.

Oblikovanje modelov Photoshop

Predvidevam, da je večina od vas precej udobna pri delu z Adobe Photoshopom. To je premierna programska oprema za ustvarjanje grafike za spletno stran, pasic, logotipov in mobilnih modelov. Oblikovanje grafike za splet je dokaj preprost postopek, vendar je nekoliko bolj zapleten, ko gre za oblikovanje iPhone app.

Če želite ustvariti aplikacijo, ki bi jo res morali od začetka ustvarite popolne modele pikslov.

Za začetek bi morali razpravljati o nastavitvah v Photoshopu. Ker načrtujemo iPhone, moramo upoštevati dva različna sloga oblikovanja. The običajen zaslon iPhone je 320 x 480 slikovnih pik. Vendar pa iPhone 4 vključuje a zaslon, ki podvoji količino slikovnih pik v isti velikosti zaslona. Torej bi morali dvojno ločljivost na 640 x 960 slikovnih pik in oblikujete svoje načrte v skladu s tem standardom.

To pomeni, da boste morali ustvarite dva niza ikon za vaše makete. Prvotno bi bile ikone nastavljeno na 163ppi vendar boste morali vključujejo ikone s 326ppi za iPhone 4. Ikone so tradicionalno označene z @ 2x na koncu imena datoteke, na primer “[email protected]“.

Zdaj optimiziramo nove nastavitve dokumentov. Najprej bomo morali urediti nekatere nastavitve, zato dostopite do Photoshopa> Edit> Preferences> Vodniki, mreža in rezine. Bomo nastavitev naše Gridline vsakih 20 px s pododdelki na 2. Pri načrtovanju za prikaz mrežnice 2px vrstica bo prikazala 1 točko na zaslonu. To je pomembno pravilo, ki ga morate imeti v mislih za zmanjševanje aplikacije.

Ponavadi se mi zdi lažje zgraditi svoje modele z višjo ločljivostjo in jih nato zmanjšati, vendar lahko poskusite z obema metodama in poglejte, kaj vam najbolj ustreza. Uporabljamo 640 x 960 slikovnih pik pri 326ppi - shranite to kot prednastavitev po meri, če menite, da jo boste pogosto uporabljali.

Zgradba s elementi predlog

Zdaj lahko Photoshop uporabite za ustvarjanje popolne postavitve slikovnih pik, vendar se to izkaže za zelo naporno in naporno delo.

To je ogromna datoteka s preveč elementi. Za lažje delo pritisnite tipko v, da aktivirate Premakni orodje in kliknite na “Samodejna izbira” na njeni vrstici z možnostmi in nato izberite “Layer” raje kot “Skupina”. S nastavitvami lahko kliknete na kateri koli element in Photoshop vas pripelje do ustreznega sloja!

Lahko se igrate z modelom, ali pa lahko izdelate prototip svoje aplikacije iz modela. Glede na vašo aplikacijo lahko vključite množico funkcij znotraj osrednjega območja, od katerih jih lahko najdete v tej datoteki PSD. Možno je tudi, da se premaknete na plasti teh elementov in uredite tudi pisave, barve prelivov in druge sloge oblikovanja. Samo poskrbite, da ne spreminjate ničesar ker so vse vrstice in elementi uporabniškega vmesnika nastavljene na privzete standardne velikosti.

Razvoj aplikacij v kodi Xcode

Orodje za razvijalce za programiranje iOS in Mac OS X je poimenovano kot Xcode. Če uporabljate OS X Lion, lahko brezplačno najdete Xcode in vse ustrezne pakete Mac App Store.

Ko je namestitev končana, zaženite Xcode in njegov pozdravni zaslon se mora prikazati. Od tu lahko naložite starejši projekt ali se odločite za novega. Za zdaj morate klikniti “Ustvarite nov projekt Xcode“, potem se bo okno predloge pojavilo z nekaj možnostmi. V oknu iOS> Application kliknite “Aplikacija za en pogled” in zadel “Naslednji”. Ti lahko dajte novi aplikaciji ime, kot naprimer Test (po možnosti brez presledkov), nato na Identifikator podjetja, vtipkajte katero koli besedo, kot je moje podjetje, in končno izberejo imenik in zadenejo “Shrani”.

Xcode bo zgradil imenik datotek in vas poslal v novo okno za delo. Videti bi morali veliko naštetih možnosti datotek, vendar mapo, ki je poimenovana po vaši aplikaciji je glavni poudarek.

Z Xcode imate dve možnosti za oblikovanje elementov sprednjega dela. Klasika xib / pero format je standard za aplikacije Mac OS X in iOS, zato morate vsakič oblikovati nov pogled strani. Ker pa ustvarjate več prikazov v eni aplikaciji, lahko količina datotek pičk postane prevelika, zato nova storyboard Datoteka vsebuje vse poglede pogledov v posameznem podoknu urejevalnika. Od tukaj lahko z lahkoto odstranite in dodate elemente in funkcije uporabniškega vmesnika.

Poleg tega boste naleteli .h in .m datoteke v isti skupini map. To so kratka imena datotek za glavo in izvajanje Koda. Te datoteke so tam, kjer pišete vse funkcije in spremenljivke Objective-C, ki so potrebne za izvajanje aplikacije. Morda bi bilo dobro razložiti, kako deluje Xcode MVC (model, pogled, krmilnik), kar je razlog, da potrebujemo 2 datoteki za vsak krmilnik.

MVC programska hierarhija

Da bi razumeli, kako deluje aplikacija, morate razumeti njeno programsko arhitekturo. S Model, pogled, krmilnik (MVC) kot temelj, Xcode lahko loči vse vaše prikaze in kodo vmesnika od vaših logičnih in obdelovalnih funkcij, prav tako ni druge možnosti za izbiro. MVC se morda zdi na začetku zmeden, če pa ste ga poskušali razumeti in začeti graditi nekaj osnovnih aplikacij, vam bo všeč struktura.

Da bi ga lažje razumeli, sem vsak predmet prikazal na spodnjem seznamu:

• Model - Vse vaše logične in osnovne podatke. To vključuje spremenljivke, povezave z zunanjimi viri RSS ali slike, podrobne funkcije in krčenje številk. Ta plast je popolnoma ločena od vaših pogledov, tako da lahko preprosto spremenite poglede in še vedno uporabljate enake podatke.
• Prikaži - Slog zaslona ali zaslona v vaši aplikaciji. Seznam tabel, stran profila, stran s povzetkom članka, avdio predvajalnik, video predvajalnik so vsi primeri pogledov. Lahko spremenite njihove sloge in odstranite elemente, vendar boste v modelu še vedno delali z istimi podatki.
• Krmilnik - Deluje kot posrednik med ostalima dvema. Predmete povežete z ViewControllerjem, ki posreduje informacije v model in iz njega. Tako je na ta način mogoče uporabnika pritisniti na gumb in ga registrirati v modelu. Nato zaženite funkcijo odjave in prek istega krmilnika prenesite sporočilo “uspešno odjavljen!”.

Torej v bistvu vaše model vsebuje vse informacije in funkcije ki jih boste morali prikazati nekje na zaslonu. Toda modeli ne morejo sodelovati z zaslonom, samo pogledi. Pogledi so večinoma vsi vizualni elementi, podatki pa se lahko vlečejo le prek ViewControllerja. The Controller je pravzaprav veliko bolj izpopolnjen način skrivanja podatkov o hrbtni strani s prednje strani. Na ta način lahko obliko večkrat prenovite in ne izgubite funkcionalnosti.

S tem znanjem ne bi smelo biti težko začeti graditi prvih nekaj aplikacij. Kot smo že omenili, Cilj-C je osrednji programski jezik, ki ga boste uporabljali za razvoj aplikacije. Zgrajen je v jeziku C s posodobljeno sintakso in nekaj dodatnimi paradigmami. Potrebovali boste veliko časa, da se seznanite z jezikom, vendar pa za začetno lekcijo priporočam serijo vadnic podjetja Mobiletuts.+.

Oblikovanje z zgodbami

Zdaj, ko smo preučili tehnične vidike aplikacije, bi morali porabiti nekaj časa za načrtovanje vmesnika. Predvidevam, da ste obdržali “Storyboard” možnost preverite pri izdelavi projekta, kar pomeni, da lahko najdete eno MainStoryboard_iPhone.storyboard datoteka nekje v skupini map, ki se nahaja na levi strani okna. Kliknite datoteko, da jo izberete in odprete pogled.

Nova stranska vrstica bi morala biti prikazana neposredno na desni strani skupine map. To se imenuje Oris dokumenta in je nekakšen način hitrega predogleda za preverjanje vseh razpoložljivih pogledov v tej snemalni knjigi.

Začnemo z dodajanjem le nekaj elementov strani v naš nadzornik pogledov. Potrebujemo dva različna elementa: a Navigacijska vrstica in a Tab Bar. Preden jih zgrabimo, pridemo do Inšpektor za atribute (Pogled> Pripomočki> Prikaži nadzornika atributov) na desni strani okna in poiščite Statusna vrstica etiketi. Privzeto je nastavljeno na Ugotovljeno ki uporablja standardno barvo stanja iPhone, lahko pa tudi izberete Črna ali Prosojna črna če vaša aplikacija bolje ustreza barvi.

Knjižnica predmetov

Če je Pripomočki na desni strani okna ni vidna, jo lahko omogočite z dostopom do Pogleda> Pripomočki> Prikaži pripomočke. V podoknu Pripomočki poglejte spodnji del izbrane plošče Knjižnica objektov. Ima spustni meni z “Predmeti” kot prvi element seznama. Če je niste našli, lahko izberete Pogled> Pripomočki> Prikaži knjižnico objektov.

V spustnem meniju knjižnice objektov poiščite in izberite Windows in bari. Sedaj kliknite na Navigacijska vrstica, povlecite ga v okno za ogled in ga postavite neposredno pod črno Statusna vrstica (z ikono baterije). Opis naslova vrstice lahko prilagodimo zdaj. Dvakrat kliknite na trenutno besedilo “Naslov“, in videli boste ime z imenom “Naslov” v podoknu pripomočkov, v katerem lahko spremenite opis naslova “Test” od tam. Hit “Vnesite” priča spremembi.

Na plošči Windows & Bars ponovno se pomaknite navzdol in poiščite Tab Bar, nato jo povlecite v okno za ogled in ga postavite na dno aplikacije. Privzeto so ta dva elementa videti fantastično.

Zdaj morda želite, da se prehod Navigacijske vrstice ujema z vrstico z zavihki na dnu in za to lahko kliknete na vrstico za krmarjenje in pogledate desno na Lastnosti v podoknu Utilities. Kliče se prva možnost Slog, ki je nastavljena na Privzeto. Spremenite slog od privzetega v Črna neprozorna in imeli bomo ujemajoč niz barv!

Dodamo še en gumb zavihka v spodnji vrstici aplikacije. Znova premaknite kazalec miške na ploščo Windows & Bars in se pomaknite navzdol do Zgornja vrstica na kartici, neposredno pod Tab Bar. Povlecite to v okno aplikacije in ga postavite na sredino dveh obstoječih gumbov vrstice zavihkov. Če dvakrat kliknete na ta novi gumb, lahko v podoknu pripomočkov vidite dodatne možnosti, spremenite element sliko in naslov od tam. Na primer, spremenil sem naslov v “Zaznamek” za novo dodano postavko vrstice zavihkov.

Torej, to je kratek tutorial o oblikovanju pogledov v Xcode. To ni strašno težaven proces, vendar pa bo potreben več časa, da se navadite na vmesnik. Igrajte se z nekaj dodatnimi elementi, če se počutite udobno, prav tako pa se lahko odpravite na Appleove iOS razvojne vire za več učnih virov, nikoli ni slabo, če odkrijete več!

Ostanite z nami za drugi del

To zaključuje naš prvi del vodnika za iPhone app design & development. V naslednjem delu bomo podrobneje spoznali Objective-C in Cocoa Touch in na koncu se boste naučili graditi delujočo aplikacijo za iPhone,!

Galerija iOS Design

Za oblikovalce tam sem tudi v upanju, da vam prinesem nekaj navdiha, zato sem vključil seznam čudovitih pogledov iPhone app spodaj. Seznam vsebuje veliko različnih navdihujočih elementov aplikacije, ki jih verjetno še niste opazili. Vas prosimo, da delite svoje ideje, poglede aplikacij ali vprašanja v spodnjem oddelku za komentarje, hvala!

Race Splitter

Zadovoljstvo na daljavo

Tweetbot za iPhone

Reeder

Foursquare

MailChimp

Instagram

Joystiq

Piictu

Tema