Teilen über

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

  • Artikel

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 Sie den MonoTouch.Dialog (MT) verwenden. D) Element-API, um schnell mit der Erstellung einer Anwendung mit MT.D zu beginnen.

In dieser exemplarischen Vorgehensweise verwenden wir den MT. D Elements-API zum Erstellen eines Master-Detail-Stils der 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, mit dem wir die Vorgangsbeschreibung und das Fälligkeitsdatum aktualisieren können, wie unten dargestellt:

Wenn Sie die Zeile auswählen, navigieren Sie zum Detailbildschirm, mit dem wir die Aufgabenbeschreibung und das Fälligkeitsdatum aktualisieren können.

Einrichten von MT. D

MT. D wird mit Xamarin.iOS verteilt. Zum Verwenden klicken Sie 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 using MonoTouch.Dialog dann nach Bedarf Anweisungen in Ihrem Quellcode hinzu.

Exemplarische Vorgehensweise der Element-API

Im Artikel "Einführung in MonoTouch Dialog" haben wir ein solides Verständnis der verschiedenen Teile von MT.D gewonnen. Wir verwenden die Element-API, um sie alle in einer Anwendung zusammenzustellen.

Einrichten der Multi-Screen-Anwendung

Um den Prozess der Bildschirmerstellung zu starten, erstellt MonoTouch.Dialog ein DialogViewController, und fügt dann eine RootElement.

Um eine Mehrbildanwendung mit MonoTouch.Dialog zu erstellen, müssen wir Folgendes ausführen:

  1. Erstellen der Datei UINavigationController.
  2. Erstellen der Datei DialogViewController.
  3. Fügen Sie den DialogViewController Stamm des UINavigationController.
  4. Hinzufügen eines RootElement zum DialogViewController.
  5. Hinzufügen Sections und Elements Zum RootElement.

Verwenden eines UINavigationController

Um eine Anwendung im Navigationsstil zu erstellen, müssen wir eine UINavigationControllerAnwendung erstellen und dann wie RootViewController in der FinishedLaunching Methode der AppDelegate. Um die UINavigationController Arbeit mit MonoTouch.Dialog zu machen, fügen wir der folgenden Abbildung eine DialogViewControllerUINavigationController hinzu:

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

Der obige Code erstellt eine Instanz einer und RootElement übergibt sie an die DialogViewController. Das DialogViewController hat RootElement immer einen oben in der Hierarchie. In diesem Beispiel wird die RootElement Zeichenfolge "Aufgabenliste" erstellt, die als Titel in der Navigationsleiste des Navigationscontrollers dient. An diesem Punkt würde das Ausführen der Anwendung den folgenden Bildschirm darstellen:

Wenn Sie die Anwendung ausführen, wird der hier gezeigte 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

A DialogViewController ist eine UITableViewController Unterklasse, die MonoTouch.Dialog verwendet, um Bildschirme hinzuzufügen. MonoTouch.Dialog erstellt Bildschirme durch Hinzufügen eines RootElement zu einem DialogViewController, wie oben gezeigt. Die RootElement Can have Section instances that represents the sections of a table. Die Abschnitte bestehen aus Elementen, anderen Abschnitten oder sogar aus anderen RootElementsAbschnitten. Durch das Verschachteln RootElementserstellt MonoTouch.Dialog automatisch eine Anwendung im Navigationsstil, wie wir als Nächstes sehen.

Verwenden von DialogViewController

Die DialogViewControllerUnterklasse UITableViewController ,, die eine Unterklasse ist, hat eine UITableView Ansicht. In diesem Beispiel möchten wir der Tabelle jedes Mal Elemente hinzufügen, wenn auf die + Schaltfläche getippt wird. Da die DialogViewController Eigenschaft zu einem UINavigationControllerhinzugefügt wurde, können wir die + Schaltfläche mit der NavigationItemEigenschaft 's RightBarButton hinzufügen, wie unten dargestellt:

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

Als wir die RootElement frühere Version erstellt haben, haben wir sie an eine einzelne Section Instanz übergeben, sodass wir Elemente hinzufügen können, während die + Schaltfläche vom Benutzer angetippt wird. Wir können den folgenden Code verwenden, um dies im Ereignishandler für die Schaltfläche auszuführen:

_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 der Name Aufgabe wird verwendet, um die Untertitel zusammen mit einer Zählervariablen n zu erstellen, die RootElementfür jeden neuen Vorgang erhöht wird. MonoTouch.Dialog wandelt die Elemente in die Zeilen um, die TableView beim Hinzufügen der Einzelnen taskElement hinzugefügt werden.

Präsentieren und Verwalten von Dialogbildschirmen

Wir haben eine RootElement So verwendet, dass MonoTouch.Dialog automatisch einen neuen Bildschirm für die Details jeder Aufgabe erstellt und zu ihr 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 einer EntryElement Erstellt, um eine bearbeitbare Zeile für die Eigenschaft der Aufgabe Description bereitzustellen. Wenn das Element ausgewählt ist, wird wie unten dargestellt eine Tastatur für die Textbearbeitung angezeigt:

Wenn das Element ausgewählt ist, wird wie gezeigt eine Tastatur für die Textbearbeitung angezeigt.

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

Wenn Sie das Datum auswählen, wird automatisch eine Datumsauswahl geladen als

In beiden EntryElement Fällen DateElement (oder für ein beliebiges Dateneingabeelement 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 navigieren, wo die Werte in den Detailbildschirmen erhalten bleiben.

Zusammenfassung

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