Letní akce! Lákají tě IT školení C#, Javy a PHP v Brně? Přihlas se a napiš nám do zpráv kód "BRNO 500" pro slevu 500 Kč na libovolný brněnský kurz. Lze kombinovat se slevami uvedenými u školení i použít pro více kurzů. Akce končí 28.7.

Lekce 2 - Tvorba UI a seznámení se základními komponentami

Swift iOS Tvorba UI a seznámení se základními komponentami

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Vývíjíme aplikace pro iOS v jazyce Swift, jsme si představili technologie a vývojové prostředí. Dnes již začneme tvořit aplikaci a ukážeme si, jak se vytváří uživatelské rozhraní (zkráceně UI) aplikací pro iOS.

Založení projektu

Zapněte tedy své Xcode a pojďme společně s tutoriálem rovnou tvořit. Začneme nepřekvapivě založením projektu. V úvodním dialogu vybereme druhou možnost Create a new Xcode project. Na další obrazovce vybereme Single View App:

Nový Single View App Xcode projekt

Po potvrzení stačí zadat název (v mém případě jsem projekt pojmenoal ITNetwork) a zkontrolovat, že je zaškrtnutý Swift jako programovací jazyk:

Založení Xcode ios projektu

V posledním kroku pouze vybereme, kam na disku projekt uložit. Cílem této pasáže je, abyste měli v Xcode otevřený projekt s iOS aplikací.

Storyboard jako základ UI

V dnešní lekci nás v projektu bude zajímat pouze jeden soubor a sice Main.storyboard. Storyboard je ve světě iOS aplikací reprezentace UI, tedy uživatelského rozhraní. Zde budete zkrátka vaše UI skládat z jednotlivých komponent a řešit navigaci mezi jednotlivými obrazovkami vaší aplikace.

UI aplikace, kterou jsme výše vytvořili, se aktuálně skládá z jednoho controlleru typu View Controller. Právě tuto obrazovku uvidíte, když aplikaci spustíme pomocí tlačítka s ikonou play. Šipka na levé straně značí, že se jedná právě o "vstupní" bod aplikace. V případě využití více controllerů je možné šipku přesunout na jiný a tím změnit startovní obrazovku aplikace.

Nový iOS aplikace v Xcode

Naše první UI komponenta

Nyní je konečně čas na praktickou ukázku. Z knihovny komponent, v minulé lekci byla zvýrazněná vpravo dole červeně, přetáhneme Label kamkoliv na plochu našeho jediného controlleru. Xcode vám pomůže se zarovnáním, to ale není třeba řešit. Právě jste úspěšně začali "výstavbu" UI a váš Label bude po spuštění aplikace vidět.

Po jeho označení můžete upravovat vlastnosti pomocí inspektorů, které jsme si představili v minulé lekci, najdete je na pravé straně Xcode. V případě Label je nejdůležitější Attributes Inspector. Právě zde nastavíte text, barvu, velikost písma a celou řadu dalších vlastností. Klidně si jich několik vyzkoušejte.

Attributes Inspector v Xcode pro iOS aplikace

Label se používá k zobrazení statického textu, tedy textu, který nastavíte při vývoji. Samozřejmě můžete text měnit v kódu, ještě v této lekci si ukážeme jak.

S pomocí držení Shift můžete označit více komponent a jejich vlastnosti měnit najednou. Případě můžete ty existující kopírovat a tím si ušetřit nastavování určitých vlastností.

Základní UI komponenty

Udělejme si nyní takovou malou přehlídku základních komponent, abyste věděli co ve svých aplikacích můžete používat za ovládací prvky.

Komponenty mají prakticky dva názvy. Jeden se objevuje v design části a druhý v kódu. Takže například tlačítko je v knihovně komponent Button, ale v kódu UIButton. Jedná se stále o tu samou komponenty. Podobně např. Table View nalezneme v kódu jako UITableView.

Button

Klasické tlačítko, u kterého opět můžeme nastavit řadu vlastností a určit, co se stane po stisknutí. Ovšem v případě iOS se nejedná o tak častý prvek, jako třeba na desktopu a řada věcí se realizuje jinak. Například nastavení aplikace se často řeší pomocí TableView, stejně jako to dělá samotný iOS. Toto si ukážeme v další lekci kurzu.

iOS button v Xcode

Text Field

Další ze základních kontrolek. Potřebujete od uživatele textový vstup nebo mu umožnit editaci textu (jeho emailu nebo čehokoli jiného)? Tak právě pro tyto situace je určena tato kontrolka.

iOS text field v Xcode

Text View

Zobrazuje více textu nebo nechá uživatele více textu napsat. Text View nabízí nespočet vychytávek, jako např. detekování určitého formátu dat, spousty nastavení a podobně. Rozhodně stojí za omrknutí.

Text View v Xcode

Switch

Switch je takový checkbox Apple světa. Využijete jej hlavně, pokud chcete uživatelům nabídnout možnost nastavit si chování a další vlastnosti aplikace. Dále v kurzu si ukážeme, jak nejlépe tato data ukládat.

Switch v Xcode

Image View

Zatím poslední z komponent, které si ukážeme. Jak asi tušíte z názvu, Image View použijeme pro zobrazování obrázků. Dále v kurzu si ještě stručně povíme, jak k nim v iOS přistupovat. Obrázek můžete nastavit buď staticky při vývoji nebo jej měnit z kódu. Důležitá vlastnost je Content Mode a vždy byste ji měli přepnout z výchozího Scale to Fill na Aspect Fit nebo Aspect Fill, abyste se vyhnuli deformaci obrázku při jiném poměru stran.

Image View v Xcode

Table View

Velmi důležitá komponenta, která si ale zaslouží vlastí lekci a budeme se ji věnovat později. Ve spoustě aplikací je Table View základem hned úvodní obrazovky (Messages, Phone, Notes, Settings, WhatsApp a spousta dalších).

Tímto jsme se úspěšně seznámili s vyvořením aplikace a základními UI komponentami. Neřešili jsme jejich pozicování, protože to je komplexní téma jménem Autolayout a podrobně si ho popíšeme v další lekci.

V příští lekci, Swift UI pro různé displeje a Autolayout, se naučíme komponenty na obrazovce zarovnávat pomocí Autolayout.


 

 

Článek pro vás napsal Filip Němeček
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se příležitostně věnuje vývoji iOS aplikací či těch webových za pomocí frameworku Django. Aktuální projekt: hrejzdarma.cz Twitter: @nemecek_f (neprogramátorské tweety)
Aktivity (5)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!