4. diel - PRIPOMIENKOVÉ narodenín pre MacOS - Príprava UI

V minulej lekcii, Dokončenie jednoduché kalkulačky pre MacOS vo Swift , sme si vytvorili svoju prvú aplikáciu pre MacOS - jednoduchú kalkulačku. V dnešnom tutoriále pre vývoj pre MacOS vo Swift si naprogramujeme už o poznanie zložitejšia aplikácii. Pôjde o upomienku narodenín, vďaka ktorému nezabudneme na narodeniny našich najbližších.

Takto bude zhruba vyzerať výsledok úvodného tutoriálu:

Založenie projektu

Začnime teda založením MacOS projektu v Xcode a opäť vyberieme Cocoa App.

Návrh formulára

Dnešné úvodnej lekcie sa bude zaoberať tvorbou používateľského rozhrania. To už poznáme z lekcie s tvorbou kalkulačky, len tentoraz bude na formulári viac komponentov a aplikácia bude mať aj druhé okno.

Než začneme tvoriť, popíšme si čo bude hlavné okno aplikácie obsahovať. Okno bude primárne využívať komponent NSTableView (obdoba UITableView z iOS tutoriálu). Pridáme tiež niekoľko Wrapping Label komponentov pre textové informácie. Ide prakticky o obyčajný Label, ktorý má ale nakonfigurované zalamovanie textu, keď nie je dostatok miesta. Obyčajným Label komponentom zalamovanie jednoducho nastaviť nedá. Ako posledný pridáme dvojicu tlačidiel (Push Button) pre pridanie a odobratie osôb z nášho zoznamu.

Komponenty budú pod sebou, čo znamená, že sa nám náramne hodí komponenta StackView.

Okno a Stack View

Pred pridaním môžeme upraviť úvodný veľkosť okna, nezabudnite, že tá sa nastavuje na komponente, kde je uprostred tučne napísané "View Controller", hoci ide o okno. Ja v Size inšpektorovi nastavil šírku okna na 300 a výšku na 450. Zatiaľ to sú provizórne rozmery. Samotný View Controller si môžete do podobných rozmerov prispôsobiť ťahaním za jeho okraje myšou. Je to jedno, veľkosť totiž kontroluje okno.

Ako prvý teda pretiahneme vertikálne StackView a pridáme mu konstraint 10 od všetkých štyroch hrán.

Pre kontrolu by naša scéna mala vyzerať nasledovne:

Komponenty Stack View

Začneme s pridávaním komponentov do Stack View. Najskôr budeme potrebovať celkom 4x Wrapping Label. Pre dnešný dátum, pre najbližšie narodeniny, pre narodeniny a vek vybranej osoby. Potom už spomínanej NSTableView a pod neho ešte dvojicu tlačidiel pre pridávanie a odobratie osôb. Dajte si pri preťahovaní komponentov pozor, aby ste ich korektne vložili do Stack View. Prípadne je tam umiestnite v Document outline, to je ten zoznam komponentov, ktorého obrázok je možné vidieť nižšie. Rovnako tak tu môžete meniť poradie komponentov do Stack View.

Náš PRIPOMIENKOVÉ narodenín by teraz mal vyzerať zhruba takto:

Ak je váš Table View menšie na šírku, jednoducho ho označte a zväčšite na celú dostupnú šírku.

Ako môžeme vidieť, Table View má dva stĺpce a môže ich mať pokojne viac. S niečím takým sa na iOS nestretneme. Bude treba teda vykonať niekoľko úprav.

Keď teraz aplikáciu spustíme a skúsime zväčšiť okno, tak sa bude Table View prispôsobovať, čo je presne to, čo chceme. Pre istotu ešte ukážka, ako by malo vyzerať hlavné nastavenia Stack View:

Neskôr si ukážeme, ako pridať vlastné "spacing" medzi vybrané komponenty, aby sme ich od seba vizuálne odlíšili.

Tlačidla

Ešte, než sa pustíme do úprav Table View, umiestnime naše dve tlačidlá vedľa seba pomocou horizontálne verzie Stack View. V našom hlavnom (vertikálnom) Stack View teda budeme mať pod Table View ešte horizontálne Stack View a doň presunieme obe tlačidlá.

Nastane však problém, pretože NSStackView toho nevie toľko ako UIStackView z iOS. A my chceme, aby tlačidlá zabrala celú šírku a každé malo presne polovicu miesta.

Pomôžu nám AutoLayout constraints a nebude to ani tak ťažké. V prvom rade musíme nášmu horizontálnemu Stack View nastaviť vlastnosť spacing na 0. Tento krok je dôležitý, inak nám potom aplikácie spadne.

