Trabajar con controles de página de tvOS en Xamarin

  • Artículo

A veces, es posible que tenga que mostrar una serie de páginas o imágenes en la aplicación Xamarin.tvOS. Un control de página se diseñó para mostrar claramente qué página está un usuario fuera del número máximo de páginas. Un control de página muestra una serie de puntos con un fondo en forma oscura y ovalada. La página actual mostrará un punto relleno, todas las demás páginas se mostrarán como puntos huecos. El control Page recortará los puntos más externos si hay demasiados para caber en su área de fondo.

Ejemplo de control de página

Un control de página en un elemento no interactivo diseñado para proporcionar comentarios solo al usuario. Deberá agregar otros controles para cambiar el número de página actual (por ejemplo, gestos o botones).

Apple tiene las siguientes sugerencias al usar un control de página:

  • Usar solo en colecciones completas: los controles de página funcionan mejor en un entorno de pantalla completa para mostrar varias páginas que existen en una sola colección.
  • Limitar el número de páginas: los controles de página funcionan mejor para diez (10) o menos páginas y un máximo de veinte (20) páginas. Para más de veinte páginas, considere la posibilidad de usar una Vista de colección y mostrar las páginas en una cuadrícula.

Controles de página y guiones gráficos

La manera más fácil de trabajar con controles de página en una aplicación de Xamarin.tvOS es agregarlos a la interfaz de usuario de la aplicación mediante iOS Designer.

  1. En el Panel de solución, haga doble clic en el archivo Main.storyboard y ábralo para editarlo.

  2. Arrastre un control de página desde el cuadro de herramientas y colóquelo en la vista:

    Un control de página

  3. En la pestaña Widget del Panel de propiedades, puede ajustar varias propiedades del control de página, como su página actual y el número de páginas:

    La pestaña Widget

  4. A continuación, agregue controles o gestos a la vista para retroceder y avanzar a través de la colección de páginas.

  5. Por último, asigne Nombres a los controles para que pueda responder a ellos en código de C#. Por ejemplo:

    Asigne al control el nombre

  6. Guarde los cambios.

Importante

Aunque es posible asignar eventos como TouchUpInside a un elemento de interfaz de usuario (como un UIButton) en el Diseñador de iOS, 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.

Edite el archivo Controlador de vistas (ejemplo ViewController.cs) y agregue el código para controlar las páginas que se van a cambiar. Por ejemplo:

using System;
using Foundation;
using UIKit;

namespace MySingleView
{
    public partial class ViewController : UIViewController
    {
        #region Computed Properties
        public nint PageNumber { get; set; } = 0;
        #endregion

        #region Constructors
        public ViewController (IntPtr handle) : base (handle)
        {
        }
        #endregion

        #region Override Methods
        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // Initialize
            PageView.Pages = 6;
            ShowCat ();
        }

        public override void DidReceiveMemoryWarning ()
        {
            base.DidReceiveMemoryWarning ();
            // Release any cached data, images, etc that aren't in use.
        }
        #endregion

        #region Custom Actions
        partial void NextCat (UIBarButtonItem sender) {

            // Display next Cat
            if (++PageNumber > 5) {
                PageNumber = 5;
            }
            ShowCat();

        }

        partial void PreviousCat (UIBarButtonItem sender) {
            // Display previous cat
            if (--PageNumber < 0) {
                PageNumber = 0;
            }
            ShowCat();
        }
        #endregion

        #region Private Methods
        private void ShowCat() {

            // Adjust UI
            PreviousButton.Enabled = (PageNumber > 0);
            NextButton.Enabled = (PageNumber < 5);
            PageView.CurrentPage = PageNumber;

            // Display new cat
            CatView.Image = UIImage.FromFile(string.Format("Cat{0:00}.jpg",PageNumber+1));
        }
        #endregion
    }
}

Echemos un vistazo más detenidamente a dos propiedades del control de página. En primer lugar, para especificar el número máximo de páginas, use lo siguiente:

PageView.Pages = 6;

Para cambiar el número de página actual, use el código siguiente:

PageView.CurrentPage = PageNumber;

La propiedad CurrentPage es cero (0), por lo que la primera página será cero y la última será una menos el número máximo de páginas.

Para obtener más información sobre cómo trabajar con Storyboards, consulte nuestra Guía de inicio rápido de Hello, tvOS.

Resumen

En este artículo se ha tratado el diseño y el trabajo con el control de página dentro de una aplicación de Xamarin.tvOS.