watchOS-Tabellensteuerelemente in Xamarin

Das watchOS-Steuerelement WKInterfaceTable ist viel einfacher als sein iOS-Gegenstück, übernimmt aber eine ähnliche Rolle. Es erstellt eine Bildlaufliste mit Zeilen, die benutzerdefinierte Layouts aufweisen können und auf Touchereignisse reagieren.

Hinzufügen einer Tabelle

Ziehen Sie das Table-Steuerelement in eine Szene. Standardmäßig sieht es wie folgt aus (mit einem einzelnen nicht angegebenen Zeilenlayout):

Geben Sie der Tabelle im FeldName des Eigenschaftenpads einen Namen, damit im Code darauf verwiesen werden kann.

Hinzufügen eines Zeilencontrollers

Die Tabelle enthält automatisch eine einzelne Zeile, die durch einen Zeilencontroller dargestellt wird, der standardmäßig ein Group-Steuerelement enthält.

Um die Klasse für den Zeilencontroller festzulegen, wählen Sie die Zeile in der Dokumentgliederung aus, und geben Sie im Pad Eigenschaften einen Klassennamen ein:

Nachdem die Klasse für den Zeilencontroller festgelegt wurde, erstellt die IDE eine entsprechende C#-Datei im Projekt. Ziehen Sie Steuerelemente (z. B. Bezeichnungen) auf die Zeile, und geben Sie ihnen Namen, damit im Code auf sie verwiesen werden kann.

Erstellen und Auffüllen von Zeilen

SetNumberOfRows erstellt die Zeilencontrollerklassen für jede Zeile und wählt dabei die Identifier richtige aus. Wenn Sie Ihrem Zeilencontroller einen benutzerdefinierten Identifierzugewiesen haben, ändern Sie den Standardwert im folgenden Codeausschnitt in den von Ihnen verwendeten Bezeichner. Die RowControllerfür jede Zeile wird erstellt, wenn SetNumberOfRows aufgerufen wird und die Tabelle angezeigt wird.

myTable.SetNumberOfRows ((nint)rows.Count, "default");
    // loads row controller by identifier

Wichtig

Tabellenzeilen werden nicht wie in iOS virtualisiert. Versuchen Sie, die Anzahl der Zeilen zu begrenzen (Apple empfiehlt weniger als 20).

Nachdem die Zeilen erstellt wurden, müssen Sie jede Zelle auffüllen (wie GetCell bei iOS). Dieser Codeausschnitt aus dem WatchTables-Beispiel aktualisiert die Bezeichnung in jeder Zeile.

for (var i = 0; i < rows.Count; i++) {
    var elementRow = (RowController)myTable.GetRowController (i);
    elementRow.myRowLabel.SetText (rows [i]);
}

Wichtig

Die Verwendung SetNumberOfRows von und das anschließende Durchlaufen mithilfe von bewirktGetRowController, dass die gesamte Tabelle an den watch gesendet wird. Verwenden Sie in nachfolgenden Ansichten der Tabelle, wenn Sie bestimmte Zeilen InsertRowsAt hinzufügen oder entfernen müssen, um RemoveRowsAt die Leistung zu verbessern.

Antworten auf Tippen

Sie können auf zwei verschiedene Arten auf die Zeilenauswahl reagieren:

• implementieren Sie die DidSelectRow -Methode auf dem Schnittstellencontroller, oder
• Erstellen Sie eine Segue im Storyboard, und implementieren GetContextForSegue Sie, wenn die Zeilenauswahl eine andere Szene öffnen soll.

DidSelectRow

Um die Zeilenauswahl programmgesteuert zu behandeln, implementieren Sie die DidSelectRow -Methode. Verwenden Sie PushController zum Öffnen einer neuen Szene den Bezeichner der Szene und den zu verwendenden Datenkontext, und übergeben Sie diese:

public override void DidSelectRow (WKInterfaceTable table, nint rowIndex)
{
    var rowData = rows [(int)rowIndex];
    Console.WriteLine ("Row selected:" + rowData);
    // if selection should open a new scene
    PushController ("secondInterface", rows[(int)rowIndex]);
}

GetContextForSegue

Ziehen Sie eine Segue auf dem Storyboard aus der Tabellenzeile in eine andere Szene (halten Sie beim Ziehen die STRG-TASTE gedrückt). Wählen Sie unbedingt den Segue aus, und geben Sie ihm im Pad Eigenschaften einen Bezeichner (z secondLevel . B. im folgenden Beispiel).

Implementieren Sie im Schnittstellencontroller die GetContextForSegue -Methode, und geben Sie den Datenkontext zurück, der für die Szene bereitgestellt werden soll, die vom Segue dargestellt wird.

