2. diel - Tvorba UI a zoznámenie so základnými komponentmi
V minulej lekcii, Vyvíjame aplikácie pre iOS v jazyku Swift , sme si predstavili technológie a vývojové prostredie. Dnes už začneme tvoriť aplikáciu a ukážeme si, ako sa vytvára užívateľské rozhranie (skrátene UI) aplikácií pre iOS.
Založenie projektu
Zapnite teda svoje Xcode a poďme spoločne s tutorialom rovno tvoriť. Začneme prekvapivá založením projektu. V úvodnom dialógu vyberieme druhú možnosť Create a new Xcode project. Na ďalšej obrazovke vyberieme Single View App:
Po potvrdení stačí zadať názov (v mojom prípade som projekt pomenoval
ITNetwork) a skontrolovať, že je zaškrtnutý Swift ako
programovací jazyk:
V poslednom kroku len vyberieme, kam na disku projekt uložiť. Cieľom tejto pasáže je, aby ste mali v Xcode otvorený projekt s iOS aplikácií.
Storyboard ako základ UI
V dnešnej lekcii nás v projekte bude zaujímať iba jeden súbor a síce
Main.storyboard. Storyboard je vo svete iOS aplikácií
reprezentácie UI, teda používateľského rozhrania. Tu budete skrátka vaše
UI skladať z jednotlivých komponentov a riešiť navigáciu medzi
jednotlivými obrazovkami vašej aplikácie.
UI aplikácie, ktorú sme vyššie vytvorili, sa aktuálne skladá z jedného Controlleru typu View Controller. Práve túto obrazovku uvidíte, keď aplikáciu spustíme pomocou tlačidla s ikonou play. Šípka na ľavej strane značí, že sa jedná práve o "vstupný" bod aplikácie. V prípade využitia viacerých controllerov je možné šípku presunúť na iný a tým zmeniť štartové obrazovku aplikácie.
Naše prvé UI komponenta
Teraz je konečne čas na praktickú ukážku. Z knižnice komponentov, v
minulej lekcii bola zvýraznená vpravo dole na červeno, pretiahneme
Label kamkoľvek na plochu nášho jediného Controlleru. Xcode
vám pomôže so zarovnaním, to ale nie je potrebné riešiť. Práve ste
úspešne začali "výstavbu" UI a váš Label bude po spustení
aplikácie vidieť.
Po jeho označení môžete upravovať vlastnosti pomocou inšpektorov,
ktoré sme si predstavili v minulej lekcii, nájdete ich na pravej strane Xcode.
V prípade Label je najdôležitejšia Attributes Inspector. Práve
tu nastavíte text, farbu, veľkosť písma a celý rad ďalších vlastností.
Pokojne si ich niekoľko vyskúšajte.
Label sa používa na zobrazenie statického textu, teda textu, ktorý nastavíte pri vývoji. Samozrejme môžete text meniť v kóde, ešte v tejto lekcii si ukážeme ako.
S pomocou držanie Shift môžete označiť viac komponentov a ich vlastnosti meniť naraz. Prípade môžete tie existujúce kopírovať a tým si ušetriť nastavovanie určitých vlastností.
Základné UI komponenty
Urobme si teraz takú malú prehliadku základných komponentov, aby ste vedeli čo vo svojich aplikáciách môžete používať za ovládacie prvky.
Komponenty majú prakticky dva názvy. Jeden sa objavuje v
design časti a druhý v kóde. Takže napríklad tlačidlo je v knižnici
komponentov Button, ale v kóde UIButton. Ide stále o tú istú
komponenty. Podobne napr. Table View nájdeme v kóde ako
UITableView.
Button
Klasické tlačidlo, u ktorého opäť môžeme nastaviť rad vlastností a
určiť, čo sa stane po stlačení. Avšak v prípade iOS nejde o tak častý
prvok, ako napríklad na desktope a rad vecí sa realizuje inak. Napríklad
nastavenia aplikácie sa často rieši pomocou TableView, rovnako
ako to robí samotný iOS. Toto si ukážeme v ďalšej lekcii kurze.
Text Field
Ďalší zo základných kontroliek. Potrebujete od užívateľa textový vstup alebo mu umožniť editáciu textu (jeho emailu alebo čohokoľvek iného)? Tak práve pre tieto situácie je určená táto kontrolka.
Text View
Zobrazuje viac textu alebo nechá užívateľa viac textu napísať. Text View ponúka nespočetné množstvo vychytávok, ako napr. Detekovanie určitého formátu dát, hŕbu nastavenie a podobne. Rozhodne stojí za omrknutí.
Switch
Switch je taký checkbox Apple sveta. Využijete ho hlavne, ak chcete užívateľom ponúknuť možnosť nastaviť si správanie a ďalšie vlastnosti aplikácie. Ďalej v kurze si ukážeme, ako najlepšie tieto dáta ukladať.
Image View
Zatiaľ posledný z komponentov, ktoré si ukážeme. Ako asi tušíte z názvu, Image View použijeme pre zobrazovanie obrázkov. Ďalej v kurze si ešte stručne povieme, ako k nim v iOS pristupovať. Obrázok môžete nastaviť buď staticky pri vývoji alebo ho meniť z kódu. Dôležitá vlastnosť je Content Mode a vždy by ste ju mali prepnúť z východiskového Scale to Fill na Aspect Fit alebo Aspect Fill, aby ste sa vyhli deformácii obrázku pri inom pomere strán.
Table View
Veľmi dôležitá komponenta, ktorá si ale zaslúži vlasťou lekciu a budeme sa ju venovať neskôr. V množstve aplikácií je Table View základom hneď úvodnej obrazovky (Messages, Phone, Notes, Settings, WhatsApp a množstvo ďalších).
Týmto sme sa úspešne zoznámili s vyvořením aplikácie a základnými UI komponentmi. Neriešili sme ich pozicovanie, pretože to je komplexná téma menom Autolayout a podrobne si ho popíšeme v ďalšej lekcii.
V budúcej lekcii, Swift UI pre rôzne displeja a Autolayout , sa naučíme komponenty na obrazovke zarovnávať
pomocou Autolayout.
