Scénáře v Xamarin.Mac – úvodní příručka

Jako rychlý úvod k definování uživatelského rozhraní aplikace Xamarin.Mac pomocí scénářů začněme nový projekt Xamarin.Mac. Vyberte aplikaciMacAppCoa>> a klikněte na tlačítko Další:

Adding a new Cocoa App

Použijte názevMacStoryboard aplikace a klikněte na tlačítko Další :

Setting the App Name

Použijte výchozí Project Název a název řešení a klikněte na tlačítko Vytvořit:

The project and solution names

V Průzkumník řešení poklikejte na Main.storyboard soubor a otevřete ho pro úpravy v Tvůrci rozhraní Xcode:

Editing the storyboard in Xcode Interface Builder.

Jak vidíte výše, výchozí storyboard definuje řádek nabídek aplikace i hlavní okno s kontrolerem zobrazení a zobrazením. Pro naši ukázkovou aplikaci vytvoříme uživatelské rozhraní, které má hlavní zobrazení obsahu na jedné straně a zobrazení inspektoru ve druhé.

K tomu budeme muset nejprve odebrat výchozí kontroler zobrazení a zobrazení, které je součástí scénáře, tak, že ho vyberete v Tvůrci rozhraní a stisknete klávesu Delete :

Removing the default view controller

Potom do oblasti Filtru zadejte split svislý rozdělený ovladač zobrazení a přetáhněte ho na návrhovou plochu:

Searching for the split view controller

Všimněte si, že kontroler automaticky obsahoval dva podřízené kontrolery zobrazení (a jejich související zobrazení), kabelové připojení k levé a pravé straně rozděleného zobrazení. Pokud chcete rozdělit zobrazení s nadřazeným oknem spojit, stiskněte klávesu Control , klikněte na ovladač okna (modrý kroužek v rámečku kontroleru oken) a přetáhněte čáru na řadič rozděleného zobrazení. V místní nabídce vyberte obsah okna :

Setting the windows content view

Tím spojíte dva elementy rozhraní pomocí segue:

The Segue between the window and the content

Chceme umístit textové zobrazení do levé strany rozděleného zobrazení a nechat ho automaticky vyplnit dostupnou oblast, když se změní velikost okna nebo rozděleného zobrazení. Přetáhněte textové zobrazení na horní kontroler zobrazení připojený k rozděleném zobrazení a klikněte na omezení automatického rozložení připnout (druhá ikona vpravo v dolní části návrhového povrchu).

Configuring the constraints

Odsud klikneme na všechny čtyři ikony I-Beam kolem ohraničujícího rámečku v horní části ohraničujícího okna omezení a kliknutím na tlačítko Přidat 4 omezení dole přidáte požadovaná omezení.

Pokud se vrátíme do Visual Studio pro Mac a spustíme projekt, všimněte si, že velikost textového zobrazení se automaticky změní tak, aby vyplnila levou stranu rozděleného zobrazení jako okno nebo rozdělení:

An example of the app running, displaying text in the left pane of the Window.

Vzhledem k tomu, že budeme používat pravou stranu rozděleného zobrazení jako oblast inspektoru, chceme, aby měla menší velikost a mohla být sbalená. Vraťte se do Xcode a upravte zobrazení na pravé straně tak, že ho vyberete na návrhové ploše a kliknete na Inspektor velikosti. Odsud zadejte šířku250:

Setting the width

Dále vyberte položku Rozdělení, která představuje pravou stranu, nastavte vyšší prioritu podržení a klikněte na tlačítko Uživatel může sbalit zaškrtávací políčko:

Editing the holding priority

Pokud se vrátíme k Visual Studio pro Mac a spustíme projekt teď, všimněte si, že pravá strana má menší velikost a velikost okna se změní:

An example of the app running, displaying text in the larger left pane of the Window.

Definování prezentace Segue

Rozložením pravé strany rozděleného zobrazení budeme fungovat jako inspektor pro vlastnosti vybraného textu. Některé ovládací prvky přetáhneme do dolního zobrazení, abychom mohli rozložení uživatelského rozhraní inspektoru. U posledního ovládacího prvku chceme zobrazit překryvné okno, které uživateli umožňuje vybrat ze čtyř přednastavených stylů znaků.

Do inspektoru a kontroleru zobrazení přidáme tlačítko na návrhovou plochu. Změníme velikost kontroleru zobrazení tak, aby byla velikost, kterou chceme, aby byl popover a přidal do něj čtyři tlačítka. Dále stiskneme klávesu Control a klikneme na tlačítko v zobrazení inspektoru a přetáhneme na kontroler zobrazení, který bude představovat náš překryvný okno:

Dragging to create a new segue in View Controller.

V místní nabídce vybereme automaticky otevírané okno:

Selecting the popover segue type from the View Controller.

Nakonec vybereme segue na návrhovém povrchu a nastavíme preferovaný okrajdoleva. Potom přetáhneme čáru z zobrazení ukotvení na tlačítko, ke kterému chceme, aby se automaticky otevírané okno připojilo k:

Dragging to create a new segue by attaching the Anchor View to the Button.

Pokud se vrátíme do Visual Studio pro Mac, spusťte aplikaci a v inspektoru klikněte na tlačítko Žádné, zobrazí se automaticky otevírané okno:

An example of the segue running, displaying the popover.

Vytváření předvoleb aplikací

Většina standardních aplikací pro macOS poskytuje dialog předvoleb , který uživateli umožňuje definovat několik možností, které řídí různé aspekty aplikace, jako je vzhled nebo uživatelské účty.

Pokud chcete definovat standardní okno dialogového okna předvoleb, přetáhněte nejprve kontroler zobrazení tabulátoru na návrhovou plochu:

Editing the storyboard in Xcode by first dragging the Tab View Controller onto the Design Surface.

Opět se to automaticky zobrazí se dvěma podřízenými řadiči zobrazení připojenými. Například přidáme popisek do každého zobrazení, které bude za středem:

Setting the constraints

Dále chceme zobrazit okno Předvolby, když uživatel vybere položku nabídky Předvolby... . Na řádku nabídek vyberte položku nabídky Předvolby, stiskněte klávesu Control a přetáhněte čáru do kontroleru zobrazení karet:

Dragging to create a segue

V automaticky otevírané nabídce vybereme modální okno, aby se toto okno zobrazilo jako modální dialogové okno:

Selecting the modal segue type from the Action Segue menu.

Pokud uložíme změny, vraťte se do Visual Studio pro Mac, spusťte aplikaci a vyberte položku nabídky Předvolby... a zobrazí se naše nové dialogové okno Předvolby:

An example of the segue running, showing the new Preferences dialog box.

Můžete si všimnout, že toto dialogové okno předvoleb aplikace pro macOS nevypadá jako standardní okno předvoleb aplikace. Tento problém vyřešíte tak, že do složky aplikace Resources Xamarin.Mac v Průzkumník řešení zahrnete dva soubory obrázků a vrátíte se do Tvůrce rozhraní Xcode.

Vyberte kontroler zobrazení karet a přepněte jeho styl na panel nástrojů:

Setting the tab bar style

Vyberte každou kartu a dejte jí popisek a vyberte jeden z obrázků, které chcete znázorňovat:

Configuring each tab in Xcode

Pokud uložíme změny, vraťte se do Visual Studio pro Mac, spusťte aplikaci a vyberte položku nabídky Předvolby... a dialogové okno se teď zobrazí jako standardní aplikace pro macOS:

An example of the running preferences window

Další informace najdete v dokumentaci k práci s obrázky, nabídkami, Windows a dialogy.