Compartir a través de

Trabajar con botones tvOS en Xamarin

  • Artículo

Advertencia

iOS Designer quedó en desuso en la versión 16.8 de Visual Studio 2019 y la 8.8 de Visual Studio 2019 para Mac, y se ha eliminado de la versión 16.9 de Visual Studio 2019 y la 8.9 de Visual Studio para Mac. La manera recomendada de compilar interfaces de usuario de iOS es directamente en un equipo Mac que ejecute Interface Builder de Xcode. Para obtener más información, consulte Diseño de interfaces de usuario con Xcode.

Utilice una instancia de la clase UIButton para crear un botón seleccionable y enfocable en una ventana tvOS. Cuando el usuario selecciona un botón, envía un mensaje de acción al objeto de destino para que la aplicación de Xamarin.tvOS responda a la entrada del usuario.

Botones de ejemplo

Para obtener más información sobre cómo trabajar con Focus y navegar con Siri Remote, consulte nuestra documentación Trabajar con Navegación y Enfoque y Siri Remote y mandos Bluetooth.

Acerca de los botones

En tvOS, los botones se utilizan para acciones específicas de la aplicación y pueden contener un título, un icono o ambos. Cuando el usuario navega por la interfaz de usuario de la aplicación utilizando Siri Remote, el enfoque se desplaza al botón en cuestión, haciendo que cambie el texto y los colores de fondo. También se aplica una sombra al botón, lo que añade un efecto 3D y hace que parezca elevarse por encima del resto de la interfaz de usuario.

Botones de ejemplo

Apple ofrece las siguientes sugerencias para trabajar con botones:

  • Utilice un título o un icono: aunque en un botón se puede incluir tanto un icono como un título, el espacio es limitado, por lo que no debe combinar ambos.
  • Marque de forma clara los botones destructivos: si el botón realiza una acción destructiva (como borrar un archivo), márquelo de forma clara utilizando texto y/o icono. Las acciones destructivas siempre deben presentar una Alerta pidiendo al usuario que limite la acción.
  • No utilice los botones Atrás: el botón Menú del mando Siri Remote se utiliza para volver a la pantalla anterior. La única excepción a esta regla son las compras dentro de la aplicación o las acciones destructivas, en las que se debe mostrar un botón Cancelar.

Para obtener más información sobre cómo trabajar con Enfoque y Navegación, consulte nuestra documentación Trabajar con Navegación y Enfoque.

Iconos de botón

Apple sugiere utilizar imágenes sencillas y muy reconocibles para los iconos de los botones. Los iconos demasiado complejos son difíciles de reconocer en una pantalla de televisión al otro lado de la habitación en un sofá, así que intenta utilizar la representación más sencilla posible para transmitir la idea. Siempre que sea posible, utilice imágenes estándar y conocidas para los iconos (como una lupa para la búsqueda).

Títulos de botones

Apple tiene las siguientes sugerencias a la hora de crear los títulos para sus Botones:

  • Mostrar texto descriptivo debajo de los iconos de los botones: siempre que sea posible, coloque un texto claro y descriptivo debajo de los iconos de los botones para que se entienda mejor el propósito del botón.
  • Utilice verbos o frases verbales para el título: indique claramente la acción que tendrá lugar cuando el usuario haga clic en el botón.
  • Utilice mayúsculas en el título: con la excepción de artículos, conjunciones o preposiciones (de cuatro letras o menos), todas las palabras del título del botón deben ir en mayúsculas.
  • Utilice un título breve y directo: utilice el lenguaje más breve posible para describir la acción del botón.

Botones y guiones gráficos

La forma más sencilla de trabajar con botones en una aplicación de Xamarin.tvOS es agregarlos a la interfaz de usuario de la aplicación mediante Xamarin Designer para iOS.

  1. En el Explorador de soluciones, haga doble clic en el archivo Main.storyboard y ábralo para editarlo.

  2. Arrastre un Botón de la Biblioteca y suéltelo en la Vista:

    Botón A

  3. En el Explorador de propiedades, puede ajustar varias propiedades del botón, como su Título y Color del texto:

    Propiedades del botón

  4. A continuación, cambie a la pestaña Eventos y conecte un Evento desde el Botón y llámelo ButtonPressed:

    Pestaña Eventos

  5. Pasará automáticamente a la vista ViewController.cs en la que puede colocar la nueva Acción en su código utilizando las teclas de flecha Arriba y Abajo:

    Colocación de una nueva acción en el código

  6. Presione Intro para seleccionar la ubicación:

    Editor de código

  7. Guarde los cambios en todos los archivos.

Siempre que la propiedad de un botón Enabled sea true y no esté cubierto por otro control o vista, puede convertirse en el elemento enfocado utilizando el Siri Remote. Si el usuario selecciona el botón y hace clic en la superficie táctil, se ejecutaría la acción ButtonPressed definida anteriormente.

