Lekce 4 - Upomínač narozenin pro macOS - Příprava UI

V předešlém cvičení, Řešené úlohy k 1.-3. lekci vývoje pro macOS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

V dnešním tutoriálu pro vývoj pro macOS ve Swift si naprogramujeme již o poznání složitější aplikaci. Půjde o upomínač narozenin, díky kterému nezapomeneme na narozeniny našich nejbližších.

Takto bude zhruba vypadat výsledek úvodního tutoriálu:

Založení projektu

Začněme tedy založením macOS projektu v Xcode a opět vybereme Cocoa App.

Návrh formuláře

Dnešní úvodní lekce se bude zabývat tvorbou uživatelského rozhraní. To již známe z lekce s tvorbou kalkulačky, pouze tentokrát bude na formuláři více komponent a aplikace bude mít i druhé okno.

Než začneme tvořit, popišme si co bude hlavní okno aplikace obsahovat. Okno bude primárně využívat komponentu NSTableView (obdoba UITableView z iOS tutoriálu) . Přidáme také několik Wrapping Label komponent pro textové informace. Jde prakticky o obyčejný Label, který má ale nakonfigurované zalamování textu, když není dostatek místa. Obyčejným Label komponentám zalamování jednoduše nastavit nelze. Jako poslední přidáme dvojici tlačítek (Push Button) pro přidání a odebrání osob z našeho seznamu.

Komponenty budou pod sebou, což znamená, že se nám náramně hodí komponenta StackView.

Okno a Stack View

Před přidáním můžeme upravit úvodní velikost okna, nezapomeňte, že ta se nastavuje na komponentě, kde je uprostřed tučně napsáno "View Controller", ačkoliv jde o okno. Já v Size inspektoru nastavil šířku okna na 300 a výšku na 450. Zatím to jsou provizorní rozměry. Samotný View Controller si můžete do podobných rozměrů přizpůsobit tažením za jeho okraje myší. Je to jedno, velikost totiž kontroluje okno.

Jako první tedy přetáhneme vertikální StackView a přidáme mu konstraint 10 od všech čtyř hran.

Pro kontrolu by naše scéna měla vypadat následovně:

Komponenty Stack View

Začneme s přidáváním komponent do Stack View. Nejdříve budeme potřebovat celkem 4x Wrapping Label. Pro dnešní datum, pro nejbližší narozeniny, pro narozeniny a věk vybrané osoby. Potom již zmiňované NSTableView a pod něj ještě dvojici tlačítek pro přidávání a odebrání osob. Dejte si při přetahování komponent pozor, abyste je korektně vložili do Stack View. Případně je tam umístěte v Document outline, to je ten seznam komponent, jehož obrázek je možné vidět níže. Stejně tak zde můžete měnit pořadí komponent ve Stack View.

Náš upomínač narozenin by nyní měl vypadat zhruba takto:

Pokud je váš Table View menší na šířku, jednoduše ho označte a zvětšete na celou dostupnou šířku.

Jak můžeme vidět, Table View má dva sloupce a může jich mít klidně více. S něčím takovým se na iOS nesetkáme. Bude třeba tedy provést několik úprav.

Když nyní aplikaci spustíme a zkusíme zvětšit okno, tak se bude Table View přizpůsobovat, což je přesně to, co chceme. Pro jistotu ještě ukázka, jak by mělo vypadat hlavní nastavení Stack View:

Později si ukážeme, jak přidat vlastní "spacing" mezi vybrané komponenty, abychom je od sebe vizuálně odlišili.

Tlačítka

Ještě, než se pustíme do úprav Table View, umístíme naše dvě tlačítka vedle sebe pomocí horizontální verze Stack View. V našem hlavním (vertikálním) Stack View tedy budeme mít pod Table View ještě horizontální Stack View a do něj přesuneme obě tlačítka.

Nastane ovšem problém, jelikož NSStackView toho neumí tolik jako UIStackView z iOS. A my chceme, aby tlačítka zabrala celou šířku a každé mělo přesně polovinu místa.

