Partager via

Contrôles de table watchOS dans Xamarin

  • Article

Le contrôle watchOS WKInterfaceTable est beaucoup plus simple que son équivalent iOS, mais effectue un rôle similaire. Il crée une liste de défilement de lignes qui peuvent avoir des dispositions personnalisées et qui répondent aux événements tactiles.

Liste des tables de surveillance Regardez les détails de la table

Ajout d’une table

Faites glisser le contrôle Table dans une scène. Par défaut, il se présente comme suit (montrant une disposition de ligne non spécifiée unique) :

Ajout d'un tableau

Donnez un nom à la table dans la zone Nom du panneau Propriétés afin qu’elle puisse être référencée dans le code.

Ajouter un contrôleur de ligne

La table inclut automatiquement une seule ligne, représentée par un contrôleur de ligne qui contient un contrôle Group par défaut.

Pour définir la classe du contrôleur de ligne, sélectionnez la ligne dans Document Outline et tapez un nom de classe dans le panneau Propriétés :

Entrée d’un nom de classe dans le panneau Propriétés

Une fois la classe du contrôleur de ligne définie, l’IDE crée un fichier C# correspondant dans le projet. Faites glisser des contrôles (tels que des étiquettes) sur la ligne et donnez-leur des noms afin qu’ils puissent être référencés dans le code.

Créer et remplir des lignes

SetNumberOfRows crée les classes de contrôleur de ligne pour chaque ligne, à l’aide de la Identifier méthode permettant de sélectionner la ligne appropriée. Si vous avez donné à votre contrôleur de ligne une valeur personnalisée Identifier, remplacez la valeur par défaut dans l’extrait de code ci-dessous par l’identificateur que vous avez utilisé. La RowControllerligne de chaque ligne est créée lorsqu’elle SetNumberOfRows est appelée et la table affichée.

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

Important

Les lignes de table ne sont pas virtualisées comme elles se trouvent dans iOS. Essayez de limiter le nombre de lignes (Apple recommande moins de 20).

Une fois les lignes créées, vous devez remplir chaque cellule (comme GetCell dans iOS). Cet extrait de code met à jour l’étiquette dans chaque ligne :

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

Important

L’utilisation SetNumberOfRows , puis la boucle à l’aide de l’utilisation GetRowController entraîne l’envoi de l’intégralité de la table à la montre. Dans les vues suivantes de la table, si vous devez ajouter ou supprimer des InsertRowsAt lignes spécifiques et RemoveRowsAt améliorer les performances.

Répondre aux appuis

Vous pouvez répondre à la sélection de lignes de deux façons différentes :

  • implémenter la DidSelectRow méthode sur le contrôleur d’interface, ou
  • créez un segue sur le storyboard et implémentez GetContextForSegue si vous souhaitez que la sélection de lignes ouvre une autre scène.

DidSelectRow

Pour gérer par programme la sélection de lignes, implémentez la DidSelectRow méthode. Pour ouvrir une nouvelle scène, utilisez PushController et transmettez l’identificateur de la scène et le contexte de données à utiliser :

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

Faites glisser un segue sur le storyboard de votre ligne de table vers une autre scène (maintenez la touche Contrôle enfoncée lors du glissement). Veillez à sélectionner le segue et à lui donner un identificateur dans le panneau Propriétés (par secondLevel exemple, dans l’exemple ci-dessous).

Dans le contrôleur d’interface, implémentez la GetContextForSegue méthode et retournez le contexte de données qui doit être fourni à la scène présentée par la segue.

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

Ces données sont transmises à la scène de storyboard cible dans sa Awake méthode.

Types de lignes multiples

Par défaut, le contrôle table a un type de ligne unique que vous pouvez concevoir. Pour ajouter d’autres lignes « templates », utilisez la zone Lignes dans le panneau Propriétés pour créer d’autres contrôleurs de lignes :

Définition du nombre de lignes prototypes

La définition de la propriété Rows sur 3 crée des espaces réservés de lignes supplémentaires pour vous permettre de faire glisser des contrôles. Pour chaque ligne, définissez le nom de la classe dans le panneau Propriétés pour vous assurer que la classe de contrôleur de ligne est créée.

Lignes de prototype dans le concepteur

Pour remplir une table avec différents types de lignes, utilisez la SetRowTypes méthode pour spécifier le type de contrôleur de ligne à utiliser pour chaque ligne de la table. Utilisez les identificateurs de la ligne pour spécifier le contrôleur de ligne à utiliser pour chaque ligne.

Le nombre d’éléments de ce tableau doit correspondre au nombre de lignes que vous prévoyez d’être dans la table :

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

Lorsque vous remplissez une table avec plusieurs contrôleurs de ligne, vous devez suivre le type attendu lorsque vous remplissez l’interface utilisateur :

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

Pagination verticale des détails

watchOS 3 a introduit une nouvelle fonctionnalité pour les tables : la possibilité de parcourir les pages de détails liées à chaque ligne, sans avoir à revenir à la table et à choisir une autre ligne. Les écrans de détail peuvent faire défiler l’écran en faisant glisser vers le haut et vers le bas ou en utilisant la couronne numérique.

Exemple de pagination des détails verticaux Détail de pagination verticale

Important

Cette fonctionnalité est actuellement disponible uniquement en modifiant le storyboard dans Xcode Interface Builder.

Pour activer cette fonctionnalité, sélectionnez l’aire WKInterfaceTable de conception et cochez l’option Pagination des détails verticaux :

Sélection de l’option Pagination des détails verticaux

Comme expliqué par Apple , la navigation de table doit utiliser segues pour que la fonctionnalité de pagination fonctionne. Réécrire tout code existant qui utilise PushController pour utiliser segues à la place.

Annexe : Exemple de code du contrôleur de ligne

L’IDE crée automatiquement deux fichiers de code lorsqu’un contrôleur de ligne est créé dans le concepteur. Le code de ces fichiers générés est indiqué ci-dessous pour référence.

La première sera nommée pour la classe, par exemple RowController.cs, comme suit :

using System;
using Foundation;

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

L’autre fichier .designer.cs est une définition de classe partielle qui contient les points de sortie et les actions créés sur l’aire du concepteur, comme cet exemple avec un WKInterfaceLabel contrôle :

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

Les points de sortie et les actions déclarés ici peuvent ensuite être référencés dans le code. Toutefois, le fichier .designer.cs ne doit pas être modifié directement.