Importante

Aunque es posible asignar acciones como TouchUpInside a UIButton al crear un Controlador de eventos, nunca será llamado porque el Apple TV no tiene pantalla táctil ni admite eventos táctiles. Siempre debe utilizar el Tipo de acción predeterminado al crear Acciones para los 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.

Botones y código

Opcionalmente, UIButton puede ser creado en código C# y agregarlo a la vista de la aplicación tvOS. Por ejemplo:

var button = new UIButton(UIButtonType.System);
button.Frame = new CGRect (25, 25, 300, 150);
button.SetTitle ("Hello", UIControlState.Normal);
button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};
View.AddSubview (button);

Cuando se crea un nuevo UIButton en código, se especifica su UIButtonType como uno de los siguientes:

  • Sistema: este es el tipo de botón estándar que presenta tvOS y es el que utilizarás más a menudo.
  • DetailDisclosure: presenta un botón del tipo "desactivar" utilizado para ocultar o mostrar información detallada.
  • InfoDark: un botón oscuro de información detallada que muestra una "i" en un círculo.
  • InfoLight: un botón luminoso de información detallada que muestra una "i" en un círculo.
  • AddContact : muestra el botón como un botón Agregar contacto.
  • Personalizado: le permite personalizar varias características del botón.

A continuación, defina el tamaño en pantalla y la ubicación del botón. Ejemplo:

button.Frame = new CGRect (25, 25, 300, 150);

Luego, establezca el título del botón. UIButtons son diferentes de la mayoría de los controles UIKit en que tienen un Estado por lo que no se puede simplemente cambiar el título, hay que cambiarlo para un determinado UIControlState. Por ejemplo:

button.SetTitle ("Hello", UIControlState.Normal);

Luego, utilice el evento AllEvents para ver cuando el usuario ha hecho clic en el botón. Ejemplo:

button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};

Por último, agregue el botón a la vista para mostrarlo:

View.AddSubview (button);

Importante

Aunque es posible asignar acciones como TouchUpInside a un UIButton, nunca se llamará porque el Apple TV no tiene pantalla táctil ni admite eventos táctiles. Siempre debe usar eventos como AllEvents o PrimaryActionTriggered.

Dar estilo a un botón

tvOS proporciona varias propiedades de un UIButton que se pueden utilizar para proporcionar su título y estilo con cosas como el color de fondo y las imágenes.

Títulos de botones

Como vimos anteriormente, UIButtons son diferentes a la mayoría de los controles UIKit en que tienen un Estado por lo que no se puede simplemente cambiar el título, hay que cambiarlo para un determinado UIControlState. Por ejemplo:

button.SetTitle ("Hello", UIControlState.Normal);

Puede establecer el color del título para el botón utilizando el método SetTitleColor. Por ejemplo:

button.SetTitleColor (UIColor.White, UIControlState.Normal);

Y puede ajustar la sombra del título utilizando el botón SetTitleShadowColor. Por ejemplo:

button.SetTitleShadowColor(UIColor.Black, UIControlState.Normal);

Puede configurar la sombra del título para que cambie de Grabado a Relieve cuando se resalte el botón utilizando el siguiente código:

button.ReverseTitleShadowWhenHighlighted = true;

Además, puede utilizar texto atribuido como título del botón. Por ejemplo:

var normalAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Blue, strikethroughStyle: NSUnderlineStyle.Single);
myButton.SetAttributedTitle (normalAttributedTitle, UIControlState.Normal);

var highlightedAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Green, strikethroughStyle: NSUnderlineStyle.Thick);
myButton.SetAttributedTitle (highlightedAttributedTitle, UIControlState.Highlighted);

Imágenes de botón

Un UIButton puede tener una imagen adjunta y puede utilizar una imagen como fondo.

Para establecer la imagen de fondo de un botón para un determinado UIControlState, utilice el siguiente código:

button.SetBackgroundImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

Establezca la propiedad AdjustsImageWhenHiglighted para true para dibujar la imagen más clara cuando el botón está resaltado (este es el valor predeterminado). Establezca la propiedad AdjustsImageWhenDisabled para true parq dibujar la imagen más oscura cuando el botón está deshabilitado (de nuevo, este es el valor predeterminado).

Para establecer la imagen que se muestra en el botón, utilice el siguiente código:

button.SetImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

Utilice la propiedad TintColor para establecer un matiz de color que se aplicará tanto al título como a la imagen del botón. Para los botones del tipo Custom, esta propiedad no tiene ningún efecto, debe implementar el comportamiento TintColor usted mismo.

Resumen

En este artículo se ha tratado el diseño y el trabajo con botones dentro de una aplicación de Xamarin.tvOS. Mostró cómo trabajar con botones en el iOS Designer y cómo crear botones en código C#. Por último, mostró cómo modificar el título de un botón y cambiar su estilo y apariencia.