Sdílet prostřednictvím

Vytvoření aplikace Xamarin.iOS pomocí rozhraní Elements API

  • Článek

Tento článek vychází z informací uvedených v článku Úvod do dialogového okna MonoTouch. Představuje návod, který ukazuje, jak používat MonoTouch.Dialog (MT. D) Rozhraní ELEMENTS API pro rychlé zahájení vytváření aplikace pomocí MT.D.

V tomto názorném postupu použijeme MT. Rozhraní API elementů D pro vytvoření stylu předlohy podrobností aplikace, která zobrazuje seznam úkolů. Když uživatel vybere + tlačítko na navigačním panelu, přidá se do tabulky úkolu nový řádek. Výběrem řádku přejdete na obrazovku podrobností, která nám umožní aktualizovat popis úkolu a termín splnění, jak je znázorněno níže:

Výběrem řádku přejdete na obrazovku podrobností, která nám umožní aktualizovat popis úkolu a termín splnění.

Nastavení MT. D

MT. D se distribuuje s Xamarin.iOS. Pokud ho chcete použít, klikněte pravým tlačítkem myši na uzel Odkazy projektu Xamarin.iOS v sadě Visual Studio 2017 nebo Visual Studio pro Mac a přidejte odkaz na sestavení MonoTouch.Dialog-1. Potom podle potřeby přidejte using MonoTouch.Dialog do zdrojového kódu příkazy.

Názorný průvodce rozhraním Elements API

V článku Úvod do MonoTouch Dialog jsme získali solidní pochopení různých částí MT.D. Pojďme použít rozhraní Elements API k jejich vytvoření do aplikace.

Nastavení víceobrazovkové aplikace

Chcete-li spustit proces vytváření obrazovky, MonoTouch.Dialog vytvoří DialogViewControllera pak přidá .RootElement

K vytvoření víceobrazovkové aplikace pomocí MonoTouch.Dialog musíme:

  1. Vytvořte soubor UINavigationController.
  2. Vytvořte soubor DialogViewController.
  3. DialogViewController Přidání jako kořeneUINavigationController.
  4. Přidání do RootElementDialogViewController.
  5. Přidat Sections a Elements do RootElement.

Použití uiNavigationController

Abychom vytvořili aplikaci ve stylu navigace, musíme vytvořit UINavigationControllera pak ji přidat jako RootViewController metodu FinishedLaunchingAppDelegate. Abychom mohli UINavigationController pracovat s MonoTouch.Dialog, přidáme ho k následujícímu DialogViewController obrázku UINavigationController :

public override bool FinishedLaunching (UIApplication app, NSDictionary options)
{
    _window = new UIWindow (UIScreen.MainScreen.Bounds);
            
    _rootElement = new RootElement ("To Do List"){new Section ()};

    // code to create screens with MT.D will go here …

    _rootVC = new DialogViewController (_rootElement);
    _nav = new UINavigationController (_rootVC);
    _window.RootViewController = _nav;
    _window.MakeKeyAndVisible ();
            
    return true;
}

Výše uvedený kód vytvoří instanci objektu a RootElement předá ho do objektu DialogViewController. Vždy DialogViewController má RootElement nahoře v hierarchii. V tomto příkladu RootElement se vytvoří řetězec "Seznam úkolů", který slouží jako název v navigačním panelu navigačního kontroleru. V tomto okamžiku by spuštění aplikace zobrazilo následující obrazovku:

Spuštění aplikace zobrazí zde zobrazenou obrazovku.

Pojďme se podívat, jak používat hierarchickou strukturu Sections MonoTouch.Dialog a Elements přidat další obrazovky.

Vytváření obrazovek dialogových oken

A DialogViewController je UITableViewController podtřída, kterou MonoTouch.Dialog používá k přidání obrazovek. MonoTouch.Dialog vytváří obrazovky přidáním obrazovek RootElement do objektu DialogViewController, jak jsme viděli výše. RootElement Můžou mít Section instance, které představují oddíly tabulky. Oddíly jsou tvořeny prvky, dalšími oddíly nebo dokonce jinými RootElements. Když vnoříte RootElements, MonoTouch.Dialog automaticky vytvoří aplikaci ve stylu navigace, jak uvidíme dále.

Použití DialogViewController

Podtřída DialogViewController, která je podtřídou UITableViewControllerUITableView , má své zobrazení. V tomto příkladu chceme přidat položky do tabulky při každém klepnutí na + tlačítko. Vzhledem k tomu, že byla DialogViewController přidána do objektu UINavigationController, můžeme k přidání + tlačítka použít NavigationItemRightBarButton vlastnost, jak je znázorněno níže:

_addButton = new UIBarButtonItem (UIBarButtonSystemItem.Add);
_rootVC.NavigationItem.RightBarButtonItem = _addButton;

Když jsme vytvořili RootElement dříve, předali jsme ji jednu Section instanci, abychom mohli přidat prvky, protože uživatel + klepne na tlačítko. K tomuto účelu můžeme použít následující kód v obslužné rutině události tlačítka:

_addButton.Clicked += (sender, e) => {                
    ++n;
                
    var task = new Task{Name = "task " + n, DueDate = DateTime.Now};
                
    var taskElement = new RootElement (task.Name) {
        new Section () {
            new EntryElement (task.Name, "Enter task description", task.Description)
        },
        new Section () {
            new DateElement ("Due Date", task.DueDate)
        }
    };
    _rootElement [0].Add (taskElement);
};

Tento kód vytvoří nový Task objekt při každém klepnutí na tlačítko. Následující příklad ukazuje jednoduchou implementaci Task třídy:

public class Task
{   
    public Task ()
    {
    }
      
    public string Name { get; set; }
        
    public string Description { get; set; }

    public DateTime DueDate { get; set; }
}

Vlastnost úkolu Name se používá k vytvoření RootElementpopis 'spolu s proměnnou čítače s názvemn, která se zvýší pro každý nový úkol. MonoTouch.Dialog změní prvky na řádky, které jsou přidány při TableView každém taskElement přidání.

Prezentace a správa dialogových obrazovek

Použili jsme tak RootElement , aby MonoTouch.Dialog automaticky vytvořil novou obrazovku pro podrobnosti každého úkolu a při výběru řádku na ni přecháděl.

Samotná obrazovka podrobností úkolu se skládá ze dvou částí; každý z těchto oddílů obsahuje jeden prvek. První prvek je vytvořen z objektu EntryElement , který poskytuje upravitelný řádek pro vlastnost úkolu Description . Při výběru prvku se zobrazí klávesnice pro úpravy textu, jak je znázorněno níže:

Při výběru prvku se zobrazí klávesnice pro úpravy textu, jak je znázorněno

Druhá část obsahuje objekt DateElement , který nám umožňuje spravovat vlastnost úkolu DueDate . Výběrem data se automaticky načte výběr data, jak je znázorněno níže:

Výběr data automaticky načte výběr data jako

V obou EntryElement případech DateElement (nebo u jakéhokoli prvku pro zadávání dat v MonoTouch.Dialog) se všechny změny hodnot zachovají automaticky. Můžeme to předvést úpravou data a následným přechodem mezi kořenovou obrazovkou a různými podrobnostmi úkolu, kde se hodnoty na obrazovkách podrobností zachovají.

Shrnutí

Tento článek představil návod, který ukázal, jak používat rozhraní MonoTouch.Dialog Elements API. Probral základní kroky k vytvoření víceobrazovkové aplikace s MT. D, včetně toho, jak používat a DialogViewController jak přidat prvky a oddíly k vytváření obrazovek. Kromě toho ukázala, jak používat MT. D ve spojení s .UINavigationController