Trabajar con controladores de barra de pestañas de tvOS en Xamarin
Para muchos tipos de aplicaciones de tvOS, la navegación principal se presenta como una barra de pestañas que se ejecuta en la parte superior de la pantalla. El usuario desliza el dedo hacia la izquierda y la derecha en la lista de posibles categorías y el área de contenido debajo de los cambios para reflejar la selección del usuario.
La barra de pestañas es translúcida de forma predeterminada y siempre aparece en la parte superior de la pantalla. Cuando está en el foco, una barra de pestañas cubre los 140 píxeles superiores de la pantalla, pero se deslizará rápidamente cuando el foco cambie al área de contenido siguiente.
Barras de pestañas en tvOS
El UITabViewController funciona de forma similar y sirve para un propósito similar en tvOS como lo hace en iOS, con las siguientes diferencias clave:
- A diferencia de la barra de pestañas en iOS que aparece en la parte inferior de la pantalla, las barras de pestañas de tvOS ocupan los 140 píxeles superiores de la pantalla y son translúcidas de forma predeterminada.
- Cuando el foco sale de la barra de pestañas al área de contenido siguiente, la barra de pestañas se deslizará rápidamente desde la parte superior de la pantalla y se ocultará. El usuario puede pulsar el botón Menú una vez o deslizar el dedo hacia arriba en el Control remoto de Siri para volver a mostrar la barra de pestañas.
- Al deslizar hacia abajo en el control remoto de Siri, el foco se moverá al área de contenido debajo de la barra de pestañas al primer Elemento enfocable en el contenido que se muestra. De nuevo, esto ocultará la barra de pestañas una vez que cambie el foco.
- Al hacer clic para seleccionar una categoría mostrada en la barra de pestañas, se cambiará al contenido de esa categoría y el foco se cambiará al primer elemento que se puede centrar en esa vista.
- El número de categorías que se muestran en la barra de pestañas debe corregirse y todas las categorías deben ser accesibles en todo momento, una categoría determinada nunca debe deshabilitarse.
- Las barras de pestañas no admiten la personalización en tvOS. Además, no muestran la categoría Más (como hace iOS) si hay más categorías de las que pueden caber en la barra de pestañas.
Apple tiene las siguientes sugerencias para trabajar con barras depestañas:
- Usar barras de pestañas para organizar lógicamente el contenido: use la barra de pestañas para organizar lógicamente el contenido con el que funciona la aplicación tvOS. Por ejemplo, Destacados, Charts principales, Comprados y Búsqueda.
- Agregar notificaciones para informar a los usuarios del nuevo contenido: opcionalmente, puede mostrar una notificación (un óvalo rojo con un número blanco o un signo de exclamación) para informar al usuario de nuevo contenido en una categoría.
- Usar notificaciones con moderación: no desordene la barra de pestañas con notificaciones y solo las muestre dónde proporcionan información crítica al usuario.
- Limitar el número de categorías: para reducir la complejidad y mantener la aplicación manejable, no sobrecargue la barra de pestañas con categorías y asegúrese de que todas las categorías estén visibles y no estén llenas. Los títulos sencillos y cortos funcionan mejor.
- No deshabilitar ninguna categoría : todas las pestañas (categorías) siempre deben estar visibles y habilitadas en todo momento. Si una pestaña determinada no tiene contenido, proporcione una explicación al usuario por qué. Por ejemplo, la pestaña Compras estará vacía si el usuario no ha realizado ninguna compra.
Elementos de la barra de pestañas
Cada categoría (pestaña) de la barra de pestañas se representa mediante un elemento de barra de pestañas (UITabBarItem). Apple tiene las siguientes sugerencias para trabajar con elementos de la barra de pestañas:
- Usar pestañas basadas en texto: mientras que el elemento de barra de pestañas puede representarse como un icono, Apple sugiere usar texto solo porque un título conciso es más fácil de interpretar que un icono.
- Usar sustantivos o verbos cortos y significativos: un elemento de barra de pestañas debe retransmitir claramente el contenido que contiene y funciona mejor cuando es un sustantivo simple (como Fotos, Películas o Música) o verbos simples (como Buscar o Reproducir).
Barras de pestañas y guiones gráficos
La manera más fácil de trabajar con barras de pestañas en una aplicación de Xamarin.tvOS es agregarlas a la interfaz de usuario de la aplicación mediante iOS Designer.
Inicie una nueva aplicación de Xamarin.tvOS y seleccione tvOS>App>App con pestañas:
Siga todas las indicaciones para crear una nueva solución de Xamarin.tvOS.
En el Panel de solución, haga doble clic en el archivo
Main.storyboardy ábralo para editarlo.Para cambiar el Icono o Título para una categoría determinada, seleccione el Elemento de barra de pestañas para el Controlador de vista en el Esquema del documento:
A continuación, establezca las propiedades necesarias en la Pestaña widget del Explorador de propiedades:
Para agregar una nueva categoría (pestaña), quite un controlador de vista en la superficie de diseño:
Haga clic en el control y arrástrelo desde el Controlador de vista de pestañas al nuevo Controlador de vista.
En el menú emergente, seleccione controladores de vista para agregar la nueva vista como una pestaña (categoría):
Diseñe el diseño de la interfaz de usuario para cada área de contenido de Caterogies como normal, agregando elementos de interfaz de usuario en iOS Designer.
Exponga los eventos necesarios para trabajar con los controles de interfaz de usuario en código de C#.
Asigne un nombre a los controles de interfaz de usuario que quiera exponer en código de C#.
Guarde los cambios.
Importante
Aunque es posible asignar eventos como TouchUpInside a un elemento de interfaz de usuario (como un UIButton) en iOS Designer, nunca se llamará porque Apple TV no tiene una pantalla táctil ni admite eventos táctiles. Siempre debe usar el evento Primary Action al crear controladores de eventos para elementos de la interfaz de usuario de tvOS.
Para obtener más información sobre cómo trabajar con Storyboards, consulte nuestra Guía de inicio rápido de Hello, tvOS.
Trabajar con barras de pestañas
Utilice la propiedad Items del UITabBar para tener acceso a la colección de UITabBarItems contiene como una matriz indizada cero (0). La propiedad SelectedItem devolverá la pestaña (Categoría) seleccionada actualmente como UITabBarItem.
Trabajar con elementos de barra de pestañas
Para mostrar una notificación en una pestaña determinada (un óvalo rojo con texto blanco), use el código siguiente:
// Display a badge
TabBar.Items [2].BadgeValue = "10";
Lo que generaría los siguientes resultados cuando se ejecuta:
Use la propiedad Title del UITabBarItem para cambiar el título y la propiedad Image para cambiar el icono.
Resumen
En este artículo se ha tratado el diseño y el trabajo con el controlador de barra de pestañas dentro de una aplicación de Xamarin.tvOS.