Utilisation des tableaux dans le concepteur iOS

Les storyboards sont un moyen WYSIWYG de créer des applications iOS et sont pris en charge dans Visual Studio sur Mac et Windows. Pour plus d’informations sur les storyboards, reportez-vous au document Introduction to Storyboards . Les storyboards vous permettent également de modifier les dispositions des cellules dans le tableau, ce qui simplifie le développement avec des tables et des cellules

Lors de la configuration des propriétés d’une vue de tableau dans le Concepteur iOS, il existe deux types de contenu de cellule parmi lesquels vous pouvez choisir : Contenu de prototype dynamique ou statique .

Contenu de prototype dynamique

Un UITableView contenu prototype est généralement destiné à afficher une liste de données dans laquelle la cellule prototype (ou les cellules, comme vous pouvez définir plusieurs) sont réutilisées pour chaque élément de la liste. Les cellules n’ont pas besoin d’être instanciées, elles sont obtenues dans la GetView méthode en appelant la DequeueReusableCell méthode de son UITableViewSource.

Contenu statique

UITableViews avec du contenu statique permet aux tables d’être conçues directement sur l’aire de conception. Les cellules peuvent être déplacées dans la table et personnalisées en modifiant les propriétés et en ajoutant des contrôles.

Création d’une application basée sur storyboard

L’exemple StoryboardTable contient une application simple de détail maître qui utilise les deux types d’UITableView dans un Storyboard. Le reste de cette section décrit comment créer un petit exemple de liste de tâches qui ressemblera à ceci une fois terminé :

L’interface utilisateur est générée avec un storyboard, et les deux écrans utilisent un UITableView. L’écran principal utilise le contenu prototype pour mettre en page la ligne, et l’écran de détail utilise du contenu statique pour créer un formulaire d’entrée de données à l’aide de dispositions de cellules personnalisées.

Procédure pas à pas

