Trabajar con Navegación y Foco de tvOS en Xamarin

En este artículo, se describe el concepto de Foco y cómo se usa para presentar y controlar la navegación dentro de una aplicación Xamarin.tvOS.

En este artículo, se describe el concepto de Foco y cómo se usa para controlar la Navegación en la interfaz de usuario de una aplicación Xamarin.tvOS. Examinaremos cómo los controles integrados de navegación tvOS usan Foco, Resaltado y Selección para proporcionar la navegación de la interfaz de usuario de la aplicación Xamarin.tvOS.

A continuación, veremos cómo se puede usar Foco con Parallax e Imágenes superpuestas para proporcionar pistas visuales para el estado de navegación actual al usuario final.

Por último, veremos cómo trabajar con Foco, Actualizaciones de Foco, Guías de Foco, Foco en Colecciones y Habilitación de Parallax en vistas de imágenes en sus aplicaciones Xamarin.tvOS.

Navegación

Los usuarios de la aplicación Xamarin.tvOS no interactuarán directamente con la interfaz como con iOS, donde pulsan imágenes en la pantalla del dispositivo, sino que lo harán indirectamente desde el otro lado de la sala mediante el Siri Remote. Deberá tener esto en cuenta al diseñar la interfaz de usuario de la aplicación para que fluya de forma natural y mantenga al usuario sumido en la experiencia de Apple TV.

Una aplicación tvOS bien hecha implementa la navegación de una manera que respalda sin problemas el propósito de la aplicación y la estructura de los datos que presenta sin llamar la atención sobre la propia navegación. Diseñe su navegación de forma que resulte natural y familiar sin saturar la interfaz de usuario ni desviar la atención del contenido y la experiencia de usuario de la aplicación.

Al utilizar un Apple TV, el usuario suele navegar por un conjunto apilado de pantallas, cada una de las cuales presenta un determinado conjunto de contenidos. A su vez, cada nueva pantalla puede conducir a una o varias subpantallas de contenido mediante controles de interfaz de usuario estándar, como botones, barras de pestañas, tablas, vistas de colección o vistas divididas.

Con cada nueva pantalla de datos, el usuario navega más y más en esta pila de pantallas. Con el botón Menú en el Siri Remote, se puede navegar hacia atrás a través de la pila para volver a una pantalla anterior o al menú principal.

Apple sugiere tener en cuenta lo siguiente al diseñar la navegación para la aplicación tvOS:

• Diseñar una navegación que haga que buscar contenido sea rápido y fácil: los usuarios quieren acceder al contenido dentro de la aplicación en el menor número posible de pulsaciones, clics y deslices. Simplifique la navegación y organice el contenido al número mínimo de pantallas.
• Crear una interfaz fluida usando la función táctil: asegúrese de que un usuario puede moverse entre Elementos enfocables con una dificultad mínima con el menor número de gestos posibles.
• Diseñar con Foco en mente: dado que el usuario interactúa con el contenido en toda la sala, debe mover el Foco a un elemento de UI antes de interactuar con él mediante el Siri Remote. Los usuarios se frustrarán con la aplicación si requiere demasiados gestos para que logren sus objetivos.
• Proporcionar una navegación hacia atrás por medio del botón de menú: para crear una experiencia fácil y conocida, permita que los usuarios naveguen hacia atrás usando el botón Menú del Siri Remote. Al presionar el botón Menú, siempre se debe volver a la pantalla anterior o volver al menú principal de la aplicación. En el nivel superior de la aplicación, al presionar el botón Menú, se debería volver a la pantalla Inicio del Apple TV.
• Evitar mostrar un botón Atrás (por lo general): debido a que, al presionar el botón Menú en el Siri Remote, se puede desplazar hacia atrás a través de la pila de pantallas, evite mostrar un control adicional que duplique este comportamiento. Una excepción a esta regla es el caso de las pantallas de compra o pantallas con acciones destructivas (como eliminar contenido), donde también se debe mostrar un botón Cancelar.
• Mostrar colecciones grandes en una sola pantalla, en lugar de varias: el Siri Remote se diseñó para hacer que el movimiento a través de una gran colección de contenido sea rápido y fácil de usar. Si la aplicación funciona con una gran colección de Elementos enfocables, considere la posibilidad de mantenerlos en una sola pantalla en lugar de dividirlos en muchas pantallas que requieren más navegación por parte del usuario.
• Usar controles estándar para la navegación: de nuevo, para crear una experiencia de usuario fácil y conocida, siempre que sea posible, use controles UIKit integrados, como controles de página, barras de pestañas, controles segmentados, vistas de tabla, vistas de colección y vistas divididas para la navegación de la aplicación. Dado que el usuario ya está familiarizado con estos elementos, podrá navegar por la aplicación de forma intuitiva.
• Dar prioridad a la navegación de contenido horizontal: debido a la naturaleza de Apple TV, deslizar hacia la izquierda y derecha en el Siri Remote es más natural que hacia arriba y abajo. Tenga en cuenta esta opción al crear los diseños de contenido para la aplicación.

