Příručka pro začátečníky k vývoji iOS Rozhraní - část I

Společnost Apple je již řadu let vedoucím průmyslem v mobilním světě se svou řadou iPhone a iPad. I přes humbuk, který může vytvořit s každou oficiální verzí, drží také velkou část tržních podílů na mobilní platformě, což je pravděpodobně důvod, proč většina klientů bude chtít, aby jejich aplikace existovala v obchodě aplikací Apple; tak se stává důvodem pro vývojáře učit a budovat iPhone app.

Dobrou zprávou je, že vývoj aplikací pro iPhone není tak tvrdý, jak byste si mohli myslet, a tento post existuje jako komplexní průvodce, který vás provede celým procesem vytváření aplikace pro iPhone.

Budeme diskutovat o důvodech, fázích a nástrojích pro vývoj aplikace a nakonec budete následovat jednoduchý návod pro návrh základní aplikace pro iPhone pomocí kódu Xcode.

Takže ať už se učíte pro podnikání, nebo máte prostě úžasný nápad, který by vás mohl učinit milionářem, začněme budovat první aplikaci pro iPhone!

Poznámka: Budete potřebovat počítač s operačním systémem Macintosh (Mac OS) pro instalaci Xcode, vývoj aplikací a odesílání aplikací..

Proč vyvíjet pro Apple?

Vidím tuto otázku často, takže chci vysvětlit, proč byste měli mít zájem o vývoj iPhone. Stejně jako jsem uvedl v úvodu, iPhone v současné době drží velkou část tržních podílů na mobilní platformě.

Myslím, že tento důvod by měl být dost pro vás naučit se vyvíjet aplikaci pro iPhone, ať už vyvíjíte pro sebe nebo klienty, většina lidí pravděpodobně doufá, že jejich aplikace může být přístupná mnoha lidem na světě.

Z hlediska vývoje, Apple má rád věci jednoduché, a to platí pro jejich produkty a rámce. iOS je operační systém, který napájí všechna mobilní zařízení Apple. Patří mezi ně zařízení iPod Touch, iPhone a iPad. Mějte na paměti, když vyvíjíte aplikace pro iPhone, můžete být pro všechna ostatní zařízení s iOS!

Kromě toho, co dělá výše uvedené funkce ještě větší, je to, kolik práce kódování může být uloženo. Když píšete kód pro iPhone aplikaci, jste používat stejný programovací jazyk pro všechna počítačová zařízení Apple. To znamená, že když vyvíjíte aplikaci pro iPhone, aplikace může být později integrována do iPadu a dokonce i Mac.

Cíl-C je jádrem programovacího jazyka, který napájí všechny jejich rámce. Spolu s Objective-C, budete také vyvíjet iPhone app s Cocoa Touch, programovací rámec řízení interakce uživatele na iOS.

To je jen trochu informací, které vám pomohou začít vývoj aplikací pro iPhone. Vývoj je poměrně komplikovaný proces, ale relax, pomalu. Důvody jsou tady a rozhodnutí je vaše. Ať už je odpověď ano nebo ne, můžete vždy přejít přímo do dalšího tématu: navrhování aplikací pro iPhone.

Plánování iPhone App Struktura

Ve standardní ideologii vytváření aplikace pro iPhone budete chtít projít několika fázemi. První fáze zahrnuje plánování a skicování.

Především musíte mít nápad co bude vaše aplikace dělat. Proč by si ho lidé chtěli stáhnout? A jaké funkce chcete zahrnout? To je nejdůležitější fáze, jako kdybyste to udělali správně, budete ušetřit spoustu zmatků a starostí ve fázi kódování.

Nejhorší je, že vás dostane zpět na rýsovací prkno.

Doporučuji načrtněte několik hrubých nápadů pro několik stránek (nebo zobrazení) vaší aplikace. Stačí nakreslit obdélníkový tvar, možná 5 nebo 6 tvarů na list papíru, a potom nakreslete funkce, které chcete na každé zobrazení vaší aplikace..

Můžete přemýšlet o názorech, jako jsou různé stránky na webových stránkách. Každé zobrazení nabídne různé funkce, například přihlašovací formulář, seznam kontaktů nebo tabulku dat.

Níže jsem vytvořil stručnou sbírku různých prvků uživatelského rozhraní:

