Lekce 2 - Tvorba UI a seznámení se základními komponentami
V minulé lekci, Vyví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:
Po potvrzení stačí zadat název (v mém případě jsem projekt pojmenoval
ITNetwork) a zkontrolovat, že je zaškrtnutý Swift jako
programovací jazyk:
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.
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.
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.
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.
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í.
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.
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.
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 vytvoř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.
V příští lekci, Swift UI pro různé displeje a Autolayout, se naučíme komponenty na obrazovce zarovnávat
pomocí Autolayout.