Foco y Selección

En Apple TV, se considera que una imagen, un botón u otro elemento de UI está enfocado cuando es el destino de la navegación actual.

A diferencia de los dispositivos iOS en los que el usuario interactúa directamente con elementos en la pantalla táctil del dispositivo, los usuarios interactúan con los elementos de tvOS desde cualquier punto en la sala mediante el Siri Remote. Para presentar y controlar esta interacción del usuario, Apple TV usa un modelo basado en Foco.

Con gestos y pulsaciones de botones en el Siri Remote, el usuario mueve el Foco de un elemento de UI a otro. Una vez que el foco se ha desplazado al elemento deseado, el usuario hace clic para seleccionar el contenido o activar la acción representada por ese elemento.

A medida que cambia el foco, se usan animaciones y efectos sutiles (como el efecto Parallax en imágenes) para identificar claramente el elemento de UI que actualmente tiene el foco.

Apple tiene las siguientes sugerencias al trabajar con Foco y Selección:

• Usar controles de UI integrados para los efectos de movimiento: mediante UIKit y la API Focus en la UI, el modelo de Foco aplicará automáticamente los efectos visuales y de movimiento predeterminados a los elementos de UI. Esto hace que la aplicación se sienta nativa y conocida para los usuarios de la plataforma Apple TV y permite un movimiento fluido e intuitivo entre Elementos enfocables.
• Mover el foco en direcciones esperadas: en Apple TV, casi todos los elementos usan manipulación indirecta. Por ejemplo, el usuario usa el Siri Remote para mover el foco y el sistema desplaza automáticamente la interfaz para mantener visible el elemento enfocado en ese momento. Si tu aplicación implementa este tipo de interacción, asegúrese de que el foco se mueve en la dirección del gesto del usuario. Así, si el usuario desliza el dedo hacia la derecha en el Siri Remote, el foco debería desplazarse hacia la derecha (lo que podría hacer que la pantalla se desplazara hacia la izquierda). La única excepción a esta regla son los elementos a pantalla completa que usan manipulación directa (donde deslizar hacia arriba mueve el elemento hacia arriba).
• Asegúrese de que sea evidente cuál es el elemento enfocado: dado que los usuarios interactúan con los elementos de UI desde lejos, es fundamental que el elemento enfocado actualmente destaque. Por lo general, esto se controlará automáticamente por medio de los elementos integrados UIKit. En el caso de los controles personalizados, use características como el tamaño o la sombra del elemento para mostrar el foco.
• Usar Parallax para hacer que los elementos enfocados reaccionen: gestos pequeños y circulares en el Siri Remote dan lugar a un movimiento suave y en tiempo real del elemento enfocado. Este efecto Parallax está integrado en las UIKitimágenes superpuestas para dar al usuario una sensación de conexión al elemento enfocado.
• Crear Elementos enfocables de un tamaño adecuado: los elementos grandes con un espaciado amplio alrededor son más fáciles de seleccionar y navegar que los elementos más pequeños.
• Diseñar elementos de UI que se vean bien con o sin el foco: por lo general, Apple TV representa el elemento enfocado aumentando su tamaño. Asegúrese de que los elementos de UI de las aplicaciones tengan un aspecto excelente en cualquier tamaño de presentación y, si es necesario, proporcione recursos para elementos de mayor tamaño.
• Representar los cambios de foco de manera fluida: use animaciones para pasar sutilmente de un estado Enfocado a Desenfocado y viceversa de los elementos y evitar que las transiciones sean bruscas.
• No mostrar un cursor: los usuarios esperan navegar por la UI de la aplicación usando e Foco y no moviendo un cursor alrededor de la pantalla. La UI siempre debe usar el modelo de Foco para presentar una experiencia de usuario coherente.

Trabajar con el Foco

Puede haber ocasiones en las que quiera crear un control personalizado que se pueda convertir en un Elemento enfocable. Si es así, invalide la propiedad CanBecomeFocused y devuelva true; de lo contrario, devuelve false. Por ejemplo:

public class myView : UIView
{
    public override bool CanBecomeFocused {
        get {return true;}
    }
}