public override NSObject GetContextForSegue (string segueIdentifier, WKInterfaceTable table, nint rowIndex)
{
    if (segueIdentifier == "secondLevel") {
        return new NSString (rows[(int)rowIndex]);
    }
    return null;
}

Diese Daten werden in Awake der -Methode an die Storyboard-Zielszene übergeben.

Mehrere Zeilentypen

Standardmäßig verfügt das Tabellensteuerelement über einen einzelnen Zeilentyp, den Sie entwerfen können. Um weitere Zeilenvorlagen hinzuzufügen, verwenden Sie das Feld Zeilenim Eigenschaftenpad , um weitere Zeilencontroller zu erstellen:

Wenn Sie die Rows-Eigenschaft auf 3 festlegen, werden zusätzliche Zeilenplatzhalter erstellt, in die Sie Steuerelemente ziehen können. Legen Sie für jede Zeile den Klassennamen im Pad Eigenschaften fest, um sicherzustellen, dass die Zeilencontrollerklasse erstellt wird.

Verwenden Sie zum Auffüllen einer Tabelle mit verschiedenen Zeilentypen die SetRowTypes -Methode, um den Zeilencontrollertyp anzugeben, der für jede Zeile in der Tabelle verwendet werden soll. Verwenden Sie die Zeilenbezeichner, um anzugeben, welcher Zeilencontroller für jede Zeile verwendet werden soll.

Die Anzahl der Elemente in diesem Array sollte mit der Anzahl der Zeilen übereinstimmen, die Sie in der Tabelle erwarten:

myTable.SetRowTypes (new [] {"type1", "default", "default", "type2", "default"});

Wenn Sie eine Tabelle mit mehreren Zeilencontrollern auffüllen, müssen Sie verfolgen, welchen Typ Sie beim Auffüllen der Benutzeroberfläche erwarten:

for (var i = 0; i < rows.Count; i++) {
    if (i == 0) {
        var elementRow = (Type1RowController)myTable.GetRowController (i);
        // populate UI controls
    } else if (i == 3) {
        var elementRow = (Type2RowController)myTable.GetRowController (i);
        // populate UI controls
    } else {
        var elementRow = (DefaultRowController)myTable.GetRowController (i);
        // populate UI controls
    }
}

Vertikale Detail paging

watchOS 3 hat ein neues Feature für Tabellen eingeführt: die Möglichkeit, durch die Detailseiten zu jeder Zeile zu scrollen, ohne zur Tabelle zurückkehren und eine andere Zeile auswählen zu müssen. Die Detailbildschirme können durch Wischen nach oben und unten oder mithilfe der Digital Crown gescrollt werden.

Wichtig

Dieses Feature ist derzeit nur durch Bearbeiten des Storyboards in Xcode Interface Builder verfügbar.

Um dieses Feature zu aktivieren, wählen Sie auf WKInterfaceTable der Entwurfsoberfläche aus, und aktivieren Sie die Option Vertikale Detail paging :

Wie von Apple erläutert , muss die Tabellennavigation Segues verwenden, damit die Pagingfunktion funktioniert. Schreiben Sie jeden vorhandenen Code, der verwendet, PushController um stattdessen segues zu verwenden, neu.

Anhang: Codebeispiel für Zeilencontroller

Die IDE erstellt automatisch zwei Codedateien, wenn ein Zeilencontroller im Designer erstellt wird. Der Code in diesen generierten Dateien wird unten als Referenz angezeigt.

Die erste wird wie folgt für die -Klasse benannt, z . B. RowController.cs:

using System;
using Foundation;

namespace WatchTablesExtension
{
    public partial class RowController : NSObject
    {
        public RowController ()
        {
        }
    }
}

Die andere .designer.cs-Datei ist eine partielle Klassendefinition, die die Outlets und Aktionen enthält, die auf der Designeroberfläche erstellt werden, z. B. dieses Beispiel mit einem WKInterfaceLabel Steuerelement:

using Foundation;
using System;
using System.CodeDom.Compiler;
using UIKit;

namespace WatchTables.OnWatchExtension
{
    [Register ("RowController")]
    partial class RowController
    {
        [Outlet]
        [GeneratedCode ("iOS Designer", "1.0")]
        public WatchKit.WKInterfaceLabel MyLabel { get; set; }

        void ReleaseDesignerOutlets ()
        {
            if (MyLabel != null) {
                MyLabel.Dispose ();
                MyLabel = null;
            }
        }
    }
}

Auf die hier deklarierten Outlets und Aktionen kann dann im Code verwiesen werden. Die Datei .designer.cs sollte jedoch NICHT direkt bearbeitet werden.

Ähnliche Themen

• WatchTables (Beispiel)
• WatchKitCatalog (Beispiel)
• Apple's Table-Dokumentation