Stavový řádek - Zobrazuje aktuální úroveň nabití baterie, připojení 3G, přijímače, telefonní operátor a mnohem více. Doporučujeme, abyste tyto prvky vždy zahrnuli.
Navigační panel - Poskytuje uživatelům možnost procházet mezi hierarchiemi stránek. To často zahrnuje tlačítko na levé straně lišty, které uživateli umožňuje vrátit se k předchozímu zobrazení aplikace.
Panel nástrojů - Zobrazí se v dolní části aplikace pro iPhone. To bude mít několik ikon vázaných na některé funkce, jako je Podíl, Stažení, Smazat, atd.
Tab Bar - Velmi podobný nástrojovému panelu, kromě toho, že pracujete s kartami. Když uživatel klikne na ikonu karty, bude automaticky zvýrazněn a zobrazí se lesklý stav přechodu. Tento pruh slouží k přepínání mezi pohledy namísto nabízení přímé funkce.

Tento seznam obsahuje pouze panely nástrojů, které můžete najít ve většině aplikací. Existuje několik dalších pohledů a stylů, které můžete zvážit, které najdete v Pokynech pro používání iOS UI Element Usage. Vřele doporučuji nahlédnout do této dokumentace, pokud máte pochybnosti o prvcích uživatelského rozhraní iPhone.

V zájmu času nebudu popisovat každý prvek uživatelského rozhraní. Existuje příliš mnoho prvků, které je třeba zvážit, a nebudete nakonec používat všechny z nich v jediné aplikaci. Ale jak si načrtnete své názory, můžete čerpejte inspiraci z výše uvedených pokynů a dalších aplikací pro iPhone užili jste si je.

Navrhování Photoshop Mockups

Předpokládám, že většina z vás je poměrně pohodlná práce s aplikací Adobe Photoshop. Jedná se o premiérový software pro tvorbu grafiky pro webové stránky, bannery, loga a mobilní makety. Navrhování grafiky pro web je poměrně jednoduchý proces, ale je to trochu složitější, pokud jde o iPhone app design.

Pokud hledáte vytvořit aplikaci, kterou byste opravdu měli Vytvářejte perfektní maketa modelů od začátku.

Chcete-li začít, měli bychom se zabývat nastavením aplikace Photoshop. Vzhledem k tomu, že jsme navrhování pro iPhone musíme zvážit 2 různé styly designu. běžný displej iPhone je 320 x 480 pixelů. Nicméně iPhone 4 obsahuje displej sítnice, který zdvojnásobuje množství pixelů ve stejné velikosti obrazovky. Takže bys měl zdvojnásobte rozlišení na 640 x 960 pixelů a navrhněte rozvržení podle tohoto standardu.

To znamená, že budete také potřebovat vytvořit 2 sady ikon pro vaše makety. Původně by ikony byly nastaveno na 163ppi ale budete muset zahrnují ikony s 326ppi pro iPhone 4. Ikony jsou tradičně označeny ikonou @ 2x na konci názvu souboru, například “[email protected]“.

Nyní optimalizujme naše nové nastavení dokumentu. Nejdříve budeme muset upravit některé předvolby, takže přístup do aplikace Photoshop> Upravit> Předvolby> Průvodce, mřížka a řezy. Budeme nastavení naší Gridline každých 20px s dělením na 2. Při návrhu sítnice displej Linka 2px zobrazí 1 bod na obrazovce. To je důležité pravidlo, které je třeba mít na paměti při rozšiřování aplikace.

Snažím se snadněji stavět mé návrhy s vyšším rozlišením a pak je zmenšovat, ale můžete zkuste obě metody a uvidíte, co vám nejlépe vyhovuje. Používáme 640 x 960 pixelů při 326ppi - uložte to jako vlastní přednastavení, pokud si myslíte, že jej budete používat často.

Budova s prvky šablony

Nyní můžete pomocí aplikace Photoshop vytvořit vlastní rozvržení s dokonalým obrazem, což se však jeví jako velmi vyčerpávající a únavná práce..

Jedná se o obrovský soubor s příliš mnoha prvky. Pro usnadnění můžete stisknout tlačítko v Přesunout nástroj a klikněte na “Automatický výběr” na volitelném pruhu, poté vyberte “Vrstva” spíše než “Skupina”. S nastavením můžete kliknout na libovolný prvek a Photoshop vás přivede na odpovídající vrstvu!

Nebojte se hrát s maketou, nebo můžete dokonce vytvořit prototyp aplikace z makety. V závislosti na vaší aplikaci můžete zahrnout spousta funkcí v rámci základní oblasti, z nichž mnohé byste mohli najít v tomto souboru PSD. Je také možné přejít na vrstvy těchto prvků a upravit písma, barvy přechodů a další styly designu. Prostě ujistěte se, že nic nezměníte protože všechny pruty a prvky uživatelského rozhraní jsou nastaveny na výchozí standardní velikosti.