Teraz stačí ťahať za držanie Ctrl z tlačidla na horizontálnej Stack View. Potom z ponuky vyberieme "Equal widths". Postup je znázornený na animáciu nižšie:

Potrebujeme vykonať ešte druhý krok, kedy si v Size inšpektorovi otvoríme novo pridanou CONSTRAINT a zmeníme jej multiplier (násobič) na 0.5. Tým získame práve polovicu šírky horizontálneho Stack View:

To isté vykonáme pre druhé tlačidlo. Teraz už stačí nastaviť, aby mal horizontálny Stack View rovnakú šírku ako náš vertikálne. Postup je úplne rovnaký ako u tlačidiel, iba z horizontálneho Stack View ťaháme na vertikálne.

A môžeme otestovať výsledok:

Je možné, že v náhľade Xcode bude horizontálne Stack View vyzerať vyššia. To môžete ignorovať, pri spustení aplikácie bude mať korektné rozmery.

Úprava Table View

Základné komponenty máme vložené a môžeme sa vrhnúť na ich nastavovanie. V prvom rade je nutné Table View správne vybrať, aby ste náhodou nemenili iné vlastnosti jeho častí. Viď obrázok nižšie:

Klasicky si otvorene Attributes inšpektor a v prvom rade zmeníme hodnotu Columns na 1. Hneď pod touto voľbou odškrtnite Headers, aby sme sa zbavili miesta pre prípadné nadpisy.

Konfigurácia zvyšného UI

Obe tlačidlá majú text "Button", čo nie je pre našu aplikáciu práve ideálne. Text prvého teda prepíšeme na "Pridať" a text druhého na "Odstrániť". Stačí tlačidla označiť a otvoriť Attributes inšpektor.

Našim Wrapping Label komponentom môžeme nastaviť ukážkový text, aby sme mali lepší prehľad o tom, ako bude hotová aplikácia vyzerať. Rovnako tak si môžete pohrať s nastavením fontu.

Prepojenie UI s kódom

Pretože v ďalšej lekcii budeme s našimi komponentmi manipulovať, prepojíme ich s užívateľským rozhraním.

Prepájanie UI poznáme z predchádzajúcej lekcie a tiež z iOS tutoriálu. Jednoducho otvoríme Assistant editor a za držanie Ctrl pretiahneme všetky komponenty do editora pre ViewController.swift. Pri otvorenom Main.storyboard stačí stlačiť Option a kliknúť na ViewController.swift, aby sa nám otvoril Assistant editor s týmto súborom.

Zopakujeme si, čo treba:

• @IBOutlet pre všetky štyri Wrapping Label komponenty
• @IBOutlet pre Table View - tu si dajme pozor, aby sme označili skutočne Table View
• @IBOutlet pre vertikálne Stack View, pretože budeme nastavovať custom spacing
• @IBAction pre obe tlačidlá

V našom ViewController.swift by sme mali mať:

@IBOutlet var todayLabel: NSTextField!
@IBOutlet var soonestBirthdayLabel: NSTextField!
@IBOutlet var birthdayLabel: NSTextField!
@IBOutlet var ageLabel: NSTextField!
@IBOutlet var tableView: NSTableView!
@IBOutlet var mainStackView: NSStackView!

A metódy pre obsluhu oboch tlačidiel:

@IBAction func addBtn_Clicked(_ sender: NSButton) {
}

@IBAction func removeBtn_Clicked(_ sender: NSButton) {
}

Vo viewDidLoad() si môžeme nastaviť vlastné spacing za textom informujúcim o najbližších narodeninách. Tým ho vizuálne oddelíme od nasledujúcich dvoch komponentov, ktorých text sa bude meniť v závislosti od výberu v Table View.

mainStackView.setCustomSpacing(15, after: soonestBirthdayLabel)

Pri spustení bez zadaných dát dáva zmysel zobrazovať len text prvej Wrapping Label komponenty informujúci o aktuálnom dátume. Text tých zvyšných môžeme zmazať priamo vo viewDidLoad(), aby nám zostal pre náhľad v Xcode. Rovnaký efekt samozrejme dosiahneme zmazaním textov v Main.storyboard.

override func viewDidLoad() {
        super.viewDidLoad()

        mainStackView.setCustomSpacing(15, after: soonestBirthdayLabel)

        soonestBirthdayLabel.stringValue = ""
        birthdayLabel.stringValue = ""
        ageLabel.stringValue = ""
}

V budúcej lekcii, PRIPOMIENKOVÉ narodenín pre MacOS - Dokončenie UI a prepojenie , si pripravíme druhé okno pre pridávanie osôb a tiež začneme so samotným programovaním.