Lekce 2 - Návrh jednoduché kalkulačky pro macOS

V minulé lekci, Vyvíjíme aplikace pro macOS v jazyce Swift, jsme si udělali úvod do vývoje pro macOS v jazyce Swift.

Dnes si pro začátek vytvoříme jednoduchou kalkulačku. Ta bude mít dva vstupy pro čísla, výběr matematické operace, vypsání výsledku a samozřejmě tlačítko pro výpočet.

Výsledek bude vypadat nějak takto:

Vytvoření projektu

Nyní se pojďme pustit do samotné tvorby. Vytvořte si nový Xcode projekt a v nabídce nejprve zvolte macOS jako platformu a následně Cocoa App, jak můžete vidět níže.

V dalším kroku zadáme název, například SimpleCalculatorMac. Zkontrolujeme, že je vybrán Swift jako jazyk a zaškrtnuta pouze volba "Use Storyboards". Potom stačí vybrat umístění na disku a projekt je vytvořený.

Měl by být rovnou otevřený soubor Main.storyboard, který slouží k vytvoření uživatelského rozhraní. Jestli není, tak ho kliknutím otevřete. Měli byste vidět něco podobného:

Jestli jste třeba zkoušeli programovat iOS aplikace, tak vás možná zarazí designová struktura nově vytvořené aplikace, která je "rozkouskovaná" na tři části. Po spuštění se ale zobrazí jedno okno a také menu aplikace, které je na macOS vždy v horní liště.

Část samotného okna (ta výš) pojmenovaná jako Window Controller slouží jako takový kontejner pro naše uživatelské rozhraní. Dále se zde nastavuje velikost okna a případně ještě její omezení. Naše uživatelské rozhraní budeme vytvářet ve View Controlleru (dále jen VC) níže.

StackView

Protože budeme mít několik komponent vedle sebe, hodí se použít komponentu Stack View, která skládá komponenty vedle sebe nebo pod sebe podle toho, jak si vybereme.

Na náš VC si tedy přetáhneme Horizontal Stack View z knihovny komponent:

Stejným stylem budeme přidávat další komponenty. Nyní je naším úkolem naplnit nově přidaný Stack View těmito komponentami a dodržet pořadí:

• Text Field with Number Formatter
• Combo Box
• TextField with Number Formatter
• Label
• Label

První Label bude mít text =, ten nastavíme v Attributes inspektoru. Druhý třeba 0, zde budeme později zobrazovat výsledek.

Doporučuji komponenty přetahovat do Document Outline, což je seznam oken, viewcontrollerů a právě komponent na levé straně editoru. To abyste snadněji mohli nastavit pořadí. Opět si můžeme ukázat:

Náhled v Xcode se vám pravděpodobně rozhodí, ale to není moc důležité. Po spuštění bude aplikace vypadat korektně. Nyní máme ve Stack View téměř všechny plánované komponenty a zbývá pár detailů před spuštěním.

Nastavení okna

Nastavíme si velikost okna. Nejdříve musíme vybrat správný objekt: Window Controller Scene > Window Controller > Window. Nyní můžeme v Attributes inspektoru nastavit "nadpis" označený jako Title třeba na "Simple Calculator". V Size inspektoru nastavíme velikost okna a také případně zaškrtneme minimální či maximální velikost okna.

Já jsem zvolil 480x130 a zároveň tyto rozměry použil jako minimální. Maximální rozměry nastavovat nebudeme, protože si později ukážeme, jak se naše jednoduché uživatelské rozhraní přizpůsobuje velikosti okna.

Pozicovaní komponent macOS aplikací

K nastavení pozic jednotlivých komponent slouží tzv. Autolayout. Přes něj definujeme pravidla a komponenty jsou následně dynamicky pozicované. Je to z důvodu, že nevíme, jak velký má uživatel displej, jak si aplikaci rozhodne zvětšit/zmenšit a tak podobně.