Créer une solution dans Visual Studio à l’aide de (Créer) Nouveau projet... > Application à affichage unique (C#) et appelez-la StoryboardTables.

La solution s’ouvre avec certains fichiers C# et un Main.storyboard fichier déjà créé. Double-cliquez sur le Main.storyboard fichier pour l’ouvrir dans le Concepteur iOS.

Modification du storyboard

Le storyboard sera modifié en trois étapes :

• Tout d’abord, mettez en page les contrôleurs d’affichage requis et définissez leurs propriétés.
• Ensuite, créez votre interface utilisateur en faisant glisser-déplacer des objets vers votre vue
• Enfin, ajoutez la classe UIKit requise à chaque vue et donnez un nom à différents contrôles afin qu’ils puissent être référencés dans le code.

Une fois le storyboard terminé, le code peut être ajouté pour que tout fonctionne.

Disposition des contrôleurs d’affichage

La première modification apportée au storyboard consiste à supprimer l’affichage Détail existant et à le remplacer par un UITableViewController. Effectuez les étapes suivantes :

1. Sélectionnez la barre en bas du contrôleur de vue et supprimez-la.

2. Faites glisser un contrôleur de navigation et un contrôleur d’affichage de tableau sur le storyboard à partir de la boîte à outils.

3. Créez un segue à partir du contrôleur de vue racine vers le deuxième contrôleur de vue table qui vient d’être ajouté. Pour créer le segue, Ctrl+faire glisser de la cellule Detail vers l’uiTableViewController nouvellement ajouté. Choisissez l’option Afficher sous Sélection de segue.

4. Sélectionnez le nouveau segue que vous avez créé et donnez-lui un identificateur pour référencer ce segue dans le code. Cliquez sur le segue et entrez TaskSegue l’identificateur dans le panneau Propriétés, comme suit :
   

5. Ensuite, configurez les deux vues de table en les sélectionnant et en utilisant le panneau Propriétés. Veillez à sélectionner Affichage et non Contrôleur d’affichage . Vous pouvez utiliser le plan du document pour faciliter la sélection.

6. Modifiez le contrôleur de vue racine comme contenu : prototypes dynamiques (la vue sur l’aire de conception sera étiquetée Contenu prototype) :

   

7. Modifiez le nouveau UITableViewController comme contenu : cellules statiques.

8. Le nouveau UITableViewController doit avoir son nom de classe et son identificateur définis. Sélectionnez le contrôleur d’affichage et tapez TaskDetailViewController pour la classe dans le panneau Propriétés. Cela crée un TaskDetailViewController.cs fichier dans le panneau Solution. Entrez storyboardID en tant que détail, comme illustré dans l’exemple ci-dessous. Cette opération sera utilisée ultérieurement pour charger cette vue dans le code C# :

   

9. L’aire de conception du storyboard doit maintenant ressembler à ceci (le titre de l’élément de navigation du contrôleur de vue racine a été remplacé par « Chore Board » ) :

   

Créer l’interface utilisateur

Maintenant que les vues et segues sont configurées, les éléments d’interface utilisateur doivent être ajoutés.

Contrôleur d’affichage racine

Tout d’abord, sélectionnez la cellule prototype dans le contrôleur de vue maître et définissez l’identificateur comme cellule de tâche, comme illustré ci-dessous. Cette opération sera utilisée ultérieurement dans le code pour récupérer une instance de ce UITableViewCell :

Ensuite, vous devez créer un bouton qui ajoutera de nouvelles tâches, comme illustré ci-dessous :

Effectuez les actions suivantes :

• Faites glisser un élément de bouton barre de la boîte à outils vers le côté droit de la barre de navigation.
• Dans le panneau Propriétés, sous Élément du bouton Barre, sélectionnez Identificateur : Ajouter (pour en faire un + bouton plus).
• Attribuez-lui un nom afin qu’il puisse être identifié dans le code à une étape ultérieure. Notez que vous devez donner au contrôleur de vue racine un nom de classe (par exemple ItemViewController) pour vous permettre de définir le nom de l’élément du bouton Barre.

Contrôleur de vue TaskDetail

L’affichage détail nécessite beaucoup plus de travail. Les cellules d’affichage de tableau doivent être déplacées vers l’affichage, puis renseignées avec des étiquettes, des affichages de texte et des boutons. La capture d’écran ci-dessous montre l’interface utilisateur terminée avec deux sections. Une section comporte trois cellules, trois étiquettes, deux champs de texte et un commutateur, tandis que la deuxième section comporte une cellule avec deux boutons :

Les étapes de génération de la disposition complète sont les suivantes :

Sélectionnez l’affichage de la table et ouvrez le Panneau Propriétés. Mettez les propriétés suivantes à jour :

• Sections : 2
• Style : groupé
• Séparateur : Aucun
• Sélection : Aucune sélection

Sélectionnez la section supérieure et, sous Propriétés > , modifiez les lignes en 3, comme illustré ci-dessous :

Pour chaque cellule, ouvrez le panneau Propriétés et définissez :

• Style : Personnalisé
• Identificateur : choisissez un identificateur unique pour chaque cellule (par exemple, « title », « notes », « done »).
• Faites glisser les contrôles requis pour produire la disposition affichée dans la capture d’écran (placez UILabel, UITextField et UISwitch sur les cellules appropriées, puis définissez les étiquettes de manière appropriée, par exemple. Titre, Notes et Terminés).

Dans la deuxième section, définissez Lignes sur 1 et récupérez la poignée de redimensionnement inférieure de la cellule pour la rendre plus grande.

• Définissez l’identificateur : sur une valeur unique (par exemple, « save »).

• Définissez l’arrière-plan : Effacer la couleur .

• Faites glisser deux boutons sur la cellule et définissez leurs titres de manière appropriée (par exemple, Enregistrer et supprimer), comme illustré ci-dessous :

  

À ce stade, vous pouvez également définir des contraintes sur vos cellules et contrôles pour garantir une disposition adaptative.

Ajout de contrôles de nommage et de classe UIKit

Il existe quelques étapes finales dans la création de notre Storyboard. Tout d’abord, nous devons donner à chacun de nos contrôles un nom sous Nom d’identité > afin qu’ils puissent être utilisés dans le code ultérieurement. Nommez-les comme suit :

• Title UITextField : TitleText
• Notes UITextField : NotesText
• UISwitch : DoneSwitch
• Supprimer UIButton : DeleteButton
• Enregistrer UIButton : SaveButton

Ajout de code

Le reste du travail sera effectué dans Visual Studio sur Mac ou Windows avec C#. Notez que les noms de propriétés utilisés dans le code reflètent ceux définis dans la procédure pas à pas ci-dessus.

Tout d’abord, nous voulons créer une Chores classe, qui fournit un moyen d’obtenir et de définir la valeur d’ID, de nom, de notes et de booléen terminé, afin que nous puissions utiliser ces valeurs dans l’application.

Dans votre Chores classe, ajoutez le code suivant :

public class Chores {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Notes { get; set; }
    public bool Done { get; set; }
  }

Ensuite, créez une RootTableSource classe qui hérite de UITableViewSource.

La différence entre cela et une vue de tableau non Storyboard est que la GetView méthode n’a pas besoin d’instancier des cellules . theDequeueReusableCell la méthode retourne toujours une instance de la cellule prototype (avec l’identificateur correspondant).

Le code ci-dessous provient du RootTableSource.cs fichier :

public class RootTableSource : UITableViewSource
{
// there is NO database or storage of Tasks in this example, just an in-memory List<>
Chores[] tableItems;
string cellIdentifier = "taskcell"; // set in the Storyboard

    public RootTableSource(Chores[] items)
    {
        tableItems = items;
    }

public override nint RowsInSection(UITableView tableview, nint section)
{
  return tableItems.Length;
}

public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
  // in a Storyboard, Dequeue will ALWAYS return a cell, 
  var cell = tableView.DequeueReusableCell(cellIdentifier);
  // now set the properties as normal
  cell.TextLabel.Text = tableItems[indexPath.Row].Name;
  if (tableItems[indexPath.Row].Done)
    cell.Accessory = UITableViewCellAccessory.Checkmark;
  else
    cell.Accessory = UITableViewCellAccessory.None;
  return cell;
}
public Chores GetItem(int id)
{
  return tableItems[id];
}

Pour utiliser la RootTableSource classe, créez une collection dans le constructeur de ' ItemViewControllers :

chores = new List<Chore> {
      new Chore {Name="Groceries", Notes="Buy bread, cheese, apples", Done=false},
      new Chore {Name="Devices", Notes="Buy Nexus, Galaxy, Droid", Done=false}
    };

Transmettez ViewWillAppear la collection à la source et affectez-la à la vue de table :

public override void ViewWillAppear(bool animated)
{
    base.ViewWillAppear(animated);

    TableView.Source = new RootTableSource(chores.ToArray());
}

Si vous exécutez l’application maintenant, l’écran principal charge et affiche une liste de deux tâches. Lorsqu’une tâche est touchée par la segue définie par le storyboard, l’écran de détail s’affiche, mais il n’affiche pas de données à l’instant.

Pour « envoyer un paramètre » dans un segue, remplacez la méthode et définissez les PrepareForSegue propriétés sur le DestinationViewController (dans TaskDetailViewController cet exemple). La classe de contrôleur de vue de destination a été instanciée, mais n’est pas encore affichée pour l’utilisateur. Cela signifie que vous pouvez définir des propriétés sur la classe, mais pas modifier les contrôles d’interface utilisateur :

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
    {
      if (segue.Identifier == "TaskSegue") { // set in Storyboard
        var navctlr = segue.DestinationViewController as TaskDetailViewController;
        if (navctlr != null) {
          var source = TableView.Source as RootTableSource;
          var rowPath = TableView.IndexPathForSelectedRow;
          var item = source.GetItem(rowPath.Row);
          navctlr.SetTask (this, item); // to be defined on the TaskDetailViewController
        }
      }
    }

Dans TaskDetailViewController la SetTask méthode affecte ses paramètres aux propriétés afin qu’ils puissent être référencés dans ViewWillAppear. Les propriétés du contrôle ne peuvent pas être modifiées SetTask , car elles peuvent ne pas exister lorsqu’elles PrepareForSegue sont appelées :

Chore currentTask {get;set;}
    public ItemViewController Delegate {get;set;} // will be used to Save, Delete later

public override void ViewWillAppear (bool animated)
    {
      base.ViewWillAppear (animated);
      TitleText.Text = currentTask.Name;
      NotesText.Text = currentTask.Notes;
      DoneSwitch.On = currentTask.Done;
    }

    // this will be called before the view is displayed
    public void SetTask (ItemViewController d, Chore task) {
      Delegate = d;
      currentTask = task;
    }

Le segue ouvre désormais l’écran de détail et affiche les informations de tâche sélectionnées. Malheureusement, il n’existe aucune implémentation pour les boutons Enregistrer et Supprimer . Avant d’implémenter les boutons, ajoutez ces méthodes à ItemViewController.cs pour mettre à jour les données sous-jacentes et fermer l’écran de détails :

public void SaveTask(Chores chore)
{
  var oldTask = chores.Find(t => t.Id == chore.Id);
        NavigationController.PopViewController(true);
}

public void DeleteTask(Chores chore)
{
  var oldTask = chores.Find(t => t.Id == chore.Id);
  chores.Remove(oldTask);
        NavigationController.PopViewController(true);
}

Ensuite, vous devez ajouter le gestionnaire d’événements du TouchUpInside bouton à la ViewDidLoad méthode de TaskDetailViewController.cs. La Delegate référence de propriété à l’objet ItemViewController a été créée spécifiquement pour que nous puissions appeler SaveTask et DeleteTask, ce qui ferme cette vue dans le cadre de leur opération :

SaveButton.TouchUpInside += (sender, e) => {
        currentTask.Name = TitleText.Text;
        currentTask.Notes = NotesText.Text;
        currentTask.Done = DoneSwitch.On;
        Delegate.SaveTask(currentTask);
      };

DeleteButton.TouchUpInside += (sender, e) => Delegate.DeleteTask(currentTask);

La dernière fonctionnalité restante à générer est la création de nouvelles tâches. Dans ItemViewController.cs ajoutez une méthode qui crée de nouvelles tâches et ouvre l’affichage des détails. Pour instancier une vue à partir d’un storyboard, utilisez la InstantiateViewController méthode avec cette Identifier vue , dans cet exemple qui sera « détail » :

public void CreateTask () 
    {
      // first, add the task to the underlying data
      var newId = chores[chores.Count - 1].Id + 1;
      var newChore = new Chore{Id = newId};
      chores.Add (newChore);

      // then open the detail view to edit it
      var detail = Storyboard.InstantiateViewController("detail") as TaskDetailViewController;
      detail.SetTask (this, newChore);
      NavigationController.PushViewController (detail, true);
    }

Enfin, connectez le bouton dans la barre de navigation dans la méthode de ViewDidLoad ItemViewController.cs pour l’appeler :

AddButton.Clicked += (sender, e) => CreateTask ();

Cela termine l’exemple storyboard : l’application terminée ressemble à ceci :

L’exemple illustre :

• Création d’une table avec le contenu prototype où les cellules sont définies pour une réutilisation pour afficher des listes de données.
• Création d’une table avec contenu statique pour générer un formulaire d’entrée. Cela comprenait la modification du style de tableau et l’ajout de sections, de cellules et de contrôles d’interface utilisateur.
• Comment créer un segue et remplacer la PrepareForSegue méthode pour notifier la vue cible de tous les paramètres dont elle a besoin.
• Chargement des vues storyboard directement avec la Storyboard.InstantiateViewController méthode.

Liens associés

• Introduction aux storyboards