Erstellen einer Xamarin.iOS-Anwendung mithilfe der Elements-API

Artikel
07/13/2023

Dieser Artikel baut auf den Informationen auf, die im Artikel Einführung in monoTouch Dialog vorgestellt werden. Es wird eine exemplarische Vorgehensweise gezeigt, die zeigt, wie MonoTouch.Dialog (MT. D) Elements-API, um schnell mit dem Erstellen einer Anwendung mit MT.D zu beginnen.

In dieser exemplarischen Vorgehensweise verwenden wir das MT. D Elements-API zum Erstellen eines master-Detailstils einer Anwendung, die eine Aufgabenliste anzeigt. Wenn der Benutzer die + Schaltfläche in der Navigationsleiste auswählt, wird der Tabelle für die Aufgabe eine neue Zeile hinzugefügt. Wenn Sie die Zeile auswählen, navigieren Sie zum Detailbildschirm, auf dem wir die Aufgabenbeschreibung und das Fälligkeitsdatum aktualisieren können, wie unten dargestellt:

Einrichten von MT. D

MT. D wird mit Xamarin.iOS verteilt. Klicken Sie dazu mit der rechten Maustaste auf den Knoten Verweise eines Xamarin.iOS-Projekts in Visual Studio 2017 oder Visual Studio für Mac, und fügen Sie einen Verweis auf die MonoTouch.Dialog-1-Assembly hinzu. Fügen Sie dann nach Bedarf Anweisungen im Quellcode hinzu using MonoTouch.Dialog .

Exemplarische Vorgehensweise für die Element-API

Im Artikel Einführung in monoTouch Dialog haben wir ein solides Verständnis der verschiedenen Teile von MT.D. Wir verwenden die Elemente-API, um sie alle in einer Anwendung zusammenzufügen.

Einrichten der Multi-Screen-Anwendung

Um den Bildschirmerstellungsprozess zu starten, erstellt MonoTouch.Dialog einen DialogViewControllerund fügt dann ein hinzu RootElement.

Um eine Multi-Screen-Anwendung mit MonoTouch.Dialog zu erstellen, müssen wir:

Erstellen der Datei UINavigationController.
Erstellen der Datei DialogViewController.
Fügen Sie den DialogViewController als Stamm von hinzu. UINavigationController.
Hinzufügen einer RootElement zum DialogViewController.
Hinzufügen Sections von und Elements zum RootElement.

Verwenden eines UINavigationControllers

Um eine Anwendung im Navigationsstil zu erstellen, müssen sie erstellt UINavigationControllerund dann als RootViewController in der FinishedLaunching -Methode von hinzugefügt werden AppDelegate. Um die UINavigationController Arbeit mit MonoTouch.Dialog zu ermöglichen, fügen wir der UINavigationController wie unten gezeigt ein hinzuDialogViewController:

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;
}

Mit dem obigen Code wird eine instance erstellt RootElement und an die DialogViewControllerübergeben. Der DialogViewController hat immer oben in seiner Hierarchie ein RootElement . In diesem Beispiel wird mit RootElement der Zeichenfolge "To Do List" erstellt, die als Titel in der Navigationsleiste des Navigationscontrollers dient. An diesem Punkt wird beim Ausführen der Anwendung der folgende Bildschirm angezeigt:

Sehen wir uns an, wie Sie die hierarchische Struktur von Sections MonoTouch.Dialog verwenden und Elements weitere Bildschirme hinzufügen.

Erstellen der Dialogbildschirme

Eine DialogViewController ist eine UITableViewController Unterklasse, die MonoTouch.Dialog verwendet, um Bildschirme hinzuzufügen. MonoTouch.Dialog erstellt Bildschirme, indem einer RootElementDialogViewControllerhinzugefügt wird, wie oben gezeigt. Der RootElement kann Instanzen haben Section , die die Abschnitte einer Tabelle darstellen. Die Abschnitte bestehen aus Elementen, anderen Abschnitten oder sogar anderen RootElements. Durch das Verschachteln RootElementserstellt MonoTouch.Dialog automatisch eine Anwendung im Navigationsstil, wie wir als Nächstes sehen werden.

Verwenden von DialogViewController

Die DialogViewController- als UITableViewController Unterklasse - weist eine UITableView als Ansicht auf. In diesem Beispiel möchten wir der Tabelle bei jedem Tippen auf die + Schaltfläche Elemente hinzufügen. Da zu DialogViewController einem UINavigationControllerhinzugefügt wurde, können wir die NavigationItem-Eigenschaft "s RightBarButton " verwenden, um die + Schaltfläche hinzuzufügen, wie unten gezeigt:

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

Als wir das RootElement zuvor erstellt haben, haben wir eine einzelne Section instance übergeben, sodass wir Elemente hinzufügen können, wenn der Benutzer auf die + Schaltfläche tippt. Wir können den folgenden Code verwenden, um dies im Ereignishandler für die Schaltfläche zu erreichen:

_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);
};

Dieser Code erstellt jedes Mal, wenn auf die Schaltfläche getippt wird, ein neues Task Objekt. Im Folgenden wird die einfache Implementierung der Task -Klasse veranschaulicht:

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

    public DateTime DueDate { get; set; }
}

Die -Eigenschaft des Vorgangs Name wird verwendet, um die RootElementUntertitel zusammen mit einer Zählervariable namens n zu erstellen, die für jeden neuen Vorgang inkrementiert wird. MonoTouch.Dialog wandelt die Elemente in die Zeilen um, die dem TableView hinzugefügt werden, wenn jedes taskElement hinzugefügt wird.

Präsentation und Verwaltung von Dialogbildschirmen

Wir haben eine RootElement verwendet, damit MonoTouch.Dialog automatisch einen neuen Bildschirm für die Details jeder Aufgabe erstellt und zu diesem navigiert, wenn eine Zeile ausgewählt wird.

Der Aufgabendetailseite selbst besteht aus zwei Abschnitten; Jeder dieser Abschnitte enthält ein einzelnes Element. Das erste Element wird aus einem EntryElement erstellt, um eine bearbeitbare Zeile für die Eigenschaft des Vorgangs Description bereitzustellen. Wenn das Element ausgewählt ist, wird eine Tastatur für die Textbearbeitung angezeigt, wie unten gezeigt:

Der zweite Abschnitt enthält eine DateElement , mit der wir die Eigenschaft der DueDate Aufgabe verwalten können. Wenn Sie das Datum auswählen, wird automatisch eine Datumsauswahl wie gezeigt geladen:

In beiden EntryElement Fällen und DateElement (oder für alle Dateneingabeelemente in MonoTouch.Dialog) werden alle Änderungen an den Werten automatisch beibehalten. Wir können dies veranschaulichen, indem wir das Datum bearbeiten und dann zwischen dem Stammbildschirm und verschiedenen Aufgabendetails hin und her navigieren, wobei die Werte in den Detailbildschirmen beibehalten werden.

Zusammenfassung

In diesem Artikel wurde eine exemplarische Vorgehensweise vorgestellt, die die Verwendung der MonoTouch.Dialog Elements-API veranschaulicht. Es wurden die grundlegenden Schritte zum Erstellen einer Anwendung mit mehreren Bildschirmen mit MT behandelt. D, einschließlich der Verwendung von und DialogViewController dem Hinzufügen von Elementen und Abschnitten zum Erstellen von Bildschirmen. Darüber hinaus wurde gezeigt, wie MT verwendet wird. D in Verbindung mit einem UINavigationController.