En cualquier momento, puede usar la propiedad Focused de un control UIKit para ver si se trata del elemento actual. Si es true, el elemento de la UI tiene actualmente el foco; de lo contrario no lo tiene. Por ejemplo:

// Is my view in focus?
if (myView.Focused) {
    // Do something
    ...
}

Aunque no se puede mover directamente el foco a otro elemento de UI a través de código, puede especificar qué elemento de UI obtiene primero el foco cuando se carga una pantalla si establece su propiedad PreferredFocusedView en true. Por ejemplo:

// Make the play button the starting focus item
playButton.PreferredFocusedView = true;

Trabajar con Actualizaciones de Foco

Cuando el usuario hace que el foco cambie de un elemento de UI a otro (por ejemplo, en respuesta a un gesto en el Siri Remote), se enviará un evento de actualización de foco tanto al elemento que pierde el foco como al elemento que obtiene el foco.

Para los elementos personalizados que heredan de UIView o UIViewController, puede invalidar varios métodos para trabajar con el evento de actualización de foco:

• DidUpdateFocus: se llamará a este método cada vez que la vista obtenga o pierda el foco.
• ShouldUpdateFocus: use este método para definir dónde se permite mover el foco.

Para solicitar que el motor de Foco mueva el foco de regreso al elemento de UI PreferredFocusedView, llame al método SetNeedsUpdateFocus del controlador de vista.

Importante

Llamar a SetNeedsUpdateFocus solo surte efecto si el controlador de vista al que se está llamando contiene la vista que actualmente tiene el foco.

Trabajar con Guías de Foco

El motor de Foco integrado en tvOS es excelente para controlar los movimientos entre los elementos que se encuentran en una cuadrícula horizontal y vertical. Por lo general, no es necesario hacer más que agregar los elementos de UI al diseño de la interfaz y el motor de Foco controlará automáticamente el movimiento entre esos elementos sin intervención del desarrollador.

Sin embargo, puede haber ocasiones, debido a las necesidades del diseño de la UI, en que los elementos de UI no se encuentran en una cuadrícula horizontal y vertical y podrían ser inaccesibles porque son diagonales entre sí. Esto sucede porque el motor de Foco se ha diseñado para controlar movimientos simples hacia arriba, abajo, izquierda y derecha solo entre los elementos de UI.

Considere el siguiente diseño de UI como ejemplo:

Dado que el botón Más información no se encuentra en una cuadrícula horizontal ni vertical con el botón Comprar, sería inaccesible para el usuario. Sin embargo, esto se puede corregir fácilmente mediante una guía de Foco para proporcionar sugerencias de movimiento al motor de Foco.

Una guía de Foco (UIFocusGuide) expone un área no visible de la vista como Enfocable al motor de Foco, lo que permite redirigir el Foco a otra vista.

Por lo tanto, para resolver el ejemplo anterior, se podría agregar el código siguiente al controlador de vista para crear una guía de Foco entre los botones Más información y Comprar:

public UIFocusGuide FocusGuide = new UIFocusGuide ();
...

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Add Focus Guide to layout
    View.AddLayoutGuide (FocusGuide);

    // Define Focus Guide that will allow the user to move
    // between the More Info and Buy buttons.
    FocusGuide.LeftAnchor.ConstraintEqualTo (BuyButton.LeftAnchor).Active = true;
    FocusGuide.TopAnchor.ConstraintEqualTo (MoreInfoButton.TopAnchor).Active = true;
    FocusGuide.WidthAnchor.ConstraintEqualTo (BuyButton.WidthAnchor).Active = true;
    FocusGuide.HeightAnchor.ConstraintEqualTo (MoreInfoButton.HeightAnchor).Active = true;
}

En primer lugar, se crea ua nueva UIFocusGuide y se agrega a la colección Guía de diseño de Vista mediante el método AddLayoutGuide.

A continuación, los anclajes Superior, Izquierda, Ancho y Alto de la guía de Foco se ajustan con respecto a los botones Más información y Comprar para colocarlos entre ellos. Vea:

También es importante tener en cuenta que las nuevas restricciones se activan a medida que se crean al establecer su propiedad Active en true:

FocusGuide.LeftAnchor.ConstraintEqualTo (...).Active = true;

Con la nueva guía de Foco establecida y agregada a la Vista, el método DidUpdateFocus del controlador de vista se puede invalidar y se puede agregar el código siguiente para moverse entre los botones Más información y Comprar:

