Trabajar con vistas de colección de tvOS en Xamarin
Las vistas de colección permiten mostrar un grupo de contenido mediante diseños arbitrarios. Con la compatibilidad integrada, permiten crear fácilmente diseños en cuadrícula o lineales, así como diseños personalizados.
La vista de colección mantiene una colección de elementos que usan un delegado y un origen de datos para proporcionar la interacción del usuario y el contenido de la colección. Dado que la vista de colección se basa en un subsistema de diseño que es independiente de la propia vista, proporcionar un diseño diferente puede cambiar fácilmente la presentación de los datos de la vista de colección sobre la marcha.
Acerca de las vistas de colección
Como se indicó anteriormente, una vista de colección (UICollectionView) administra una colección ordenada de elementos y presenta esos elementos con diseños personalizables. Las vistas de colección funcionan de forma similar a las vistas de tabla (UITableView), salvo que pueden usar diseños para presentar elementos en más de una sola columna.
Cuando se usa una vista de colección en tvOS, la aplicación es responsable de proporcionar los datos asociados a la colección mediante un origen de datos (UICollectionViewDataSource). Opcionalmente, los datos de la vista de colección se pueden organizar y presentar en grupos diferentes (secciones).
La vista de colección presenta los elementos individuales en pantalla mediante una celda (UICollectionViewCell) que proporciona la presentación de un fragmento de información determinado de la colección (como una imagen y su título).
Opcionalmente, se pueden agregar vistas complementarias a la presentación de la vista de colección para actuar como encabezado y pies de página para las secciones y celdas. El diseño de la vista de colección es responsable de definir la ubicación de estas vistas junto con las celdas individuales.
La vista de colección puede responder a la interacción del usuario mediante un delegado (UICollectionViewDelegate). Este delegado también es responsable de determinar si una celda específica puede obtener el foco, si se ha resaltado una celda o si se ha seleccionado una. En algunos casos, el delegado determina el tamaño de las celdas individuales.
Diseños de vista de colección
Una característica clave de una vista de colección es su separación entre los datos que presenta y su diseño. Un diseño de vista de colección (UICollectionViewLayout) es responsable de proporcionar la organización y la ubicación de las celdas (y cualquier vista complementaria) en la presentación en pantalla de la vista de colección.
Las celdas individuales se crean mediante la vista de colección a partir de su origen de datos adjunto y, a continuación, se organizan y muestran mediante el diseño de vista de colección determinado.
Normalmente, el diseño de la vista de colección se proporciona cuando se crea la vista de colección. Sin embargo, puede cambiar el diseño de la vista de colección en cualquier momento y la presentación en pantalla de los datos de la vista de colección se actualizará automáticamente mediante el nuevo diseño proporcionado.
El diseño de la vista de colección proporciona varios métodos que se pueden usar para animar la transición entre dos diseños diferentes (de forma predeterminada no se realiza ninguna animación). Además, los diseños de vista de colección pueden funcionar con los reconocedores de gestos para animar aún más la interacción del usuario que da lugar a un cambio en el diseño.
Crear celdas y vistas complementarias
El origen de datos de una vista de colección no solo es responsable de proporcionar los datos que respaldan el elemento de la colección, sino también las celdas que se usan para mostrar el contenido.
Dado que las vistas de colección se diseñaron para controlar grandes colecciones de elementos, las celdas individuales se pueden quitar de la cola y reutilizarse para no sobrepasar las limitaciones de memoria. Hay dos métodos diferentes para quitar vistas de la cola:
DequeueReusableCell- Crea o devuelve una celda del tipo especificado (como se especifica en el Storyboard de la aplicación).DequeueReusableSupplementaryView- Crea o devuelve una vista complementaria del tipo determinado (como se especifica en el Storyboard de la aplicación).
Antes de llamar a cualquiera de estos métodos, debe registrar la clase, Storyboard o archivo .xib usado para crear la vista de la celda con la vista de colección. Por ejemplo:
public CityCollectionView (IntPtr handle) : base (handle)
{
// Initialize
RegisterClassForCell (typeof(CityCollectionViewCell), CityViewDatasource.CardCellId);
...
}
Donde typeof(CityCollectionViewCell) proporciona la clase que admite la vista y CityViewDatasource.CardCellId proporciona el identificador usado cuando la celda (o vista) se quita de la cola.
Una vez que la celda se quita de la cola, se configura con los datos del elemento que representa y vuelve a la vista de colección para su visualización.
Acerca de los controladores de vista de colección
Un controlador de vista de colección (UICollectionViewController) es un controlador de vista especializado (UIViewController) que proporciona el siguiente comportamiento:
- Es responsable de cargar la vista de colección desde su Storyboard o archivo
.xiby crear instancias de la vista. Si se crea en código, crea automáticamente una nueva vista de colección sin configurar. - Una vez cargada la vista de colección, el controlador intenta cargar su origen de datos y delegado desde el Storyboard o el archivo
.xib. Si ninguno está disponible, se establece como el origen de ambos. - Garantiza que los datos se cargan antes de que la vista de colección se rellene en la primera presentación y vuelva a cargar y borrar la selección en cada presentación posterior.
Además, el controlador de vista de colección proporciona métodos reemplazables que se pueden usar para administrar el ciclo de vida de la vista de colección, como AwakeFromNib y ViewWillDisplay.
Vistas de colección y guiones gráficos
La manera más fácil de trabajar con una vista de colección en la aplicación Xamarin.tvOS es agregar una a su Storyboard. Como ejemplo rápido, vamos a crear una aplicación de prueba que presente una imagen, un título y un botón de selección. Si el usuario hace clic en el botón seleccionar, se mostrará una vista de colección que permita al usuario elegir una nueva imagen. Cuando se elige una imagen, se cierra la vista de colección y se mostrará la nueva imagen y el título.
Hagamos lo siguiente:
Inicie una nueva Aplicación tvOS de vista única en Visual Studio para Mac.
En el Explorador de soluciones, haga doble clic en el archivo
Main.storyboardy ábralo en el Diseñador de iOS.Agregue una vista de imagen, una etiqueta y un botón a la vista existente y configúrelos para que parezcan similares a los siguientes:
Asigne un Nombre a la vista de imagen y la etiqueta en la Pestaña de widget del Explorador de propiedades. Por ejemplo:
A continuación, arrastre un controlador de vista de colección al Storyboard:
Arrastre el control desde el botón hasta el controlador de vista de colección y seleccione Insertar en el menú emergente:
Cuando se ejecute la aplicación, esto hará que la vista de colección se muestre cada vez que el usuario haga clic en el botón.
Seleccione la vista de colección y escriba los valores siguientes en la pestaña Diseño del Explorador de propiedades:
Esto controla el tamaño de las celdas individuales y los bordes entre las celdas y el borde exterior de la vista colección.
Seleccione el controlador de vista de colección y establezca su clase en
CityCollectionViewControlleren la pestaña Widget:
Seleccione la vista de colección y establezca su clase en
CityCollectionViewen la pestaña Widget:
Seleccione la celda vista de colección y establezca su clase en
CityCollectionViewCellen la pestaña Widget:
En la pestaña Widget, asegúrese de que el Diseño sea
Flowy la Dirección del desplazamiento seaVerticalpara la vista de colección:
Seleccione la celda vista de colección y establezca su Identidad en
CityCellen la pestaña Widget:
Guarde los cambios.
Si hubiéramos elegido Custom para el Diseño de la vista de colección, podríamos haber especificado un diseño personalizado. Apple proporciona UICollectionViewFlowLayout y UICollectionViewDelegateFlowLayout integrados que pueden presentar fácilmente datos en un diseño basado en cuadrícula (estos se usan con el estilo de diseño flow).
Para obtener más información sobre cómo trabajar con guiones gráficos, consulte nuestra Guía de inicio rápido de Hello, tvOS.
Proporcionar datos para la vista de colección
Ahora que tenemos nuestra vista de colección (y controlador de vista de colección) agregada a nuestro Storyboard, es necesario proporcionar los datos de la colección.
El modelo de datos
En primer lugar, vamos a crear un modelo para nuestros datos que contengan el nombre de archivo de la imagen que se va a mostrar, el título y una marca para permitir que se seleccione la ciudad.
Cree una clase CityInfo y haga que tenga un aspecto similar al siguiente:
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
}
}
Celda de vista de colección
Ahora es necesario definir cómo se presentarán los datos para cada celda. Edite el archivo CityCollectionViewCell.cs (creado automáticamente a partir del archivo de Storyboard) y haga que tenga un aspecto similar al siguiente:
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
}
}
Para nuestra aplicación tvOS, mostraremos una imagen y un título opcional. Si no se puede seleccionar la ciudad dada, se atenuará la vista de imagen con el código siguiente:
CityView.Alpha = (City.CanSelect) ? 1.0f : 0.5f;
Cuando el usuario pone en foco la celda que contiene la imagen, queremos usar el efecto parallax integrado en ella estableciendo la siguiente propiedad:
CityView.AdjustsImageWhenAncestorFocused = true;
Para obtener más información sobre navegación y enfoque, consulta nuestra documentación sobre Trabajar con navegación y foco y Controladores de Siri Remote y Bluetooth.
Proveedor de datos de vista de colección
Con el modelo de datos creado y el diseño de celda definido, vamos a crear un origen de datos para nuestra vista de colección. El origen de datos será responsable de no solo proporcionar los datos de respaldo, sino también de poner en cola las celdas para mostrar las celdas individuales en pantalla.
Cree una clase CityViewDatasource y haga que tenga un aspecto similar al siguiente:
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
}
}
Echemos un vistazo a esta clase en detalle. En primer lugar, heredamos de UICollectionViewDataSource y proporcionamos un acceso directo al identificador de celdas (que asignamos en el Diseñador de iOS):
public static NSString CardCellId = new NSString ("CityCell");
A continuación, proporcionamos almacenamiento para nuestros datos de colección y una clase para rellenar los datos:
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));
...
}
A continuación, invalidamos el método NumberOfSections y devolvemos el número de secciones (grupos de elementos) que tiene nuestra vista de colección. En este caso, solo hay una:
public override nint NumberOfSections (UICollectionView collectionView)
{
return 1;
}
Después, se devuelve el número de elementos de nuestra colección mediante el código siguiente:
public override nint GetItemsCount (UICollectionView collectionView, nint section)
{
return Cities.Count;
}
Por último, quitamos de la cola una celda reutilizable cuando se solicita la vista de colección con el código siguiente:
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;
}
Después de obtener una celda de vista de colección de nuestro tipo de CityCollectionViewCell, la rellenamos con el elemento especificado.
Respuesta a eventos de usuario
Dado que queremos que el usuario pueda seleccionar un elemento de nuestra colección, es necesario proporcionar un delegado de vista de colección para controlar esta interacción. Y es necesario proporcionar una manera de permitir que nuestra vista de llamadas sepa qué elemento ha seleccionado el usuario.
Delegado de aplicación
Necesitamos una manera de relacionar el elemento seleccionado actualmente desde la vista de colección a la vista de llamada. Usaremos una propiedad personalizada en nuestro AppDelegate. Edite el archivo AppDelegate.cs y agregue el código siguiente:
public CityInfo SelectedCity { get; set;} = new CityInfo("City02.jpg", "Turning Circle", true);
Esto define la propiedad y establece la ciudad predeterminada que se mostrará inicialmente. Más adelante, consumiremos esta propiedad para mostrar la selección del usuario y permitir que se cambie.
Delegado de vista de colección
A continuación, agregue una nueva clase CityViewDelegate al proyecto y haga que tenga un aspecto similar al siguiente:
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
}
}
Echemos un vistazo más detallado a esta clase. En primer lugar, heredamos de UICollectionViewDelegateFlowLayout. La razón por la que heredamos de esta clase y no de la UICollectionViewDelegate es que estamos usando el UICollectionViewFlowLayout integrado para presentar nuestros elementos y no un tipo de diseño personalizado.
A continuación, se devuelve el tamaño de los elementos individuales mediante este código:
public override CGSize GetSizeForItem (UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)
{
return new CGSize (361, 256);
}
Después, decidimos si una celda determinada puede obtener el foco mediante el código siguiente:
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;
}
}
Comprobamos si un fragmento determinado de datos de respaldo tiene su marca de CanSelect establecida en true y devuelve ese valor. Para obtener más información sobre navegación y enfoque, consulta nuestra documentación sobre Trabajar con navegación y foco y Controladores de Siri Remote y Bluetooth.
Por último, respondemos al usuario que selecciona un elemento con el código siguiente:
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);
}
Aquí establecemos la propiedad SelectedCity de nuestro AppDelegate en el elemento seleccionado por el usuario y cerramos el Controlador de vista de colección, volviendo a la vista que nos llamó. Aún no hemos definido la propiedad ParentController de nuestra vista de colección, lo haremos a continuación.
Configuración de la vista de colección
Ahora necesitamos editar nuestra vista de colección y asignar nuestro origen de datos y delegado. Edite el archivo CityCollectionView.cs (creado automáticamente desde nuestro Storyboard) y haga que tenga un aspecto similar al siguiente:
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
}
}
En primer lugar, proporcionamos un acceso directo para acceder a nuestro AppDelegate:
public static AppDelegate App {
get { return (AppDelegate)UIApplication.SharedApplication.Delegate; }
}
A continuación, proporcionamos un acceso directo al origen de datos de la vista de colección y una propiedad para acceder al controlador de vista de colección (usado por nuestro delegado anterior para cerrar la colección cuando el usuario realiza una selección):
public CityViewDatasource Source {
get { return DataSource as CityViewDatasource;}
}
public CityCollectionViewController ParentController { get; set;}
Después, usamos el código siguiente para inicializar la vista de colección y asignar nuestra clase de celda, origen de datos y delegado:
public CityCollectionView (IntPtr handle) : base (handle)
{
// Initialize
RegisterClassForCell (typeof(CityCollectionViewCell), CityViewDatasource.CardCellId);
DataSource = new CityViewDatasource (this);
Delegate = new CityViewDelegate ();
}
Por último, queremos que el título de la imagen solo sea visible cuando el usuario lo haya resaltado (en el foco). Lo hacemos con el código siguiente:
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;
});
}
}
Establecemos la transparencia del elemento anterior perdiendo el foco en cero (0) y la transparencia del siguiente elemento obtiene el foco en el 100 %. Estas transiciones también se animan.
Configuración del controlador de vista de colección
Ahora es necesario realizar la configuración final en nuestra vista de colección y permitir que el controlador establezca la propiedad que definimos para que la vista de colección se pueda cerrar después de que el usuario realice una selección.
Edite el archivo CityCollectionViewController.cs (creado automáticamente a partir de nuestro Storyboard) y fíjelo como el siguiente:
// 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
}
}
Integración de todos los elementos
Ahora que tenemos todas las partes juntas para rellenar y controlar nuestra vista de colección, necesitamos realizar las modificaciones finales a nuestra vista principal para integrar todo.
Edite el archivo ViewController.cs (creado automáticamente a partir de nuestro Storyboard) y haga que tenga un aspecto similar al siguiente:
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
}
}
En el código siguiente se muestra inicialmente el elemento seleccionado de la propiedad SelectedCity del AppDelegate y se vuelve a reproducir cuando el usuario ha realizado una selección en la vista de colección:
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;
}
Probar la aplicación
Con todo en su lugar, si compila y ejecuta la aplicación, la vista principal se muestra con la ciudad predeterminada:
Si el usuario hace clic en el botón Seleccionar una vista, se mostrará la vista de colección:
Cualquier ciudad que tenga su propiedad CanSelect establecida en false se mostrará atenuada y el usuario no podrá establecer el foco en ella. Cuando el usuario resalta un elemento (convertirlo en el foco), se muestra el título y puede usar el efecto parallax para inclinar sutilmente la imagen en 3D.
Cuando el usuario hace clic en una imagen de selección, se cierra la vista de colección y la vista principal se vuelve a reproducir con la nueva imagen:
Crear diseño personalizado y reordenar elementos
Una de las características clave del uso de una vista de colección es la capacidad de crear diseños personalizados. Dado que tvOS hereda de iOS, el proceso para crear un diseño personalizado es el mismo. Consulte nuestra documentación de Introducción a vistas de colección para obtener más información.
Recientemente se ha añadido a las vistas de colecciones para iOS 9 la posibilidad de reordenar fácilmente los elementos de la colección. De nuevo, dado que tvOS 9 es un subconjunto de iOS 9, esto se hace de la misma manera. Consulte el documento Cambios en la vista de colección para obtener más detalles.
Resumen
En este artículo se ha tratado el diseño y el trabajo con vistas de colección dentro de una aplicación de Xamarin.tvOS. En primer lugar, se trataron todos los elementos que componen la vista de colección. A continuación, se mostró cómo diseñar e implementar una vista de colección mediante un Storyboard. Por último, se proporcionan vínculos a información sobre cómo crear diseños personalizados y reordenar elementos.