Vývoj aplikací v Xcode

Vývojářský nástroj pro programování iOS a Mac OS X je pojmenován jako Xcode. Pokud používáte OS X Lion, můžete najít Xcode a všechny příslušné balíčky zdarma Mac App Store.

Po dokončení instalace spusťte Xcode a jeho uvítací obrazovka by se měla objevit. Odtud můžete načíst starší projekt nebo si vybrat nový. Pro tuto chvíli musíte kliknout “Vytvořit nový projekt Xcode“, pak okno šablony přijde s několika možnostmi. V aplikaci iOS> Aplikace klikněte na “Aplikace s jedním pohledem” a hit “další”. Můžeš dát novou aplikaci jméno, jako Test (nejlépe bez mezer), pak na Identifikátor společnosti, zadejte libovolné slovo jako moje společnost, a nakonec vyberte adresář a stiskněte “Uložit”.

Xcode vytvoří adresář souborů a pošle vás do nového okna pro práci. Měli byste vidět mnoho souborů uvedených možností, ale složku, která je pojmenována po aplikaci je primárním ohniskem.

S Xcode máte dvě možnosti pro návrh předních prvků. Klasika xib / nib Tento formát je standardem pro aplikace Mac OS X a iOS, což vyžaduje, abyste při každém zobrazení navrhli nové zobrazení stránky. Vzhledem k tomu, že vytváříte více zobrazení v jediné aplikaci, může se stát, že množství souborů s nibem bude až příliš ohromující, takže bude třeba vytvořit nový scénář obsahuje všechny vaše pohledy na nib v jednom editoru. Odtud můžete snadno odstranit a přidat prvky uživatelského rozhraní a funkce.

Kromě toho narazíte .h a .m soubory ve stejné skupině složek. Jedná se o krátké názvy souborů záhlaví a implementace kód. Tyto soubory jsou tam, kde píšete všechny Objective-C funkce a proměnné potřebné pro spuštění aplikace. Může být vhodné vysvětlit, jak Xcode pracuje MVC (Model, View, Controller), což je důvod, proč potřebujeme pro každý regulátor 2 soubory.

Hierarchie programování MVC

Abyste pochopili, jak aplikace funguje, musíte pochopit její programovací architekturu. S Model, View, Controller (MVC) jako základ, Xcode může oddělit všechny vaše displeje a kód rozhraní od vašich logických a procesních funkcí, a tam není opravdu jiná možnost výběru. MVC se může na první pohled zdát matoucí, ale pokud jste se to pokusili pochopit a začít budovat několik základních aplikací, budete milovat strukturu.

Abychom usnadnili pochopení, představili jsme každý objekt v níže uvedeném seznamu:

Modelka - Obsahuje všechna vaše logická a základní data. To zahrnuje proměnné, připojení k externím kanálům RSS nebo obrázky, podrobné funkce a křižování čísel. Tato vrstva je zcela oddělena od vašich pohledů, takže můžete snadno měnit zobrazení a mít stále stejné zpracování dat.
Pohled - Styl obrazovky nebo zobrazení ve vaší aplikaci. Seznam tabulek, stránka s profilem, stránka s přehledem článků, audio přehrávač, video přehrávač, to vše jsou příklady zobrazení. Můžete změnit jejich styly a odstranit prvky, ale budete stále pracovat se stejnými daty v modelu.
Ovladač - Působí jako prostředník mezi ostatními dvěma. Připojujete objekty ve vašem pohledu k ViewController, který předává informace do az vašeho modelu. Tímto způsobem je možné, aby uživatel klepl na tlačítko a zaregistroval to ve svém modelu. Poté spusťte funkci odhlášení a prostřednictvím stejného řadiče předejte zprávu “úspěšně odhlášen!”.

Takže v podstatě vaše model obsahuje všechny informace a funkce které budete muset někde zobrazit na obrazovce. Ale modely nemohou komunikovat s obrazovkou, pouze pohledy mohou. Pohledy jsou většinou všechny vizuální, a to může pouze vytáhnout data prostřednictvím ViewController. Řadič je vlastně mnohem rafinovanější způsob, jak skrýt data zadního konce z designu přední strany. Tímto způsobem můžete několikrát renovovat design a přitom neztratit žádnou funkčnost.

S těmito znalostmi by nemělo být těžké začít budovat prvních několik aplikací. Jak již bylo zmíněno dříve, Cíl-C je základní programovací jazyk, který budete používat k vývoji aplikace. Je postaven na jazyce C s aktualizovanou syntaxí a několika dalšími paradigmaty. Budete potřebovat spoustu času, abyste se seznámili s jazykem, ale pro začátečnickou lekci doporučuji výukovou sérii od Mobiletuts+.