public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
    base.DidUpdateFocus (context, coordinator);

    // Get next focusable item from context
    var nextFocusableItem = context.NextFocusedView;

    // Anything to process?
    if (nextFocusableItem == null) return;

    // Decide the next focusable item based on the current
    // item with focus
    if (nextFocusableItem == MoreInfoButton) {
        // Move from the More Info to Buy button
        FocusGuide.PreferredFocusedView = BuyButton;
    } else if (nextFocusableItem == BuyButton) {
        // Move from the Buy to the More Info button
        FocusGuide.PreferredFocusedView = MoreInfoButton;
    } else {
        // No valid move
        FocusGuide.PreferredFocusedView = null;
    }
}

En primer lugar, este código obtiene NextFocusedView del objeto UIFocusUpdateContext, que se ha pasado en (context). Si esta vista es null, no es necesario procesar nada y se sale del método.

A continuación, se evalúa el nextFocusableItem. Si coincide con los botones Más información o Comprar, el Foco se envía al botón opuesto mediante la propiedad PreferredFocusedView de la guía de Foco. Por ejemplo:

// Move from the More Info to Buy button
FocusGuide.PreferredFocusedView = BuyButton;

En caso de que ninguno de los botones sea el origen del desplazamiento del Foco, la propiedad PreferredFocusedView se borra:

// No valid move
FocusGuide.PreferredFocusedView = null;

Trabajar con Foco en Colecciones

Al decidir si un elemento individual se puede enfocar en una UICollectionView o UITableView, reemplazará los métodos de UICollectionViewDelegate o UITableViewDelegate respectivamente. Por ejemplo:

public class CardHandDelegate : UICollectionViewDelegateFlowLayout
{
    ...
    public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
    {
        if (indexPath == null) {
            return false;
        } else {
            var controller = collectionView as CardHandViewController;
            return !controller.Hand [indexPath.Row].IsFaceDown;
        }
    }
}

El método CanFocusItem devuelve true si el elemento actual puede estar en el foco; de lo contrario, devuelve false.

Si desea que una UICollectionView o UITableView recuerde y restaure el foco en el último elemento cuando este pierde y recupera el foco, establezca la propiedad RemembersLastFocusedIndexPath en true.

Foco y Parallax

Como se ha indicado anteriormente, se considera que un elemento de interfaz de usuario está enfocado cuando es el elemento actual durante un evento de navegación. Por lo general, como un elemento recibe el foco, su tamaño aumenta ligeramente y se eleva visualmente y aparece una sombra.

Si el usuario realiza un gesto circular lento en el Siri Remote, el elemento enfocado se balanceará en tiempo real en respuesta a este movimiento. A medida que se balancea, se aplica un brillo luminoso a su imagen, haciendo que la superficie parezca brillar. Tras un tiempo de inactividad, el contenido desenfocado se atenúa y el elemento enfocado aumenta de tamaño.

Estos efectos funcionan conjuntamente para proporcionar una conexión mental entre el contenido de la pantalla del TV y el usuario que interactúa con el Apple TV desde el sofá.

En el Apple TV, este efecto Parallax se utiliza en todo el sistema para transmitir una sensación de profundidad 3D y dinámica a los elementos enfocados. tvOS usa una serie de imágenes superpuestas y transparentes que mueve y escala dinámicamente para crear este efecto.

Las imágenes superpuestas son necesarias para el icono de la aplicación tvOS y son compatibles con el contenido dinámico de la plataforma superior. Aunque no es necesario, Apple sugiere encarecidamente implementar imágenes superpuestas en cualquier otro elemento enfocable en la UI de la aplicación.

Habilitación de Parallax

El control UIImageView (o cualquier control que herede de UIImageView) admite automáticamente el efecto Parallax. De forma predeterminada, esta compatibilidad está deshabilitada. Para habilitarla, use el código siguiente:

myImageView.AdjustsImageWhenAncestorFocused = true;

Con esta propiedad establecida en true, la vista de imagen obtendrá automáticamente el efecto Parallax cuando el usuario la seleccione y esté en el foco.

Resumen

En este artículo, se ha tratado el concepto de Foco y cómo se usa para controlar la navegación en la interfaz de usuario de una aplicación Xamarin.tvOS. Se ha examinado cómo los controles integrados de navegación de tvOS usan Foco, Resaltado y Selección para proporcionar navegación. A continuación, ha visto cómo puede usar Foco con Parallax e Imágenes superpuestas para proporcionar pistas visuales para el estado de navegación actual al usuario final. Por último, ha examinado cómo trabajar con el Foco, Actualizaciones de Foco, Foco en Colecciones y la Habilitación de Parallax.

Vínculos relacionados

• tvOS
• Guías de la interfaz humana de tvOS
• Guía de programación de aplicaciones para tvOS