Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Nový Single View App Xcode projekt - Vyvíjame iOS aplikácia vo Swift

Po potvrdení stačí zadať názov (v mojom prípade som projekt pomenoval ITNetwork) a skontrolovať, že je zaškrtnutý Swift ako programovací jazyk:

Založenie Xcode ios projektu - Vyvíjame iOS aplikácia vo Swift

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.

Nový iOS aplikácie v Xcode - Vyvíjame iOS aplikácia vo Swift

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.

Attributes Inspector v Xcode pre iOS aplikácie - Vyvíjame iOS aplikácia vo Swift

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.

iOS button v Xcode - Vyvíjame iOS aplikácia vo Swift

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.

iOS text field v Xcode - Vyvíjame iOS aplikácia vo Swift

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í.

Text View v Xcode - Vyvíjame iOS aplikácia vo Swift

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ť.

Switch v Xcode - Vyvíjame iOS aplikácia vo Swift

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.

Image View v Xcode - Vyvíjame iOS aplikácia vo Swift

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.


 

Predchádzajúci článok
Vyvíjame aplikácie pre iOS v jazyku Swift
Všetky články v sekcii
Vyvíjame iOS aplikácia vo Swift
Preskočiť článok
(neodporúčame)
Swift UI pre rôzne displeja a Autolayout
Článok pre vás napísal Filip Němeček
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje vývoji iOS aplikací (občas macOS)
Aktivity