Designový pohled se Storyboards

Nyní, když jsme se podívali na technické aspekty aplikace, měli bychom strávit trochu času návrhem rozhraní. Předpokládám, že jste si to nechali “Storyboard” volba zkontrolovat při tvorbě projektu, což znamená, že můžete najít jeden MainStoryboard_iPhone.storyboard soubor někde ve skupině složek na levé straně okna. Kliknutím na soubor jej vyberte a otevřete zobrazení.

Nový postranní panel by se měl zobrazit přímo napravo od skupiny složek. Toto se nazývá Obrys dokumentu a je to metoda rychlého náhledu pro kontrolu všech dostupných zobrazení v tomto scénáři.

Chceme začít přidáním několika elementů stránky do našeho řadiče pohledů. Potřebujeme dva různé prvky: a Navigační panel a Tab Bar. Než jsme je chytili, přístup k Inspektor atributů (Zobrazit> Nástroje> Zobrazit atribut inspektoři) na pravé straně okna, pak vyhledejte Stavový řádek označení. Standardně je nastaven na Odvozeno který používá standardní barvu statusu iPhone, ale můžete si také vybrat Černá nebo Průsvitná černá pokud váš návrh aplikace lépe vyhovuje barvě.

Knihovna objektů

Pokud je Utility podokno na pravé straně okna není viditelné, můžete jej povolit přístupem k zobrazení> Nástroje> Zobrazit nástroje. V podokně Utilities (Nástroje) se podívejte do dolní části panelu s názvem Knihovna objektů. Má rozbalovací nabídku s “Objekty” jako první položka seznamu. Pokud jej nemůžete najít, můžete vybrat možnost Zobrazit> Nástroje> Zobrazit knihovnu objektů.

V rozevírací nabídce Knihovna objektů najděte a vyberte Windows a bary. Nyní klikněte na Navigační panel, přetáhněte ji do okna zobrazení a umístěte jej přímo pod černou Stavový řádek (s ikonou baterie). Nyní můžeme upravit popis názvu panelu. Poklepejte na text, který se právě načítá “Titul“, a uvidíte jmenovku “Titul” v podokně Utilities, pomocí které můžete změnit popis popisu “Test” odtamtud. Udeřil “Zadejte” být svědkem změny.

Na panelu Windows a pruhy znovu přejděte dolů a vyhledejte Tab Bar, pak přetáhněte do okna zobrazení a umístěte jej na samém konci aplikace. Ve výchozím nastavení vypadají tyto dva prvky fantasticky.

Nyní možná chcete, aby se přechod navigační lišty shodoval s tabulátorem v dolní části obrazovky. K tomu můžete kliknout na navigační lištu a podívat se vpravo. Atributy panelu nástrojů. První možnost je volána Styl, nastaveno na Výchozí. Změnit styl z Výchozí na Černý neprůhledný a budeme mít odpovídající sadu barev!

Pojďme také přidat další záložku v dolní liště aplikace. Přesuňte kurzor myši znovu na panel Windows a pruhy a přejděte dolů Položka lišty, přímo pod Tab Bar. Přetáhněte to do okna aplikace a umístěte jej do středu 2 stávajících tlačítek na panelu karet. Pokud dvakrát kliknete na toto nové tlačítko, zobrazí se v podokně Nástroje další možnosti, které změníte obraz a titul odtamtud. Například jsem změnil název na “Záložka do knihy” pro nově přidanou položku Tab Bar.

Jedná se tedy o stručný návod k navrhování pohledů v Xcode. Není to strašně obtížný proces, ale bude to vyžadovat trochu více času, než si zvyknete na rozhraní. Pokud se budete cítit pohodlně, zahrajte si s několika dalšími prvky a můžete se také vydat na vývojové zdroje iOS společnosti Apple, kde najdete další zdroje informací.!

Zůstaňte naladěni na část II

To uzavírá naši první část příručky pro design a vývoj aplikací pro iPhone. V další části se ponoříme trochu hlouběji do Objective-C a Cocoa Touch a nakonec se naučíte stavět fungující aplikaci pro iPhone.!

Galerie designu iOS

Pro designéry tam jsem také doufat, že vám přinese nějaké inspirace, takže jsem zahrnoval seznam úžasné iPhone pohledy níže. Seznam obsahuje celou řadu inspirujících prvků aplikace, které jste si nikdy předtím nevšimli. Podělte se o své nápady, zobrazení aplikací nebo dotazy v sekci komentáře níže, děkujeme!

Závod Splitter