Autolayout je konceptuálně stejný na macOS jako na iOS, takže si vás dovolím odkázat na iOS Autolayout tutoriál, pokud chcete vědět více. Mrknout můžete také na praktické ukázky.

Nám budou nyní stačit základy, které pochytíte i během výkladu. Nejdříve si ukotvíme náš Stack View a díky tomu vlastně všechny zatím přidané komponenty. V našem VC ho budeme centrovat vertikálně a 10 bodů od pravého a levého okraje. Tak pojďme na to. Označíme Stack View a v Autolayout menu mu tyto tři podmínky nastavíme:

Pro lepší výsledek si nastavíme pár dalších vlastností našeho Stack View. Nastavíme zarovnání na "Center Y", distribuci komponent na "Fill Equally" a volitelně také Spacing. Attributes inspektor bude tedy vypadat následovně:

Dále můžeme pomocí Autolayout omezení nastavit pevnou a malou šířku našim dvěma Label komponentám, protože jedna zobrazuje pouze = a druhá zobrazí číslo, pravděpodobně ne delší než pět číslic. Můžeme si ukázat třeba postup pro =:

Pro druhý Label jsem zvolil pro jistotu větší šířku, např. 65. Také si můžete pohrát s nastavením fontu.

Combo Box by sice vypadal lépe s omezenou šířkou, ale žádnou mu nenastavujte. Když jsem to zkoušel, tak fixní šířka rozhodila zbytek komponent (jmenovitě dvě Text Field komponenty pro zadávání čísel) a v první lekci bych rád nechal co nejjednodušší uživatelské rozhraní.

Combo Box každopádně potřebuje úpravy. V první řadě mu musíme přidat matematické operace. Vyberte tedy Combo Box a v Attributes inspektoru je hned na prvním místě seznam prvků, ve výchozím stavu "Item 1, Item 2,..". Postupně na prvky dvakrát klikněte a přepište na následující operace:

• +
• -
• /
• *

Tedy sčítání, odečítání, dělení a násobení. Tlačítkem "+" hned pod seznamem můžete případně přidat další prvek.

Zbývá poslední drobnost a sice zakázat uživateli, aby mohl náš Combo Box editovat, protože pak může napsat cokoliv svého. My chceme, aby mohl zadat jen jednu z přednastavených operací. V Attributes inspektoru musíme najít položku Behavior a změnit ji z "Editable" na "Selectable". Je zhruba "v polovině" všech možností.

Naše uživatelské rozhraní je celkem hotové. Na úvod toho bylo díky Autolayot a dalším nutnostem celkem hodně. Takže dobrá práce! Nyní stačí přidat tlačítko pro výpočet a můžeme se pustit do programování.

Tlačítko

V knihovně komponent vyhledejte "button" a do VC si přetáhněte Push Button. Tlačítek je zde hromada a právě toto se nejlépe hodí pro naše použití. Umístěme ho pod Stack View zhruba na střed. Stejně si ho zarovnáme. Dávejte pozor, abyste ho omylem neumístili do Stack View.

Tlačítku nastavte v Attributes inspektoru třeba text "Calculate!" pomocí vlastnosti Title. Můžete si také pohrát s fontem či pomocí Sound nastavit zvuk po stisknutí.

Zbývá tlačítko "uklidit" pomocí Autolayout. Postup již znáte z předchozí práce s UI. Tlačítko zarovnáme horizontálně na střed a dáme mu fixní šířku a výšku třeba 90x30 a v neposlední řadě ještě 20 bodů od horní hrany, což je v tomto případě náš Stack View.

Vaše constraints pro přidané tlačítko by měly vypadat následovně (najdete je v Size inspektoru):

Tímto je naše uživatelské rozhraní pro naši kalkulačku skutečně hotové. Aplikaci můžete spustit a vyzkoušet, jak se chová při roztažení okna.

V příští lekci, Dokončení jednoduché kalkulačky pro macOS ve Swift, kalkulačku dokončíme.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.