Utilisation des vues de collection tvOS dans Xamarin
Les vues de collection permettent d’afficher un groupe de contenu à l’aide de dispositions arbitraires. À l’aide de la prise en charge intégrée, ils permettent de créer facilement des dispositions linéaires ou similaires à la grille, tout en prenant en charge les dispositions personnalisées.
La vue Collection gère une collection d’éléments à l’aide d’un délégué et d’une source de données pour fournir une interaction utilisateur et le contenu de la collection. Étant donné que l’affichage collection est basé sur un sous-système de disposition indépendant de la vue elle-même, la fourniture d’une autre disposition peut facilement modifier la présentation des données de la vue collection à la volée.
À propos des vues de collection
Comme indiqué ci-dessus, un affichage collection (UICollectionView) gère une collection ordonnée d’éléments et présente ces éléments avec des dispositions personnalisables. Les vues de collection fonctionnent de la même manière que les vues de table (UITableView), sauf qu’elles peuvent utiliser des dispositions pour présenter des éléments en plus d’une seule colonne.
Lorsque vous utilisez une vue collection dans tvOS, votre application est chargée de fournir les données associées à la collection à l’aide d’une source de données (UICollectionViewDataSource). Les données de vue de collecte peuvent éventuellement être organisées et présentées dans différents groupes (sections).
Le mode Collection présente les éléments individuels à l’écran à l’aide d’une cellule (UICollectionViewCell) qui fournit la présentation d’une partie donnée d’informations de la collection (comme une image et son titre).
Si vous le souhaitez, les vues supplémentaires peuvent être ajoutées à la présentation de l’affichage collection pour agir en tant qu’en-tête et pied de page pour les sections et les cellules. La disposition de l’affichage collection est chargée de définir le positionnement de ces vues, ainsi que les cellules individuelles.
Le mode Collection peut répondre à l’interaction de l’utilisateur à l’aide d’un délégué (UICollectionViewDelegate). Ce délégué est également chargé de déterminer si une cellule donnée peut se concentrer, si une cellule a été mise en surbrillance ou si une cellule a été sélectionnée. Dans certains cas, le délégué détermine la taille des cellules individuelles.
Dispositions du mode Collection
Une fonctionnalité clé d’une vue de collection est sa séparation entre les données qu’il présente et sa disposition. Une disposition de vue collection (UICollectionViewLayout) est responsable de la fourniture de l’organisation et de l’emplacement des cellules (et de toutes les vues supplémentaires) dans la présentation à l’écran de l’affichage collection.
Les cellules individuelles sont créées par l’affichage collection à partir de sa source de données jointe, puis organisées et affichées par la disposition de la vue collection donnée.
La disposition du mode Collection est normalement fournie lors de la création de l’affichage collection. Toutefois, vous pouvez modifier la disposition du mode Collection à tout moment et la présentation à l’écran des données de la vue collection sera automatiquement mise à jour à l’aide de la nouvelle disposition fournie.
La disposition du mode Collection fournit plusieurs méthodes qui peuvent être utilisées pour animer la transition entre deux dispositions différentes (par défaut, aucune animation n’est effectuée). En outre, les dispositions du mode Collection peuvent fonctionner avec Les reconnaissances de mouvement pour animer davantage l’interaction utilisateur qui entraîne une modification de la disposition.
Création de cellules et de vues supplémentaires
La source de données d’une vue de collection est non seulement responsable de la fourniture des données qui sauvegardent l’élément de la collection, mais également des cellules utilisées pour afficher le contenu.
Étant donné que les vues de collection ont été conçues pour gérer de grandes collections d’éléments, les cellules individuelles peuvent être mise en file d’attente et réutilisées pour ne pas dépasser les limitations de mémoire. Il existe deux méthodes différentes pour la suppression des vues :
DequeueReusableCell- Crée ou retourne une cellule du type donné (comme spécifié dans le Storyboard de l’application).DequeueReusableSupplementaryView- Crée ou retourne une vue supplémentaire du type donné (comme spécifié dans le Storyboard de l’application).
Avant d’appeler l’une de ces méthodes, vous devez inscrire la classe, storyboard ou .xib fichier utilisé pour créer la vue de la cellule avec l’affichage collection. Par exemple :
public CityCollectionView (IntPtr handle) : base (handle)
{
// Initialize
RegisterClassForCell (typeof(CityCollectionViewCell), CityViewDatasource.CardCellId);
...
}
Où typeof(CityCollectionViewCell) fournit la classe qui prend en charge la vue et CityViewDatasource.CardCellId fournit l’ID utilisé lorsque la cellule (ou la vue) est mise en file d’attente.
Une fois la cellule mise en file d’attente, vous la configurez avec les données de l’élément qu’elle représente et revenez à la vue collection pour l’affichage.
À propos des contrôleurs d’affichage de collection
Un contrôleur de vue de collection (UICollectionViewController) est un contrôleur de vue spécialisé (UIViewController) qui fournit le comportement suivant :
- Il est responsable du chargement de l’affichage collection à partir de son storyboard ou
.xibde son fichier et de l’instanciation de la vue. S’il est créé dans le code, il crée automatiquement une vue de collection non configurée. - Une fois l’affichage collection chargé, le contrôleur tente de charger sa source de données et de déléguer à partir du storyboard ou
.xibdu fichier. Si aucun n’est disponible, il se définit comme la source des deux. - Garantit que les données sont chargées avant que l’affichage de collection soit renseigné sur le premier affichage, puis recharge et efface la sélection sur chaque affichage suivant.
En outre, le contrôleur de vue collection fournit des méthodes substituables qui peuvent être utilisées pour gérer le cycle de vie de la vue collection, comme AwakeFromNib et ViewWillDisplay.
Vues de collection et storyboards
Le moyen le plus simple d’utiliser une vue collection dans votre application Xamarin.tvOS consiste à en ajouter un à son Storyboard. Par exemple, nous allons créer un exemple d’application qui présente une image, un titre et un bouton de sélection. Si l’utilisateur clique sur le bouton Sélectionner, un affichage collection s’affiche pour permettre à l’utilisateur de choisir une nouvelle image. Lorsqu’une image est choisie, le mode Collection est fermé et la nouvelle image et le nouveau titre sont affichés.
Procédons comme suit :
Démarrez une nouvelle application tvOS à affichage unique dans Visual Studio pour Mac.
Dans le Explorateur de solutions, double-cliquez sur le
Main.storyboardfichier et ouvrez-le dans le Concepteur iOS.Ajoutez un affichage image, une étiquette et un bouton à l’affichage existant et configurez-les comme suit :
Attribuez un nom à l’affichage image et à l’étiquette dans l’onglet Widget de l’Explorateur de propriétés. Par exemple :
Ensuite, faites glisser un contrôleur d’affichage de collection sur le storyboard :
Faites glisser le contrôle du bouton vers le contrôleur d’affichage de collection et sélectionnez Push dans la fenêtre contextuelle :
Lorsque l’application est exécutée, l’affichage collection s’affiche chaque fois que l’utilisateur clique sur le bouton.
Sélectionnez l’affichage collection et entrez les valeurs suivantes dans l’onglet Disposition de l’Explorateur de propriétés :
Cela contrôle la taille des cellules individuelles et les bordures entre les cellules et le bord externe de la vue collection.
Sélectionnez le contrôleur d’affichage de collection et définissez sa classe
CityCollectionViewControllerdans l’onglet Widget :
Sélectionnez l’affichage collection et définissez sa classe
CityCollectionViewdans l’onglet Widget :
Sélectionnez la cellule Vue collection et définissez sa classe
CityCollectionViewCelldans l’onglet Widget :
Dans l’ongletWidget, vérifiez que la disposition est
Flowet que la direction du défilement estVerticalpour l’affichage collection :
Sélectionnez la cellule Vue collection et définissez son identité
CityCelldans l’onglet Widget :
Enregistrez vos modifications.
Si nous avions choisi Custom la disposition du mode Collection, nous aurions pu spécifier une disposition personnalisée. Apple fournit une version intégrée et UICollectionViewDelegateFlowLayout qui peut facilement présenter des données dans une disposition basée sur la grille (celles-ci UICollectionViewFlowLayout sont utilisées par le flow style de disposition).
Pour plus d’informations sur l’utilisation de Storyboards, consultez notre Guide de démarrage rapide Hello, tvOS.
Fourniture de données pour la vue collection
Maintenant que nous avons ajouté notre vue collection (et le contrôleur de vue de collection) à notre Storyboard, nous devons fournir les données de la collection.
Modèle de données
Tout d’abord, nous allons créer un modèle pour nos données qui contiennent le nom de fichier de l’image à afficher, le titre et un indicateur pour permettre à la ville d’être sélectionnée.
Créez une CityInfo classe et faites-la ressembler à ce qui suit :
using System;
namespace tvCollection
{
public class CityInfo
{
#region Computed Properties
public string ImageFilename { get; set; }
public string Title { get; set; }
public bool CanSelect{ get; set; }
#endregion
#region Constructors
public CityInfo (string filename, string title, bool canSelect)
{
// Initialize
this.ImageFilename = filename;
this.Title = title;
this.CanSelect = canSelect;
}
#endregion
}
}
Cellule Vue collection
Nous devons maintenant définir la façon dont les données seront présentées pour chaque cellule. Modifiez le CityCollectionViewCell.cs fichier (créé automatiquement à partir de votre fichier Storyboard) et faites-le ressembler à ce qui suit :
using System;
using Foundation;
using UIKit;
using CoreGraphics;
namespace tvCollection
{
public partial class CityCollectionViewCell : UICollectionViewCell
{
#region Private Variables
private CityInfo _city;
#endregion
#region Computed Properties
public UIImageView CityView { get ; set; }
public UILabel CityTitle { get; set; }
public CityInfo City {
get { return _city; }
set {
_city = value;
CityView.Image = UIImage.FromFile (City.ImageFilename);
CityView.Alpha = (City.CanSelect) ? 1.0f : 0.5f;
CityTitle.Text = City.Title;
}
}
#endregion
#region Constructors
public CityCollectionViewCell (IntPtr handle) : base (handle)
{
// Initialize
CityView = new UIImageView(new CGRect(22, 19, 320, 171));
CityView.AdjustsImageWhenAncestorFocused = true;
AddSubview (CityView);
CityTitle = new UILabel (new CGRect (22, 209, 320, 21)) {
TextAlignment = UITextAlignment.Center,
TextColor = UIColor.White,
Alpha = 0.0f
};
AddSubview (CityTitle);
}
#endregion
}
}
Pour notre application tvOS, nous affichons une image et un titre facultatif. Si la ville donnée ne peut pas être sélectionnée, nous grisons la vue d’image à l’aide du code suivant :
CityView.Alpha = (City.CanSelect) ? 1.0f : 0.5f;
Lorsque la cellule contenant l’image est mise au focus par l’utilisateur, nous voulons utiliser l’effet Parallax intégré sur celui-ci pour définir la propriété suivante :
CityView.AdjustsImageWhenAncestorFocused = true;
Pour plus d’informations sur la navigation et le focus, consultez notre documentation sur l’utilisation de la navigation et du focus et des contrôleurs Bluetooth et Siri.
Vue collection Fournisseur de données
Avec notre modèle de données créé et notre disposition de cellule définie, nous allons créer une source de données pour notre vue de collection. La source de données sera chargée non seulement de fournir les données de stockage, mais également de mettre en file d’attente les cellules pour afficher les cellules individuelles à l’écran.
Créez une CityViewDatasource classe et faites-la ressembler à ce qui suit :
using System;
using System.Collections.Generic;
using UIKit;
using Foundation;
using CoreGraphics;
using ObjCRuntime;
namespace tvCollection
{
public class CityViewDatasource : UICollectionViewDataSource
{
#region Application Access
public static AppDelegate App {
get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
}
#endregion
#region Static Constants
public static NSString CardCellId = new NSString ("CityCell");
#endregion
#region Computed Properties
public List<CityInfo> Cities { get; set; } = new List<CityInfo>();
public CityCollectionView ViewController { get; set; }
#endregion
#region Constructors
public CityViewDatasource (CityCollectionView controller)
{
// Initialize
this.ViewController = controller;
PopulateCities ();
}
#endregion
#region Public Methods
public void PopulateCities() {
// Clear existing cities
Cities.Clear();
// Add new cities
Cities.Add(new CityInfo("City01.jpg", "Houses by Water", false));
Cities.Add(new CityInfo("City02.jpg", "Turning Circle", true));
Cities.Add(new CityInfo("City03.jpg", "Skyline at Night", true));
Cities.Add(new CityInfo("City04.jpg", "Golden Gate Bridge", true));
Cities.Add(new CityInfo("City05.jpg", "Roads by Night", true));
Cities.Add(new CityInfo("City06.jpg", "Church Domes", true));
Cities.Add(new CityInfo("City07.jpg", "Mountain Lights", true));
Cities.Add(new CityInfo("City08.jpg", "City Scene", false));
Cities.Add(new CityInfo("City09.jpg", "House in Winter", true));
Cities.Add(new CityInfo("City10.jpg", "By the Lake", true));
Cities.Add(new CityInfo("City11.jpg", "At the Dome", true));
Cities.Add(new CityInfo("City12.jpg", "Cityscape", true));
Cities.Add(new CityInfo("City13.jpg", "Model City", true));
Cities.Add(new CityInfo("City14.jpg", "Taxi, Taxi!", true));
Cities.Add(new CityInfo("City15.jpg", "On the Sidewalk", true));
Cities.Add(new CityInfo("City16.jpg", "Midnight Walk", true));
Cities.Add(new CityInfo("City17.jpg", "Lunchtime Cafe", true));
Cities.Add(new CityInfo("City18.jpg", "Coffee Shop", true));
Cities.Add(new CityInfo("City19.jpg", "Rustic Tavern", true));
}
#endregion
#region Override Methods
public override nint NumberOfSections (UICollectionView collectionView)
{
return 1;
}
public override nint GetItemsCount (UICollectionView collectionView, nint section)
{
return Cities.Count;
}
public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)
{
var cityCell = (CityCollectionViewCell)collectionView.DequeueReusableCell (CardCellId, indexPath);
var city = Cities [indexPath.Row];
// Initialize city
cityCell.City = city;
return cityCell;
}
#endregion
}
}
Examinons cette classe en détail. Tout d’abord, nous hériterons et UICollectionViewDataSource fournissons un raccourci vers l’ID de cellule (que nous avons affecté dans le Concepteur iOS) :
public static NSString CardCellId = new NSString ("CityCell");
Nous fournissons ensuite le stockage de nos données de collecte et fournissons une classe pour remplir les données :
public List<CityInfo> Cities { get; set; } = new List<CityInfo>();
...
public void PopulateCities() {
// Clear existing cities
Cities.Clear();
// Add new cities
Cities.Add(new CityInfo("City01.jpg", "Houses by Water", false));
Cities.Add(new CityInfo("City02.jpg", "Turning Circle", true));
...
}
Ensuite, nous substituons la NumberOfSections méthode et renvoyons le nombre de sections (groupes d’éléments) dont dispose l’affichage collection. Dans ce cas, il n’existe qu’un seul :
public override nint NumberOfSections (UICollectionView collectionView)
{
return 1;
}
Ensuite, nous renvoyons le nombre d’éléments de notre collection à l’aide du code suivant :
public override nint GetItemsCount (UICollectionView collectionView, nint section)
{
return Cities.Count;
}
Enfin, nous déconseilons une cellule réutilisable lorsque la demande De vue collection avec le code suivant :
public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)
{
var cityCell = (CityCollectionViewCell)collectionView.DequeueReusableCell (CardCellId, indexPath);
var city = Cities [indexPath.Row];
// Initialize city
cityCell.City = city;
return cityCell;
}
Une fois que nous avons obtenu une cellule d’affichage de collection de notre CityCollectionViewCell type, nous l’avons renseignée avec l’élément donné.
Réponse aux événements utilisateur
Étant donné que nous voulons que l’utilisateur puisse sélectionner un élément dans notre collection, nous devons fournir un délégué de vue collection pour gérer cette interaction. Et nous devons fournir un moyen de permettre à notre affichage appelant de savoir quel élément l’utilisateur a sélectionné.
Délégué d’application
Nous avons besoin d’un moyen de lier l’élément actuellement sélectionné à partir de l’affichage collection à l’affichage appelant. Nous allons utiliser une propriété personnalisée sur notre AppDelegate. Modifiez le AppDelegate.cs fichier et ajoutez le code suivant :
public CityInfo SelectedCity { get; set;} = new CityInfo("City02.jpg", "Turning Circle", true);
Cela définit la propriété et définit la ville par défaut qui sera initialement affichée. Plus tard, nous utiliserons cette propriété pour afficher la sélection de l’utilisateur et autoriser la modification de la sélection.
Délégué de l’affichage collection
Ensuite, ajoutez une nouvelle CityViewDelegate classe au projet et faites-la ressembler à ce qui suit :
using System;
using System.Collections.Generic;
using UIKit;
using Foundation;
using CoreGraphics;
namespace tvCollection
{
public class CityViewDelegate : UICollectionViewDelegateFlowLayout
{
#region Application Access
public static AppDelegate App {
get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
}
#endregion
#region Constructors
public CityViewDelegate ()
{
}
#endregion
#region Override Methods
public override CGSize GetSizeForItem (UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)
{
return new CGSize (361, 256);
}
public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
{
if (indexPath == null) {
return false;
} else {
var controller = collectionView as CityCollectionView;
return controller.Source.Cities[indexPath.Row].CanSelect;
}
}
public override void ItemSelected (UICollectionView collectionView, NSIndexPath indexPath)
{
var controller = collectionView as CityCollectionView;
App.SelectedCity = controller.Source.Cities [indexPath.Row];
// Close Collection
controller.ParentController.DismissViewController(true,null);
}
#endregion
}
}
Examinons de plus près cette classe. Tout d’abord, nous hériterons de UICollectionViewDelegateFlowLayout. La raison pour laquelle nous héritez de cette classe et non que UICollectionViewDelegate nous utilisons le composant UICollectionViewFlowLayout intégré pour présenter nos éléments et non un type de disposition personnalisé.
Ensuite, nous renvoyons la taille des éléments individuels à l’aide de ce code :
public override CGSize GetSizeForItem (UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)
{
return new CGSize (361, 256);
}
Ensuite, nous décidons si une cellule donnée peut se concentrer à l’aide du code suivant :
public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
{
if (indexPath == null) {
return false;
} else {
var controller = collectionView as CityCollectionView;
return controller.Source.Cities[indexPath.Row].CanSelect;
}
}
Nous case activée de voir si un élément donné de données de stockage a son CanSelect indicateur défini true sur et retourne cette valeur. Pour plus d’informations sur la navigation et le focus, consultez notre documentation sur l’utilisation de la navigation et du focus et des contrôleurs Bluetooth et Siri.
Enfin, nous répondons à l’utilisateur en sélectionnant un élément avec le code suivant :
public override void ItemSelected (UICollectionView collectionView, NSIndexPath indexPath)
{
var controller = collectionView as CityCollectionView;
App.SelectedCity = controller.Source.Cities [indexPath.Row];
// Close Collection
controller.ParentController.DismissViewController(true,null);
}
Ici, nous définissons la SelectedCity propriété de notre AppDelegate sur l’élément sélectionné par l’utilisateur et nous fermons le contrôleur de vue collection, en retournant à la vue qui nous a appelé. Nous n’avons pas encore défini la ParentController propriété de notre vue collection.
Configuration de l’affichage collection
Nous devons maintenant modifier notre vue de collecte et affecter notre source de données et notre délégué. Modifiez le CityCollectionView.cs fichier (créé automatiquement à partir de notre Storyboard) et faites-le ressembler à ce qui suit :
using System;
using Foundation;
using UIKit;
namespace tvCollection
{
public partial class CityCollectionView : UICollectionView
{
#region Application Access
public static AppDelegate App {
get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
}
#endregion
#region Computed Properties
public CityViewDatasource Source {
get { return DataSource as CityViewDatasource;}
}
public CityCollectionViewController ParentController { get; set;}
#endregion
#region Constructors
public CityCollectionView (IntPtr handle) : base (handle)
{
// Initialize
RegisterClassForCell (typeof(CityCollectionViewCell), CityViewDatasource.CardCellId);
DataSource = new CityViewDatasource (this);
Delegate = new CityViewDelegate ();
}
#endregion
#region Override Methods
public override nint NumberOfSections ()
{
return 1;
}
public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
var previousItem = context.PreviouslyFocusedView as CityCollectionViewCell;
if (previousItem != null) {
Animate (0.2, () => {
previousItem.CityTitle.Alpha = 0.0f;
});
}
var nextItem = context.NextFocusedView as CityCollectionViewCell;
if (nextItem != null) {
Animate (0.2, () => {
nextItem.CityTitle.Alpha = 1.0f;
});
}
}
#endregion
}
}
Tout d’abord, nous fournissons un raccourci pour accéder à notre AppDelegate:
public static AppDelegate App {
get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
}
Ensuite, nous fournissons un raccourci vers la source de données de la vue collection et une propriété pour accéder au contrôleur de vue collection (utilisé par notre délégué ci-dessus pour fermer la collection lorsque l’utilisateur effectue une sélection) :
public CityViewDatasource Source {
get { return DataSource as CityViewDatasource;}
}
public CityCollectionViewController ParentController { get; set;}
Ensuite, nous utilisons le code suivant pour initialiser la vue collection et affecter notre classe de cellules, la source de données et le délégué :
public CityCollectionView (IntPtr handle) : base (handle)
{
// Initialize
RegisterClassForCell (typeof(CityCollectionViewCell), CityViewDatasource.CardCellId);
DataSource = new CityViewDatasource (this);
Delegate = new CityViewDelegate ();
}
Enfin, nous voulons que le titre sous l’image soit visible uniquement lorsque l’utilisateur l’a mis en surbrillance (en focus). Nous procédons ainsi avec le code suivant :
public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
var previousItem = context.PreviouslyFocusedView as CityCollectionViewCell;
if (previousItem != null) {
Animate (0.2, () => {
previousItem.CityTitle.Alpha = 0.0f;
});
}
var nextItem = context.NextFocusedView as CityCollectionViewCell;
if (nextItem != null) {
Animate (0.2, () => {
nextItem.CityTitle.Alpha = 1.0f;
});
}
}
Nous définissons la transparence de l’élément précédent perdant le focus sur zéro (0) et la transparence de l’élément suivant gagne le focus sur 100 %. Ces transitions sont également animées.
Configuration du contrôleur d’affichage de collection
Maintenant, nous devons effectuer la configuration finale sur notre vue collection et autoriser le contrôleur à définir la propriété que nous avons définie afin que la vue de collection puisse être fermée une fois que l’utilisateur a effectué une sélection.
Modifiez le CityCollectionViewController.cs fichier (créé automatiquement à partir de notre Storyboard) et faites-le ressembler à ce qui suit :
// This file has been autogenerated from a class added in the UI designer.
using System;
using Foundation;
using UIKit;
namespace tvCollection
{
public partial class CityCollectionViewController : UICollectionViewController
{
#region Computed Properties
public CityCollectionView Collection {
get { return CollectionView as CityCollectionView; }
}
#endregion
#region Constructors
public CityCollectionViewController (IntPtr handle) : base (handle)
{
}
#endregion
#region Override Methods
public override void AwakeFromNib ()
{
base.AwakeFromNib ();
// Save link to controller
Collection.ParentController = this;
}
#endregion
}
}
En résumé
Maintenant que toutes les parties sont regroupées pour remplir et contrôler notre vue de collection, nous devons apporter les modifications finales à notre vue principale pour rassembler tous les éléments.
Modifiez le ViewController.cs fichier (créé automatiquement à partir de notre Storyboard) et faites-le ressembler à ce qui suit :
using System;
using Foundation;
using UIKit;
using tvCollection;
namespace MySingleView
{
public partial class ViewController : UIViewController
{
#region Application Access
public static AppDelegate App {
get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
}
#endregion
#region Constructors
public ViewController (IntPtr handle) : base (handle)
{
}
#endregion
#region Override Methods
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
// Perform any additional setup after loading the view, typically from a nib.
}
public override void ViewWillAppear (bool animated)
{
base.ViewWillAppear (animated);
// Update image with the currently selected one
CityView.Image = UIImage.FromFile(App.SelectedCity.ImageFilename);
BackgroundView.Image = CityView.Image;
CityTitle.Text = App.SelectedCity.Title;
}
public override void DidReceiveMemoryWarning ()
{
base.DidReceiveMemoryWarning ();
// Release any cached data, images, etc that aren't in use.
}
#endregion
}
}
Le code suivant affiche initialement l’élément sélectionné à partir de la propriété du AppDelegate fichier et le réaffiche lorsque l’utilisateur a effectué une sélection à partir de l’affichage SelectedCity collection :
public override void ViewWillAppear (bool animated)
{
base.ViewWillAppear (animated);
// Update image with the currently selected one
CityView.Image = UIImage.FromFile(App.SelectedCity.ImageFilename);
BackgroundView.Image = CityView.Image;
CityTitle.Text = App.SelectedCity.Title;
}
Test de l’application
Avec tout ce qui est en place, si vous générez et exécutez l’application, la vue principale s’affiche avec la ville par défaut :
Si l’utilisateur clique sur le bouton Sélectionner un affichage , l’affichage collection s’affiche :
Toute ville dont la CanSelect propriété est définie false sera grisée et l’utilisateur ne pourra pas lui affecter le focus. Lorsque l’utilisateur met en surbrillance un élément (faites-le en focus) le titre est affiché et il peut utiliser l’effet parallaxe pour incliner l’image en 3D.
Lorsque l’utilisateur clique sur une image sélectionnée, l’affichage collection est fermé et l’affichage principal est réaffiché avec la nouvelle image :
Création d’éléments de disposition et de réorganisation personnalisés
L’une des principales fonctionnalités de l’utilisation d’un affichage collection est la possibilité de créer des dispositions personnalisées. Étant donné que tvOS hérite d’iOS, le processus de création d’une disposition personnalisée est le même. Pour plus d’informations, consultez notre documentation Présentation des vues de collection.
Récemment ajouté aux vues de collection pour iOS 9, la possibilité d’autoriser facilement la réorganisation des éléments dans la collection. Là encore, étant donné que tvOS 9 est un sous-ensemble d’iOS 9, cela est fait de la même façon. Pour plus d’informations, consultez le document Modifications de l’affichage collection.
Résumé
Cet article a abordé la conception et l’utilisation des vues de collection à l’intérieur d’une application Xamarin.tvOS. Tout d’abord, il a abordé tous les éléments qui composent le mode Collection. Ensuite, il a montré comment concevoir et implémenter un affichage collection à l’aide d’un storyboard. Enfin, vous trouverez des liens vers des informations sur la création de dispositions personnalisées et la réorganisation d’éléments.