Utilisation des vues de table tvOS dans Xamarin
Cet article traite de la conception et de l’utilisation des vues de table et des contrôleurs de vue table à l’intérieur d’une application Xamarin.tvOS.
Dans tvOS, une vue table est présentée sous la forme d’une seule colonne de lignes de défilement pouvant éventuellement être organisée en groupes ou en sections. Les vues de table doivent être utilisées lorsque vous devez afficher efficacement une grande quantité de données à l’utilisateur, de manière claire et compréhensible.
Les vues de tableau sont généralement affichées dans un côté d’une vue fractionnée en tant que navigation, avec les détails de l’élément sélectionné affiché dans le côté opposé :
À propos des vues de table
Un UITableView affichage d’une seule colonne de lignes défilantes sous forme de liste hiérarchique d’informations pouvant éventuellement être organisée en groupes ou sections :
Apple propose les suggestions suivantes pour l’utilisation des tables :
- Tenez compte de la largeur : essayez de trouver l’équilibre correct dans vos largeurs de table. Si la table est trop large, il peut être difficile d’analyser à distance et de s’éloigner de la zone de contenu disponible. Si la table est trop étroite, les informations peuvent être tronquées ou encapsulées, ce qui peut être difficile pour l’utilisateur de lire dans l’espace.
- Afficher rapidement le contenu de la table : pour les grandes listes de données, chargez-chargez le contenu et commencez à afficher des informations dès que la table est présentée à l’utilisateur. Si la table prend beaucoup de temps à charger, l’utilisateur peut perdre de l’intérêt dans votre application ou penser qu’il est verrouillé.
- Informer l’utilisateur des chargements de contenu longs : si un temps de chargement de table long est inévitable, présentez une barre de progression ou un indicateur d’activité afin qu’il sache que l’application n’a pas verrouillé.
Types de cellules Table View
Un UITableViewCell est utilisé pour représenter les lignes de données individuelles dans la vue Table. Apple a défini plusieurs types de cellules table par défaut :
- Valeur par défaut : ce type présente une option Image sur le côté gauche de la cellule et le titre aligné à gauche à droite.
- Sous-titre : ce type présente un titre aligné à gauche sur la première ligne et un sous-titre plus petit aligné à gauche sur la ligne suivante.
- Valeur 1 : ce type présente un titre aligné à gauche avec un sous-titre plus clair et aligné à droite sur la même ligne.
- Valeur 2 : ce type présente un titre aligné à droite avec un sous-titre de couleur plus claire et aligné à gauche sur la même ligne.
Tous les types de cellules table view par défaut prennent également en charge des éléments graphiques tels que les indicateurs de divulgation ou les coches.
En outre, vous pouvez définir un type de cellule Table View personnalisé et présenter une cellule prototype, que vous créez dans le Concepteur d’interface ou via du code.
Apple propose les suggestions suivantes pour utiliser les cellules de la vue table :
- Évitez la capture de texte : conservez les lignes individuelles de texte courtes afin qu’elles ne finissent pas par tronquer . Les mots ou expressions tronqués sont difficiles pour que l’utilisateur analyse à partir de l’ensemble de la salle.
- Considérez l’état de ligne prioritaire : étant donné qu’une ligne devient plus grande, avec des angles plus arrondis lorsque le focus est activé, vous devez tester l’apparence de votre cellule dans tous les états. Les images ou le texte peuvent être coupés ou incorrects dans l’état Prioritaire.
- Utiliser des tables modifiables avec modération : le déplacement ou la suppression de lignes de table prend plus de temps sur tvOS que sur iOS. Vous devez décider soigneusement si cette fonctionnalité ajoutera ou distrairea votre application tvOS.
- Créez des types de cellules personnalisés le cas échéant : bien que les types de cellules d’affichage table intégrés soient parfaits pour de nombreuses situations, envisagez de créer des types de cellules personnalisés pour des informations non standard afin de fournir un meilleur contrôle et de mieux présenter les informations à l’utilisateur.
Utilisation des vues de table
Le moyen le plus simple d’utiliser les vues de table dans une application Xamarin.tvOS consiste à créer et modifier leur apparence dans le Concepteur d’interface.
Pour commencer, suivez les étapes ci-dessous :
Dans Visual Studio pour Mac, démarrez un nouveau projet d’application tvOS et sélectionnez l’application d’affichage unique de l’application>tvOS>, puis cliquez sur le bouton Suivant :
Entrez un nom pour l’application, puis cliquez sur Suivant :
Ajustez le nom du projet et le nom de la solution ou acceptez les valeurs par défaut, puis cliquez sur le bouton Créer pour créer la nouvelle solution :
Dans le Panneau Solution, double-cliquez sur le
Main.storyboardfichier pour l’ouvrir dans le Concepteur iOS :
Sélectionnez et supprimez le contrôleur d’affichage par défaut :
Sélectionnez un contrôleur de mode fractionné dans la boîte à outils et faites-le glisser sur l’aire de conception.
Par défaut, vous obtenez un affichage fractionné avec un contrôleur de vue de navigation et un contrôleur d’affichage de table dans le côté gauche et un contrôleur de vue à droite. Il s’agit de l’utilisation suggérée par Apple d’une vue table dans tvOS :
Vous devez sélectionner chaque partie de la vue table et l’affecter à un nom de classe personnalisé sous l’onglet Widget de l’Explorateur de propriétés afin de pouvoir y accéder ultérieurement dans le code C#. Par exemple, le contrôleur de vue table :
Vérifiez que vous créez une classe personnalisée pour le contrôleur d’affichage de table, l’affichage table et toutes les cellules prototypes. Visual Studio pour Mac ajouterez les classes personnalisées à l’arborescence de projets à mesure qu’elles sont créées :
Ensuite, sélectionnez l’affichage tableau dans l’aire de conception et ajustez-le en fonction des besoins. Par exemple, le nombre de cellules prototypes et le style (brut ou groupé) :
Pour chaque cellule prototype, sélectionnez-la et affectez un identificateur unique sous l’onglet Widget de l’Explorateur de propriétés. Cette étape est très importante , car vous aurez besoin de cet identificateur ultérieurement lorsque vous remplissez la table. Par exemple :
AttrCell
Vous pouvez également sélectionner de présenter la cellule en tant qu’un des types de cellules d’affichage de tableau par défaut via la liste déroulante Style ou la définir sur Personnalisé et utiliser l’aire de conception pour mettre en page la cellule en faisant glisser dans d’autres widgets d’interface utilisateur à partir de la boîte à outils :
Affectez un nom unique à chaque élément d’interface utilisateur de la conception de cellule prototype sous l’onglet Widget de l’Explorateur de propriétés afin de pouvoir y accéder ultérieurement dans le code C# :
Répétez l’étape ci-dessus pour toutes les cellules prototypes dans l’affichage Tableau.
Ensuite, affectez des classes personnalisées au reste de votre conception d’interface utilisateur, mettez en page la vue Détails et attribuez des noms uniques à chaque élément d’interface utilisateur dans la vue Détails afin de pouvoir également y accéder en C#. Par exemple :
Enregistrez vos modifications dans le Storyboard.
Conception d’un modèle de données
Pour faciliter l’utilisation des informations que l’affichage table affiche et facilite la présentation d’informations détaillées (lorsque l’utilisateur sélectionne ou met en surbrillance les lignes dans la vue Table), créez une classe ou des classes personnalisées pour agir comme modèle de données pour les informations présentées.
Prenons l’exemple d’une application de réservation de voyages qui contient une liste de villes, chacune contenant une liste unique d’attractions que l’utilisateur peut sélectionner. L’utilisateur sera en mesure de marquer une attraction comme favori, sélectionnez pour obtenir directions à une attraction et réserver un vol à une ville donnée.
Pour créer le modèle de données pour une attraction, cliquez avec le bouton droit sur le nom du projet dans le panneau Solution, puis sélectionnez Ajouter>un nouveau fichier.... Entrez AttractionInformation le nom, puis cliquez sur le bouton Nouveau :
Modifiez le AttractionInformation.cs fichier et faites-le ressembler à ce qui suit :
using System;
using Foundation;
namespace tvTable
{
public class AttractionInformation : NSObject
{
#region Computed Properties
public CityInformation City { get; set;}
public string Name { get; set;}
public string Description { get; set;}
public string ImageName { get; set;}
public bool IsFavorite { get; set;}
public bool AddDirections { get; set;}
#endregion
#region Constructors
public AttractionInformation (string name, string description, string imageName)
{
// Initialize
this.Name = name;
this.Description = description;
this.ImageName = imageName;
}
#endregion
}
}
Cette classe fournit les propriétés pour stocker les informations relatives à une attraction donnée.
Ensuite, cliquez avec le bouton droit sur le nom du projet dans le panneau Solution, puis sélectionnez Ajouter>un nouveau fichier.... Entrez CityInformation le nom, puis cliquez sur le bouton Nouveau :
Modifiez le CityInformation.cs fichier et faites-le ressembler à ce qui suit :
using System;
using System.Collections.Generic;
using Foundation;
namespace tvTable
{
public class CityInformation : NSObject
{
#region Computed Properties
public string Name { get; set; }
public List<AttractionInformation> Attractions { get; set;}
public bool FlightBooked { get; set;}
#endregion
#region Constructors
public CityInformation (string name)
{
// Initialize
this.Name = name;
this.Attractions = new List<AttractionInformation> ();
}
#endregion
#region Public Methods
public void AddAttraction (AttractionInformation attraction)
{
// Mark as belonging to this city
attraction.City = this;
// Add to collection
Attractions.Add (attraction);
}
public void AddAttraction (string name, string description, string imageName)
{
// Create attraction
var attraction = new AttractionInformation (name, description, imageName);
// Mark as belonging to this city
attraction.City = this;
// Add to collection
Attractions.Add (attraction);
}
#endregion
}
}
Cette classe contient toutes les informations sur une ville de destination, une collection d’attractions pour cette ville et fournit deux méthodes d’assistance (AddAttraction) pour faciliter l’ajout d’attractions à la ville.
Source de données d’affichage de table
Chaque vue table nécessite une source de données (UITableViewDataSource) pour fournir les données de la table et générer les lignes nécessaires selon les besoins de la vue Table.
Pour l’exemple ci-dessus, cliquez avec le bouton droit sur le nom du projet dans le Explorateur de solutions, sélectionnez Ajouter>un nouveau fichier... et appelez-leAttractionTableDatasource, puis cliquez sur le bouton Nouveau pour créer. Ensuite, modifiez le AttractionTableDatasource.cs fichier et faites-le ressembler à ce qui suit :
using System;
using System.Collections.Generic;
using UIKit;
namespace tvTable
{
public class AttractionTableDatasource : UITableViewDataSource
{
#region Constants
const string CellID = "AttrCell";
#endregion
#region Computed Properties
public AttractionTableViewController Controller { get; set;}
public List<CityInformation> Cities { get; set;}
#endregion
#region Constructors
public AttractionTableDatasource (AttractionTableViewController controller)
{
// Initialize
this.Controller = controller;
this.Cities = new List<CityInformation> ();
PopulateCities ();
}
#endregion
#region Public Methods
public void PopulateCities ()
{
// Clear existing
Cities.Clear ();
// Define cities and attractions
var Paris = new CityInformation ("Paris");
Paris.AddAttraction ("Eiffel Tower", "Is a wrought iron lattice tower on the Champ de Mars in Paris, France.", "EiffelTower");
Paris.AddAttraction ("Musée du Louvre", "is one of the world's largest museums and a historic monument in Paris, France.", "Louvre");
Paris.AddAttraction ("Moulin Rouge", "French for 'Red Mill', is a cabaret in Paris, France.", "MoulinRouge");
Paris.AddAttraction ("La Seine", "Is a 777-kilometre long river and an important commercial waterway within the Paris Basin.", "RiverSeine");
Cities.Add (Paris);
var SanFran = new CityInformation ("San Francisco");
SanFran.AddAttraction ("Alcatraz Island", "Is located in the San Francisco Bay, 1.25 miles (2.01 km) offshore from San Francisco.", "Alcatraz");
SanFran.AddAttraction ("Golden Gate Bridge", "Is a suspension bridge spanning the Golden Gate strait between San Francisco Bay and the Pacific Ocean", "GoldenGateBridge");
SanFran.AddAttraction ("San Francisco", "Is the cultural, commercial, and financial center of Northern California.", "SanFrancisco");
SanFran.AddAttraction ("Telegraph Hill", "Is primarily a residential area, much quieter than adjoining North Beach.", "TelegraphHill");
Cities.Add (SanFran);
var Houston = new CityInformation ("Houston");
Houston.AddAttraction ("City Hall", "It was constructed in 1938-1939, and is located in Downtown Houston.", "CityHall");
Houston.AddAttraction ("Houston", "Is the most populous city in Texas and the fourth most populous city in the US.", "Houston");
Houston.AddAttraction ("Texas Longhorn", "Is a breed of cattle known for its characteristic horns, which can extend to over 6 ft.", "LonghornCattle");
Houston.AddAttraction ("Saturn V Rocket", "was an American human-rated expendable rocket used by NASA between 1966 and 1973.", "Rocket");
Cities.Add (Houston);
}
#endregion
#region Override Methods
public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
// Get cell
var cell = tableView.DequeueReusableCell (CellID) as AttractionTableCell;
// Populate cell
cell.Attraction = Cities [indexPath.Section].Attractions [indexPath.Row];
// Return new cell
return cell;
}
public override nint NumberOfSections (UITableView tableView)
{
// Return number of cities
return Cities.Count;
}
public override nint RowsInSection (UITableView tableView, nint section)
{
// Return the number of attractions in the given city
return Cities [(int)section].Attractions.Count;
}
public override string TitleForHeader (UITableView tableView, nint section)
{
// Get the name of the current city
return Cities [(int)section].Name;
}
#endregion
}
}
Examinons en détail quelques sections de la classe.
Tout d’abord, nous avons défini une constante pour contenir l’identificateur unique de la cellule prototype (il s’agit du même identificateur attribué dans le Concepteur d’interface ci-dessus), ajouté un raccourci au contrôleur d’affichage de table et créé le stockage pour nos données :
const string CellID = "AttrCell";
public AttractionTableViewController Controller { get; set;}
public List<CityInformation> Cities { get; set;}
Ensuite, nous enregistrons le contrôleur de vue table, puis créons et remplissez notre source de données (à l’aide des modèles de données définis ci-dessus) lorsque la classe est créée :
public AttractionTableDatasource (AttractionTableViewController controller)
{
// Initialize
this.Controller = controller;
this.Cities = new List<CityInformation> ();
PopulateCities ();
}
Pour l’exemple, la PopulateCities méthode crée simplement des objets Data Model en mémoire, mais elles peuvent facilement être lues à partir d’une base de données ou d’un service web dans une application réelle :
public void PopulateCities ()
{
// Clear existing
Cities.Clear ();
// Define cities and attractions
var Paris = new CityInformation ("Paris");
Paris.AddAttraction ("Eiffel Tower", "Is a wrought iron lattice tower on the Champ de Mars in Paris, France.", "EiffelTower");
...
}
La NumberOfSections méthode retourne le nombre de sections dans la table :
public override nint NumberOfSections (UITableView tableView)
{
// Return number of cities
return Cities.Count;
}
Pour les vues de table de style brut , retournez toujours 1.
La RowsInSection méthode retourne le nombre de lignes dans la section active :
public override nint RowsInSection (UITableView tableView, nint section)
{
// Return the number of attractions in the given city
return Cities [(int)section].Attractions.Count;
}
Là encore, pour les vues table simples , retournez le nombre total d’éléments dans la source de données.
La TitleForHeader méthode retourne le titre de la section donnée :
public override string TitleForHeader (UITableView tableView, nint section)
{
// Get the name of the current city
return Cities [(int)section].Name;
}
Pour un type d’affichage table simple , laissez le titre vide ("").
Enfin, lorsqu’il est demandé par l’affichage table, créez et remplissez une cellule prototype à l’aide de la GetCell méthode :
public override UITableViewCell GetCell (UITableView tableView, Foundation.NSIndexPath indexPath)
{
// Get cell
var cell = tableView.DequeueReusableCell (CellID) as AttractionTableCell;
// Populate cell
cell.Attraction = Cities [indexPath.Section].Attractions [indexPath.Row];
// Return new cell
return cell;
}
Pour plus d’informations sur l’utilisation d’un UITableViewDatasourceobjet, consultez la documentation UITableViewDatasource d’Apple.
Délégué de l’affichage table
Chaque vue table nécessite un délégué (UITableViewDelegate) pour répondre à l’interaction de l’utilisateur ou à d’autres événements système sur la table.
Pour l’exemple ci-dessus, cliquez avec le bouton droit sur le nom du projet dans le Explorateur de solutions, sélectionnez Ajouter>un nouveau fichier... et appelez-leAttractionTableDelegate, puis cliquez sur le bouton Nouveau pour créer. Ensuite, modifiez le AttractionTableDelegate.cs fichier et faites-le ressembler à ce qui suit :
using System;
using System.Collections.Generic;
using UIKit;
namespace tvTable
{
public class AttractionTableDelegate : UITableViewDelegate
{
#region Computed Properties
public AttractionTableViewController Controller { get; set;}
#endregion
#region Constructors
public AttractionTableDelegate (AttractionTableViewController controller)
{
// Initializw
this.Controller = controller;
}
#endregion
#region Override Methods
public override void RowSelected (UITableView tableView, Foundation.NSIndexPath indexPath)
{
var attraction = Controller.Datasource.Cities [indexPath.Section].Attractions [indexPath.Row];
attraction.IsFavorite = (!attraction.IsFavorite);
// Update UI
Controller.TableView.ReloadData ();
}
public override bool CanFocusRow (UITableView tableView, Foundation.NSIndexPath indexPath)
{
// Inform caller of highlight change
RaiseAttractionHighlighted (Controller.Datasource.Cities [indexPath.Section].Attractions [indexPath.Row]);
return true;
}
#endregion
#region Events
public delegate void AttractionHighlightedDelegate (AttractionInformation attraction);
public event AttractionHighlightedDelegate AttractionHighlighted;
internal void RaiseAttractionHighlighted (AttractionInformation attraction)
{
// Inform caller
if (this.AttractionHighlighted != null) this.AttractionHighlighted (attraction);
}
#endregion
}
}
Examinons plusieurs sections de cette classe en détail.
Tout d’abord, nous créons un raccourci vers le contrôleur Table View lorsque la classe est créée :
public AttractionTableViewController Controller { get; set;}
...
public AttractionTableDelegate (AttractionTableViewController controller)
{
// Initialize
this.Controller = controller;
}
Ensuite, lorsqu’une ligne est sélectionnée (l’utilisateur clique sur l’aire tactile de l’Apple Remote) que nous voulons marquer l’attraction représentée par la ligne sélectionnée comme favori :
public override void RowSelected (UITableView tableView, Foundation.NSIndexPath indexPath)
{
var attraction = Controller.Datasource.Cities [indexPath.Section].Attractions [indexPath.Row];
attraction.IsFavorite = (!attraction.IsFavorite);
// Update UI
Controller.TableView.ReloadData ();
}
Ensuite, lorsque l’utilisateur met en surbrillance une ligne (en lui donnant focus à l’aide de l’Aire tactile distante Apple), nous voulons présenter les détails de l’attraction représentée par cette ligne dans la section Détails de notre contrôleur de vue fractionné :
public override bool CanFocusRow (UITableView tableView, Foundation.NSIndexPath indexPath)
{
// Inform caller of highlight change
RaiseAttractionHighlighted (Controller.Datasource.Cities [indexPath.Section].Attractions [indexPath.Row]);
return true;
}
...
public delegate void AttractionHighlightedDelegate (AttractionInformation attraction);
public event AttractionHighlightedDelegate AttractionHighlighted;
internal void RaiseAttractionHighlighted (AttractionInformation attraction)
{
// Inform caller
if (this.AttractionHighlighted != null) this.AttractionHighlighted (attraction);
}
La CanFocusRow méthode est appelée pour chaque ligne sur le point d’obtenir le focus dans la vue table. Retourne true si la ligne peut obtenir focus, sinon renvoyer false. Dans le cas de cet exemple, nous avons créé un événement personnalisé AttractionHighlighted qui sera déclenché sur chaque ligne à mesure qu’elle reçoit Focus.
Pour plus d’informations sur l’utilisation d’un UITableViewDelegateobjet, consultez la documentation UITableViewDelegate d’Apple.
Cellule Table View
Pour chaque cellule prototype que vous avez ajoutée à l’affichage tableau dans le Concepteur d’interface, vous avez également créé une instance personnalisée de la cellule Table View (UITableViewCell) pour vous permettre de remplir la nouvelle cellule (ligne) lors de sa création.
Pour l’exemple d’application, double-cliquez sur le AttractionTableCell.cs fichier pour l’ouvrir pour modification et faites-le ressembler à ce qui suit :
using System;
using Foundation;
using UIKit;
namespace tvTable
{
public partial class AttractionTableCell : UITableViewCell
{
#region Private Variables
private AttractionInformation _attraction = null;
#endregion
#region Computed Properties
public AttractionInformation Attraction {
get { return _attraction; }
set {
_attraction = value;
UpdateUI ();
}
}
#endregion
#region Constructors
public AttractionTableCell (IntPtr handle) : base (handle)
{
}
#endregion
#region Private Methods
private void UpdateUI ()
{
// Trap all errors
try {
Title.Text = Attraction.Name;
Favorite.Hidden = (!Attraction.IsFavorite);
} catch {
// Since the UI might not be fully loaded, ignore
// all errors at this point
}
}
#endregion
}
}
Cette classe fournit un stockage pour l’objet Attraction Data Model (AttractionInformation tel que défini ci-dessus) affiché dans la ligne donnée :
private AttractionInformation _attraction = null;
...
public AttractionInformation Attraction {
get { return _attraction; }
set {
_attraction = value;
UpdateUI ();
}
}
La UpdateUI méthode remplit les widgets d’interface utilisateur (qui ont été ajoutés au prototype de la cellule dans le Concepteur d’interface) selon les besoins :
private void UpdateUI ()
{
// Trap all errors
try {
Title.Text = Attraction.Name;
Favorite.Hidden = (!Attraction.IsFavorite);
} catch {
// Since the UI might not be fully loaded, ignore
// all errors at this point
}
}
Pour plus d’informations sur l’utilisation d’un UITableViewCellobjet, consultez la documentation UITableViewCell d’Apple.
Contrôleur d’affichage de table
Un contrôleur d’affichage de table (UITableViewController) gère une vue table qui a été ajoutée à un storyboard via le Concepteur d’interface.
Pour l’exemple d’application, double-cliquez sur le AttractionTableViewController.cs fichier pour l’ouvrir pour modification et faites-le ressembler à ce qui suit :
using System;
using Foundation;
using UIKit;
namespace tvTable
{
public partial class AttractionTableViewController : UITableViewController
{
#region Computed Properties
public AttractionTableDatasource Datasource {
get { return TableView.DataSource as AttractionTableDatasource; }
}
public AttractionTableDelegate TableDelegate {
get { return TableView.Delegate as AttractionTableDelegate; }
}
#endregion
#region Constructors
public AttractionTableViewController (IntPtr handle) : base (handle)
{
}
#endregion
#region Override Methods
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Setup table
TableView.DataSource = new AttractionTableDatasource (this);
TableView.Delegate = new AttractionTableDelegate (this);
TableView.ReloadData ();
}
#endregion
}
}
Examinons de plus près cette classe. Tout d’abord, nous avons créé des raccourcis pour faciliter l’accès à l’affichage DataSource table et TableDelegate. Nous allons utiliser celles-ci ultérieurement pour communiquer entre l’affichage table dans le côté gauche de l’affichage fractionné et l’affichage Détails à droite.
Enfin, lorsque l’affichage de table est chargé en mémoire, nous créons des instances de l’affichage AttractionTableDatasource table et AttractionTableDelegate (les deux créés ci-dessus) et les attachons à la vue table.
Pour plus d’informations sur l’utilisation d’un UITableViewControllerobjet, consultez la documentation UITableViewController d’Apple.
Tirer tout ensemble
Comme indiqué au début de ce document, les vues de tableau sont généralement affichées dans un côté d’un mode Fractionné comme navigation, avec les détails de l’élément sélectionné affichés sur le côté opposé. Par exemple :
Étant donné qu’il s’agit d’un modèle standard dans tvOS, examinons les dernières étapes pour rassembler tout et avoir les côtés gauche et droit de la vue Fractionnée interagissent entre eux.
Affichage des détails
Pour l’exemple de l’application de voyage présentée ci-dessus, une classe personnalisée (AttractionViewController) est définie pour le contrôleur de vue standard présenté à droite de l’affichage fractionné en tant qu’affichage détaillé :
using System;
using Foundation;
using UIKit;
namespace tvTable
{
public partial class AttractionViewController : UIViewController
{
#region Private Variables
private AttractionInformation _attraction = null;
#endregion
#region Computed Properties
public AttractionInformation Attraction {
get { return _attraction; }
set {
_attraction = value;
UpdateUI ();
}
}
public MasterSplitView SplitView { get; set;}
#endregion
#region Constructors
public AttractionViewController (IntPtr handle) : base (handle)
{
}
#endregion
#region Public Methods
public void UpdateUI ()
{
// Trap all errors
try {
City.Text = Attraction.City.Name;
Title.Text = Attraction.Name;
SubTitle.Text = Attraction.Description;
IsFlighBooked.Hidden = (!Attraction.City.FlightBooked);
IsFavorite.Hidden = (!Attraction.IsFavorite);
IsDirections.Hidden = (!Attraction.AddDirections);
BackgroundImage.Image = UIImage.FromBundle (Attraction.ImageName);
AttractionImage.Image = BackgroundImage.Image;
} catch {
// Since the UI might not be fully loaded, ignore
// all errors at this point
}
}
#endregion
#region Override Methods
public override void ViewWillAppear (bool animated)
{
base.ViewWillAppear (animated);
// Ensure the UI Updates
UpdateUI ();
}
#endregion
#region Actions
partial void BookFlight (NSObject sender)
{
// Ask user to book flight
AlertViewController.PresentOKCancelAlert ("Book Flight",
string.Format ("Would you like to book a flight to {0}?", Attraction.City.Name),
this,
(ok) => {
Attraction.City.FlightBooked = ok;
IsFlighBooked.Hidden = (!Attraction.City.FlightBooked);
});
}
partial void GetDirections (NSObject sender)
{
// Ask user to add directions
AlertViewController.PresentOKCancelAlert ("Add Directions",
string.Format ("Would you like to add directions to {0} to you itinerary?", Attraction.Name),
this,
(ok) => {
Attraction.AddDirections = ok;
IsDirections.Hidden = (!Attraction.AddDirections);
});
}
partial void MarkFavorite (NSObject sender)
{
// Flip favorite state
Attraction.IsFavorite = (!Attraction.IsFavorite);
IsFavorite.Hidden = (!Attraction.IsFavorite);
// Reload table
SplitView.Master.TableController.TableView.ReloadData ();
}
#endregion
}
}
Ici, nous avons fourni l’attraction (AttractionInformation) affichée en tant que propriété et créé une UpdateUI méthode qui remplit les widgets d’interface utilisateur ajoutés à la vue dans le Concepteur d’interface.
Nous avons également défini un raccourci vers le contrôleur de vue fractionné (SplitView) que nous utiliserons pour communiquer les modifications apportées à l’affichage tableau (AcctractionTableView).
Enfin, des actions personnalisées (événements) ont été ajoutées aux trois UIButton instances créées dans le Concepteur d’interface, ce qui permet à l’utilisateur de marquer une attraction comme favori, d’obtenir des instructions pour une attraction et de réserver un vol vers une ville donnée.
Contrôleur d’affichage de navigation
Étant donné que le contrôleur d’affichage table est imbriqué dans un contrôleur de vue de navigation situé à gauche de l’affichage fractionné, le contrôleur de vue de navigation a été affecté à une classe personnalisée (MasterNavigationController) dans le Concepteur d’interface et définie comme suit :
using System;
using Foundation;
using UIKit;
namespace tvTable
{
public partial class MasterNavigationController : UINavigationController
{
#region Computed Properties
public MasterSplitView SplitView { get; set;}
public AttractionTableViewController TableController {
get { return TopViewController as AttractionTableViewController; }
}
#endregion
#region Constructors
public MasterNavigationController (IntPtr handle) : base (handle)
{
}
#endregion
}
}
Là encore, cette classe définit simplement quelques raccourcis pour faciliter la communication entre les deux côtés du contrôleur de vue fractionné :
SplitView- Lien vers le contrôleur de vue fractionné (MainSpiltViewController) auquel appartient le contrôleur de vue de navigation.TableController- Obtient le contrôleur d’affichage de table (AttractionTableViewController) présenté en tant qu’affichage supérieur dans le contrôleur de vue de navigation.
Contrôleur d’affichage fractionné
Étant donné que le contrôleur de vue fractionné est la base de notre application, nous avons créé une classe personnalisée (MasterSplitViewController) pour celle-ci dans le Concepteur d’interface et l’avons définie comme suit :
using System;
using Foundation;
using UIKit;
namespace tvTable
{
public partial class MasterSplitView : UISplitViewController
{
#region Computed Properties
public AttractionViewController Details {
get { return ViewControllers [1] as AttractionViewController; }
}
public MasterNavigationController Master {
get { return ViewControllers [0] as MasterNavigationController; }
}
#endregion
#region Constructors
public MasterSplitView (IntPtr handle) : base (handle)
{
}
#endregion
#region Override Methods
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Initialize
Master.SplitView = this;
Details.SplitView = this;
// Wire-up events
Master.TableController.TableDelegate.AttractionHighlighted += (attraction) => {
// Display new attraction
Details.Attraction = attraction;
};
}
#endregion
}
}
Tout d’abord, nous créons des raccourcis vers le côté Détails de l’affichage fractionné (AttractionViewController) et du côté Maître (MasterNavigationController). Là encore, il est plus facile de communiquer entre les deux côtés plus tard.
Ensuite, lorsque l’affichage fractionné est chargé en mémoire, nous attachons le contrôleur de vue fractionné aux deux côtés de l’affichage fractionné et répondons à l’utilisateur mettant en évidence une attraction dans l’affichage table (AttractionHighlighted) en affichant la nouvelle attraction du côté Détails de l’affichage fractionné.
Vues de tableau en détail
Étant donné que tvOS est basé sur iOS, les vues de table et les contrôleurs de vue table sont conçus et se comportent de la même manière. Pour plus d’informations sur l’utilisation de la vue table dans une application Xamarin, consultez notre documentation iOS Working with Tables and Cells .
Résumé
Cet article a abordé la conception et l’utilisation des vues de table à l’intérieur d’une application Xamarin.tvOS. Et a présenté un exemple d’utilisation d’une vue table à l’intérieur d’une vue fractionnée, qui est l’utilisation classique d’un affichage table dans une application tvOS.