Príručka pre začiatočníkov pre vývoj iOS Rozhranie - časť I
Spoločnosť Apple je už niekoľko rokov popredným odvetvím v oblasti mobilných telefónov série iPhone a iPad. Napriek tomu, že sa v každom oficiálnom vydanie môže vytvoriť humbuk, drží aj veľkú časť trhových podielov v mobilnej platforme, a to je pravdepodobne dôvod, prečo väčšina klientov bude chcieť, aby ich aplikácia existovala v obchode Apple s aplikáciami. čím sa stáva dôvod pre vývojárov naučiť sa a budovať aplikáciu pre iPhone.
Dobrou správou je, že vývoj aplikácií pre iPhone nie je taký tvrdý, ako by ste si mohli myslieť, a tento príspevok existuje ako ucelený sprievodca, ktorý vás prevedie celým procesom budovania aplikácie pre iPhone.
Budeme diskutovať o dôvodoch, fázach a nástrojoch pre vývoj aplikácie a nakoniec budete nasledovať jednoduchý návod na navrhnutie základnej aplikácie pre iPhone pomocou kódu Xcode.
Takže či sa učíte na podnikanie, alebo máte len úžasný nápad na aplikáciu, ktorý vás môže stať milionárom, začnime začať budovať svoju prvú iPhone aplikáciu!
Poznámka: Budete potrebovať počítač s operačným systémom Macintosh (Mac OS) pre inštaláciu Xcode, vývoj aplikácií a odosielanie aplikácií, neexistuje žiadny spôsob, ako to urobiť v systéme Windows legálne.
Prečo sa vyvíjať pre spoločnosť Apple?
Vidím, že táto otázka sa často pýta, takže chcem vysvetliť, prečo by vás mal zaujímať vývoj iPhone. Rovnako ako som uviedol v úvode, iPhone v súčasnosti má veľkú časť podielov na trhu v mobilnej platforme.
Myslím, že tento dôvod by mal stačiť na to, aby ste sa naučili rozvíjať aplikáciu pre iPhone, či už vyvíjate pre seba alebo pre klientov, väčšina ľudí pravdepodobne dúfa, že ich aplikácia bude prístupná mnohým ľuďom na svete.
Z hľadiska vývoja, Apple rada veci jednoduché, a to platí pre ich produkty a rámce. iOS je operačný systém, ktorý ovláda všetky mobilné zariadenia spoločnosti Apple. Patria medzi ne iPod Touch, iPhone a iPad. Takže majte na pamäti, keď vyvíjate aplikácie pre iPhone, môžete byť vývoj pre všetky ostatné zariadenia s iOS!
Okrem toho, čo zvyšuje vyššie uvedenú funkciu, je to, do akej miery je možné uložiť kódovanie. Keď napíšete kód pre iPhone aplikáciu, ktorú ste pomocou rovnakého programovacieho jazyka pre všetky počítačové zariadenia spoločnosti Apple. To znamená, že keď vyvíjate iPhone aplikáciu, aplikácia môže byť neskôr integrovaná do iPadu a dokonca Mac.
Objective-C je základným programovacím jazykom, ktorý napája všetky ich rámce. Spolu s Objective-C, budete tiež vyvíjať iPhone aplikácie s Kakaový dotyk, programovací rámec, ktorý ovplyvňuje interakciu používateľa v systéme iOS.
To je všetko len trochu informácií, aby ste začali s vývojom aplikácií pre iPhone. Vývoj je pomerne zložitý proces, ale uvoľnite ho, pomaly ho. Dôvody sú tu a rozhodnutie je vaše. Či je odpoveď áno, alebo nie, vždy môžete preskočiť priamo do nasledujúcej témy: navrhovanie aplikácií pre iPhone.
Plánovanie štruktúry aplikácií pre iPhone
V štandardnej ideológii vytvorenia aplikácie pre iPhone budete chcieť prejdite niekoľkými fázami. Prvá fáza zahŕňa plánovanie a skicovanie.
Najprv musíte mať nápad čo vaša aplikácia urobí. Prečo by si to ľudia chceli prevziať? a aké funkcie chcete zahrnúť? Toto je najdôležitejšia fáza, ako keby ste to spravili správne ušetrite veľa zmätku a problémov vo fáze kódovania.
Najhoršie, dostane vás späť na kreslicu dosku.
Odporúčam načrtnúť niekoľko hrubých návrhov na niekoľko stránok (alebo zobrazení) vašej žiadosti. Stačí nakresliť tvar obdĺžnika, možno 5 alebo 6 tvarov na hárok papiera a nakresliť požadované funkcie na každom zobrazení aplikácie.
Môžete si pomyslieť na názory, ako sú rôzne stránky na webových stránkach. Každé zobrazenie ponúka rôzne funkcie, ako napríklad prihlasovací formulár, zoznam kontaktov alebo tabuľku údajov.
Nižšie som vytvoril krátku zbierku rôznych prvkov rozhrania UI:
- Stavový riadok - Zobrazuje aktuálnu úroveň batérie zariadenia, pripojenie 3G, recepčné pruhy, telefónne číslo a oveľa viac. Odporúča sa, aby ste vždy obsahovali tieto prvky.
- Navigačná lišta - Poskytuje používateľom možnosť navigovať medzi hierarchiami stránok. Toto často obsahuje tlačidlo na ľavej strane panela, ktoré umožňuje používateľovi vrátiť sa k predchádzajúcemu zobrazeniu aplikácie.
- toolbar - Zobrazuje sa v spodnej časti aplikácie pre iPhone. Toto bude mať niekoľko ikon viazaných na niektoré funkcie, ako napríklad zdieľam, Stiahnuť ▼, vymazať, atď.
- Tabová tabuľka - Veľmi podobný panelu s nástrojmi, s výnimkou, že teraz pracujete s kartami. Keď používateľ klikne na ikonu karty, automaticky sa zvýrazní a zobrazí sa lesklý stav vznášania. Tento pruh sa používa na prepínanie medzi zobrazeniami namiesto poskytovania priamych funkcií.
Tento zoznam obsahuje iba panely s nástrojmi, ktoré môžete nájsť vo väčšine aplikácií. Existuje niekoľko ďalších názorov a štýlov, ktoré je možné zvážiť, ktoré nájdete v pokynoch Apple pre používanie prvkov rozhrania pre používateľov iOS. Veľmi odporúčam odkazovať na túto dokumentáciu, keď máte pochybnosti o prvkoch rozhrania iPhone.
V záujme času nebudem popisovať každý prvok používateľského rozhrania. Existuje príliš veľa prvkov, ktoré je potrebné zvážiť, a nevyužijete ich vo svojej jedinej aplikácii. Ale keď načrtnete svoje názory, môžete čerpať inšpiráciu z vyššie uvedených pokynov a iných aplikácií pre iPhone ste si užili, že ich používate.
Navrhovanie Photoshop Mockups
Predpokladám, že väčšina z vás pracuje pomerne pohodlne s programom Adobe Photoshop. Je to premiérový softvér na vytváranie grafiky pre webové stránky, bannery, logá a mobilné modely. Navrhovanie grafiky pre web je pomerne jednoduchý proces, ale je to o niečo zložitejšie, pokiaľ ide o návrh iPhone aplikácie.
Ak chcete vytvoriť aplikáciu, ktorú by ste mali skutočne vytvorte pixelové dokonalé dizajny od začiatku.
Na začiatok by sme mali diskutovať o nastaveniach programu Photoshop. Odkedy navrhujeme iPhone, musíme zvážiť 2 rôzne štýly dizajnu. bežný iPhone displej je 320 x 480 pixelov. Avšak iPhone 4 obsahuje a ktorý zdvojnásobuje množstvo pixelov v rámci rovnakej veľkosti obrazovky. Takže by ste mali zdvojnásobte rozlíšenie na 640 x 960 pixelov a navrhnite vaše rozloženia podľa tohto štandardu.
To znamená, že budete tiež musieť vytvorte 2 sady ikon pre vaše figuríny. Pôvodne by boli ikony nastavte na 163ppi ale budete musieť obsahovať ikony s 326ppi pre iPhone 4. Ikony sú tradične označené @ 2x na konci názvu ich súboru, ako napríklad “[email protected]“.
Teraz optimalizujeme naše nové nastavenia dokumentu. Najprv budeme musieť upraviť niektoré predvoľby, takže prístup k Photoshopu> Upraviť> Predvoľby> Vodítka, mriežka a plátky. Budeme nastavenie našej mriežky každých 20 px s rozdelením na 2. Pri navrhovaní zobrazenia sietnice Na 2px riadku sa zobrazí 1 bod na obrazovke. Toto je dôležité pravidlo, ktoré musíte mať na pamäti pre zmenšenie aplikácie.
Mám tendenciu zjednodušiť vytváranie návrhov s vyšším rozlíšením, potom ich zmenšiť, ale môžete skúste obe metódy a uvidíte, čo vám najlepšie vyhovuje. Používame 640 x 960 pixlov pri 326ppi - uložte to ako vlastnú predvoľbu, ak si myslíte, že ju budete používať často.
Budovanie s prvkami šablóny
Teraz môžete pomocou Photoshopu vytvoriť vlastné pixelové perfektné rozloženie, ale toto sa ukazuje ako veľmi vyčerpávajúce a zdĺhavé dielo.
Je to obrovský súbor s príliš veľa prvkov. Aby ste to uľahčili, môžete stlačiť v aktivovať Presuňte nástroj a kliknite na “Auto-Select” na jej lište možností a potom zvoľte “vrstva” radšej než “skupina”. S nastaveniami môžete kliknúť na ľubovoľný prvok a Photoshop vás prevedie na zodpovedajúcu vrstvu!
Nebojte sa hrať s maketou, alebo dokonca môžete vytvoriť prototyp aplikácie z modelu. V závislosti od vašej aplikácie by ste mohli zahrnúť množstvo funkcií v rámci hlavnej oblasti, z ktorých mnohé by ste mohli nájsť v tomto PSD súbore. Je tiež možné prejsť na vrstvy týchto prvkov a upraviť fonty, gradientné farby a iné štýly dizajnu. proste uistite sa, že nič nemeníte pretože všetky tyče a prvky používateľského rozhrania sú nastavené na štandardné štandardné veľkosti.
Vývoj aplikácií v Xcode
Nástroj pre vývojárov pre programovanie pre iOS a Mac OS X je pomenovaný ako Xcode. Ak používate OS X Lion, môžete nájsť Xcode a všetky platné balíky zdarma Aplikácia Mac App Store.
Po dokončení inštalácie spustite Xcode a jeho uvítacia obrazovka by mala prísť. Odtiaľ môžete nahrať starší projekt alebo vybrať nový. Teraz musíte kliknúť “Vytvorte nový projekt Xcode“, potom okno šablóny príde s niekoľkými možnosťami. V aplikácii iOS> Aplikácia kliknite na “Aplikácia Single View” a hit “Ďalšie”. Môžeš dajte novú aplikáciu názov, ako napr skúška (najlepšie bez medzery), potom na Identifikátor spoločnosti, napíšte slovo ako napr moja spoločnosť, a nakoniec vyberte adresár a hit “Uložiť”.
Xcode vytvorí adresár súborov a pošle vás do nového okna pre prácu. Mali by ste vidieť veľa možností súboru uvedených, ale ktorý je pomenovaný podľa vašej aplikácie je hlavným cieľom.
Pomocou kódu XCode máte dve možnosti navrhovania prvkov. Klasika XIb / hrot formát je štandardný pre aplikácie pre systém Mac OS X a iOS, čo vyžaduje, aby ste vždy vytvorili nový pohľad na stránku. Keď však vytvárate viac zobrazení v jednej aplikácii, množstvo súborov perom môže byť príliš ohromujúce, takže nový storyboard súbor drží všetky vaše názory nib v jednom paneli editora. Odtiaľ môžete jednoducho odstrániť a pridať prvky a funkcie používateľského rozhrania.
Navyše narazíte .hod a .m súbory v rovnakej skupine priečinkov. Toto sú krátke názvy súborov hlavička a uskutočnenie code. V týchto súboroch napíšete všetky funkcie a premenné objektov C požadované na spustenie vašej aplikácie. Možno by bolo dobré vysvetliť, ako funguje Xcode MVC (model, zobrazenie, kontroler), čo je dôvod, prečo potrebujeme 2 súbory pre každého kontrolóra.
Hierarchia programovania MVC
Ak chcete pochopiť, ako aplikácia funguje, musíte pochopiť jej programovú architektúru. s Model, View, Controller (MVC) ako základ, Xcode môže oddeliť všetky vaše displeje a kód rozhrania od vašich logických a spracovacích funkcií a nie je naozaj iná možnosť výberu. MVC sa môže na prvý pohľad zdá byť mätúce, ale ak ste sa jej pokúsili pochopiť a začať stavať niekoľko základných aplikácií,.
Aby sme to uľahčili pochopeniu, predstavil som každý objekt v zozname nižšie:
- Model - Uchováva všetky vaše logické a základné údaje. To zahŕňa premenné, pripojenie k externým RSS kanálom alebo obrázkov, podrobné funkcie a číslovanie. Táto vrstva je úplne oddelená od vašich zobrazení, takže môžete ľahko meniť zobrazenia a stále pracovať s tým istými údajmi.
- vyhliadka - Štýl obrazovky alebo zobrazenia vo vašej aplikácii. Zoznam tabuliek, stránka profilu, súhrnná stránka článku, prehrávač zvuku, prehrávač videa, to všetko sú príklady názorov. Môžete zmeniť ich štýly a odstrániť prvky, ale stále budete pracovať s rovnakými údajmi v modeli.
- kontrolór - Koná ako sprostredkovateľ medzi ostatnými dvoma. Pripojte objekty vo vašom pohľade na ViewController, ktorý prenesie informácie do a z vášho modelu. Takže týmto spôsobom je možné, aby používateľ klepol na tlačidlo a zaregistroval to vo vašom modeli. Potom spustite funkciu odhlásenia a cez ten istý kontrolór odošlite správu “úspešne odhlásený!”.
Takže v podstate vaše model obsahuje všetky informácie a funkcie že budete musieť zobraziť niekde na obrazovke. ale modely nemôžu komunikovať s obrazovkou, môžu sa zobraziť iba zobrazenia. Zobrazenia sú prevažne všetky vizuálne a dá sa len vytiahnuť cez ViewController. Riadiaci systém je v skutočnosti oveľa rafinovanejším spôsobom, ako skryť zadné koncové dáta z dizajnu prednej časti. Týmto spôsobom môžete niekoľkokrát obnoviť dizajn, pričom ste nestratili žiadnu funkčnosť.
S týmito znalosťami by nemalo byť ťažké začať budovať svoje prvé niekoľko aplikácií. Ako už bolo spomenuté, Objective-C je základný programovací jazyk, ktorý budete používať na vývoj aplikácie. Je postavený na jazyku C s aktualizovanou syntaxou a niekoľkými ďalšími paradigmami. Budete potrebovať veľa času, aby ste sa oboznámili s jazykom, ale pre lekciu začiatočníkov odporúčam výukové série od Mobiletuts+.
Návrhový pohľad so Storyboardu
Teraz, keď sme skúmali technické aspekty aplikácie, mali by sme venovať trochu času navrhovaniu rozhrania. Predpokladám, že ste si ju udržali “storyboard” voľba skontrolovať pri vytváraní projektu, čo znamená, že môžete nájsť jeden MainStoryboard_iPhone.storyboard súbor niekde v skupine priečinkov, ktorá sa nachádza na ľavej strane okna. Kliknutím na súbor ho vyberiete a otvoríte ho.
Nový bočný panel by sa mal objaviť priamo vpravo od skupiny priečinkov. Toto sa nazýva Obrys dokumentu a je to akýsi spôsob rýchleho náhľadu na kontrolu všetkých dostupných zobrazení v tejto scenári.
Chceme začať tým, že pridáme len niekoľko prvkov stránky do nášho kontrolóra zobrazenia. Potrebujeme dva rôzne prvky: a Navigačná lišta a a Tabová tabuľka. Skôr ako ich chytiť, prístup k Inšpektor atribútov (View> Utilities> Show Attributes Inspector) na pravej strane okna a potom vyhľadajte Stavový riadok Štítok. V predvolenom nastavení je nastavené odvodený ktorý používa štandardnú farbu stavu iPhone, ale môžete si tiež vybrať čierna alebo Priehľadná čierna ak vaša aplikácia vyhovuje lepšie farbe.
Knižnica objektov
Ak utilities tabuľka na pravej strane okna nie je viditeľná, môžete ju povoliť prístupom k Zobrazenie> Pomôcky> Zobraziť nástroje. Na paneli Pomôcky sa pozrite dole pre panel nazvaný Knižnica objektov. Dostala sa rozbaľovacia ponuka s “objektov” ako prvú položku v zozname. Ak ste ho nemohli nájsť, môžete vybrať položku Zobraziť> Pomôcky> Zobraziť knižnicu objektov.
V rozbaľovacej ponuke knižnice objektov vyhľadajte a vyberte Windows & Bary. Teraz kliknite na Navigačná lišta, presuňte ho do zobrazovacieho okna a umiestnite ho priamo pod čiernu Stavový riadok (s ikonou batérie). Teraz môžeme prispôsobiť popis názvu baru. Dvakrát kliknite na text, ktorý aktuálne číta “nadpis“, a uvidíte štítok s názvom “nadpis” na paneli Pomôcky, ktorému môžete zmeniť popis názvu “skúška” odtiaľ. hit “vstúpiť” svedčiť o zmene.
Znova v paneli Windows & Bars prejdite nadol a nájdite Tabová tabuľka, potom ho presuňte do zobrazovacieho okna a umiestnite ho do úplnej časti aplikácie. Štandardne tieto 2 prvky vyzerajú fantasticky.
Teraz možno budete chcieť, aby sa gradient navigačnej lišty zhodoval so záložkou v dolnej časti a na to môžete kliknúť na navigačnú lištu a pozrieť sa doprava atribúty v paneli Utility. Prvá možnosť sa nazýva Štýl, ktorý je nastavený na Predvolené. Zmeňte štýl z predvoleného na Čierna nepriehľadná a budeme mať zodpovedajúcu sadu farieb!
V spodnom paneli aplikácie tiež pridáme ďalšie tlačidlo záložky. Presuňte kurzor myši na panel Windows a Bary a prejdite nadol na Položka na paneli, priamo pod panelom Tab. Presuňte to do okna aplikácie a umiestnite ho do stredu dvoch existujúcich tlačidiel na paneli kariet. Ak dvakrát kliknete na toto nové tlačidlo, uvidíte niektoré ďalšie možnosti v podokne Utility a zmeníte položky obraz a nadpis odtiaľ. Napríklad zmenil som titul “záložka” pre novo pridanú položku Tab Tab.
Takže toto je stručný návod na navrhovanie pohľadov v rámci Xcode. Nie je to strašne náročný proces, ale bude potrebovať trochu času, aby ste si zvykli na rozhranie. Hrajte s niekoľkými ďalšími prvkami, ak sa budete cítiť pohodlne, môžete sa tiež obrátiť na vývojové zdroje aplikácie iOS pre ďalšie vzdelávacie zdroje, nikdy nie je zlé, aby ste zistili viac!
Zostaňte naladení pre časť II
To končí našou prvou časťou príručky pre návrh a vývoj aplikácií pre iPhone. V ďalšej časti sa ponoríme o niečo hlbšie do Objective-C a Cocoa Touch a nakoniec sa naučíte vybudovať fungujúcu iPhone aplikáciu, zostaňte naladenou!
Galéria návrhov iOS
Pre dizajnérov tam tiež dúfam, že vám prinesiem nejakú inšpiráciu, a preto som uviedol zoznam úžasných zobrazení aplikácií iPhone nižšie. Zoznam obsahuje veľké množstvo inšpiratívnych prvkov aplikácie, ktoré ste si pravdepodobne nikdy predtým nevšimli. Neváhajte a podeľte sa o svoje nápady, zobrazenia aplikácií alebo otázky v sekcii komentárov nižšie!
Race Splitter
Spokojnosť na diaľku
Tweetbot pre iPhone
Reeder
štvorstranný
MailChimp
Joystiq
Piictu
tma