Pomohou nám AutoLayout constraints a nebude to ani tak těžké. V první řadě musíme našemu horizontálnímu Stack View nastavit vlastnost spacing na 0. Tento krok je důležitý, jinak nám potom aplikace spadne.

Nyní stačí táhnout za držení Ctrl z tlačítka na horizontální Stack View. Potom z nabídky vybereme "Equal widths". Postup je znázorněn na animaci níže:

Potřebujeme provést ještě druhý krok, kdy si v Size inspektoru otevřeme nově přidanou constraint a změníme její multiplier (násobič) na 0.5. Tím získáme právě polovinu šířky horizontálního Stack View:

To samé provedeme pro druhé tlačítko. Nyní již stačí nastavit, aby měl horizontální Stack View stejnou šířku jako náš vertikální. Postup je úplně stejný jako u tlačítek, pouze z horizontálního Stack View táhneme na vertikální.

A můžeme otestovat výsledek:

Je možné, že v náhledu Xcode bude horizontální Stack View vypadat vyšší. To můžete ignorovat, při spuštění aplikace bude mít korektní rozměry.

Úprava Table View

Základní komponenty máme vložené a můžeme se vrhnout na jejich nastavování. V první řadě je nutné Table View správně vybrat, abyste náhodou neměnili jiné vlastnosti jeho částí. Viz obrázek níže:

Klasicky si otevřenem Attributes inspektor a v první řadě změníme hodnotu Columns na 1. Hned pod touto volbou odškrtneme Headers, abychom se zbavili místa pro případné nadpisy.

Konfigurace zbylého UI

Obě tlačítka mají text "Button", což není pro naši aplikaci zrovna ideální. Text prvního tedy přepíšeme na "Přidat" a text druhého na "Odebrat". Stačí tlačítka označit a otevřít Attributes inspektor.

Našim Wrapping Label komponentám můžeme nastavit ukázkový text, abychom měli lepší přehled o tom, jak bude hotová aplikace vypadat. Stejně tak si můžete pohrát s nastavením fontu.

Propojení UI s kódem

Protože v další lekci budeme s našimi komponentami manipulovat, propojíme je s uživatelským rozhraním.

Propojování UI známe z předchozí lekce a také z iOS tutoriálu. Jednoduše otevřeme Assistant editor a za držení Ctrl přetáhneme všechny komponenty do editoru pro ViewController.swift. Při otevřeném Main.storyboard stačí zmáčknout Option a kliknout na ViewController.swift, aby se nám otevřel Assistant editor s tímto souborem.

Zopakujeme si, co je třeba:

• @IBOutlet pro všechny čtyři Wrapping Label komponenty
• @IBOutlet pro Table View - zde si dejme pozor, abychom označili skutečně Table View
• @IBOutlet pro vertikální Stack View, protože budeme nastavovat custom spacing
• @IBAction pro obě tlačítka

V našem ViewController.swift bychom měli mít:

@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 metody pro obsluhu obou tlačítek:

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

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

Ve viewDidLoad() si můžeme nastavit vlastní spacing za textem informujícím o nejbližších narozeninách. Tím ho vizuálně oddělíme od následujících dvou komponent, jejichž text se bude měnit v závislosti na výběru v Table View.

mainStackView.setCustomSpacing(15, after: soonestBirthdayLabel)

Při spuštění bez zadaných dat dává smysl zobrazovat pouze text první Wrapping Label komponenty informující o aktuálním datu. Text těch zbylých můžeme smazat přímo ve viewDidLoad(), aby nám zůstal pro náhled v Xcode. Stejného efektu samozřejmě dosáhneme smazáním textů v Main.storyboard.

override func viewDidLoad() {
        super.viewDidLoad()

        mainStackView.setCustomSpacing(15, after: soonestBirthdayLabel)

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

V příští lekci, Upomínač narozenin pro macOS - Dokončení UI a propojení, si připravíme druhé okno pro přidávání osob a také začneme se samotným programováním.