Geek tričko zdarma Python týden
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Pouze tento sleva až 80% na kurzy Python

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Jednoduchá kalkulačka pro macOS ve Swift

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.

Vytvoření nového Cocoa App Swift projektu

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

Vytvoření nového macOS projektu v Xcode ve Swift

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:

Nový macOS Swift projekt

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:

Přidání StackView do macOS projektu v Xcode

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:

Přetahování komponent z knihovny do Document Outline

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.

Nastavení velikosti okna v Xcode

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:

Nastavení Autolayout constraints v Xcode

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ě:

Attributes Inspector v Xcode

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 =:

Omezení šířky labelu v Xcode

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.

Prvky ComboBoxu v Xcode

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):

Constraints pro tlačítko v Xcode

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.

Kalkulačka pro macOS v Xcode

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


 

Stáhnout

Staženo 4x (34.44 kB)
Aplikace je včetně zdrojových kódů v jazyce Swift

 

 

Článek pro vás napsal Filip Němeček
Avatar
Jak se ti líbí článek?
1 hlasů
Autor se věnuje vývoji iOS aplikací (občas macOS) či těch webových ve frameworku Django. Twitter: @nemecek_f | GitHub nemecek-filip
Předchozí článek
Vyvíjíme aplikace pro macOS v jazyce Swift
Všechny články v sekci
Vyvíjíme macOS aplikace ve Swift
Miniatura
Následující článek
Dokončení jednoduché kalkulačky pro macOS ve Swift
Aktivity (2)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!