Compartir a través de

Trabajar con controles segmentados de tvOS en Xamarin

  • Artículo

Un control segmentado proporciona un conjunto de elementos lineales, cada uno de los cuales puede contener un icono o texto, y se usa para proporcionar un conjunto de opciones relacionadas al usuario.

Controles de segmento de ejemplo

Apple tiene las siguientes sugerencias para trabajar con controles segmentados:

  • Proporcionar espacio amplio: se debe tener cuidado para proporcionar suficiente espacio entre otros Elementos enfocados y un control segmentado. Un segmento individual se selecciona cuando está en el foco (no cuando se hace clic en él) y el usuario puede cambiar accidentalmente los segmentos cuando realmente quieren seleccionar otro elemento enfocado en el segmento actual.
  • Usar vistas divididas para el filtrado de contenido: los controles segmentados no toman buenas opciones para el filtrado de contenido, ya que las vistas divididas se diseñaron para facilitar la navegación entre el contenido y los filtros.
  • Limitarse a siete segmentos máximo: debe intentar mantener el número máximo de segmentos por debajo de ocho (8), ya que esto es más fácil de analizar desde la sala en el sofá y más fácil de navegar.
  • Usar tamaño de contenido de segmento coherente: todos los segmentos tienen el mismo ancho y, si es posible, debe intentar mantener el contenido en cada segmento del mismo tamaño. Esto no solo hace que los controles de segmento sean más agradables visualmente, pero facilita la lectura de un vistazo.
  • Evitar mezclar iconos y texto: cada segmento individual puede contener un icono o texto, pero no ambos. Aunque es posible mezclar iconos y texto en el mismo control segmentado, se debe evitar.

Acerca de los iconos de segmento

Apple sugiere el uso de imágenes sencillas y reconocibles para iconos de segmento, como una lupa para la búsqueda. Los iconos demasiado complejos son difíciles de reconocer en una pantalla de TV a través de la habitación, por lo que es mejor limitar los iconos a representaciones simples.

No puede mezclar texto e iconos en un segmento determinado y debe evitar mezclar iconos y texto en un único control segmentado. Debe ser todos los iconos o todo el texto.

Texto de segmento

Apple realiza las siguientes sugerencias para trabajar con texto de segmento:

  • Usar nombres cortos y significativos: el título del segmento debe indicar claramente el tipo de contenido que el usuario debe esperar al seleccionar el segmento especificado. Por ejemplo: Música o Vídeos.
  • Usar mayúsculas de mayúsculas y minúsculas de título: todas las palabras del título Segmentos deben incluirse en mayúsculas, excepto artículos, combinaciones y preposiciones de menos de cuatro (4) caracteres.
  • Usar títulos cortos y centrados: mantenga los títulos, cortos y centrados en el tipo de contenido que se esperará cuando se seleccione el segmento.

De nuevo, no puede mezclar texto e iconos en un segmento determinado y debe evitar mezclar iconos y texto en un único control segmentado.

Controles de segmento y guiones gráficos

La manera más fácil de trabajar con controles de segmento 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 segmento desde el cuadro de herramientas y colóquelo en la vista:

    Un control de segmento

  3. En la pestaña Widget del Panel de propiedades, puede ajustar varias propiedades del control de segmento, como su Estilo y Estado:

    La pestaña Widget

  4. Use el campo Segmentos para controlar el número de segmentos del controlador.

  5. Seleccione un segmento determinado en la Lista desplegable de Segmento para ajustar sus propiedades individuales, como Título o Imagen, y para controlar si un segmento determinado está Habilitado o Seleccionado cuando se muestra el control.

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

    Asigne un nombre

  7. Guarde los cambios.

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 Controles segmentados

Como se indicó anteriormente, el control segmentado proporciona un conjunto de elementos lineales, cada uno de los cuales puede contener un icono o texto, y se usa para proporcionar un conjunto de opciones relacionadas al usuario.

Hay varias maneras diferentes de trabajar con controles segmentados en la aplicación Xamarin.tvOS.

Expuesto como nombres y eventos

Si ha creado el control de segmento en el Diseñador de interfaces y lo ha expuesto como un control con nombre y un evento, puede usar el código siguiente para responder al cambio de segmento:

partial void PlayerCountChanged (Foundation.NSObject sender) {

    // Take action based on the number of players selected
    switch(PlayerCount.SelectedSegment) {
    case 0:
        // Do something if the segment is selected
        ...
        break;
    case 1:
        // Do something if the segment is selected
        ...
        break;
    case 2:
        // Do something if the segment is selected
        ...
        break;
    }
}

En el caso del ejemplo anterior, el control de segmento se expone como un nombre de PlayerCount y una acción de evento de PlayerCountChanged. Para obtener más información sobre cómo trabajar con acciones y salidas, consulte la sección Escritura del código con salidas y acciones de nuestra Guía de inicio rápido de Hello, tvOS.

La propiedad SelectedSegment obtiene o establece el segmento seleccionado actualmente como un índice basado en cero (0). Por lo tanto, si tiene cinco (5) Segmentos, el primer segmento tendrá un índice de cero (0) y el último índice de cuatro (4).

Modificar segmentos

En cualquier momento, puede modificar tanto el número como el contenido de los controles segmentados. Use el código siguiente para insertar un nuevo icono Segment:

// Icon Segment
SegmentedControl.InsertSegment(UIImage.FromFile("icon.png"), 0, true);

// Text Segment
SegmentedControl.InsertSegment("New Segment", 0, true);

El segundo parámetro define dónde se insertará el segmento mediante un índice basado en cero (0). Si el último parámetro es true se animará la inserción.

Para quitar un segmento determinado, use lo siguiente:

SegmentedControl.RemoveSegmentAtIndex(0, true);

O lo siguiente para quitar todos los segmentos:

SegmentedControl.RemoveAllSegments();

De nuevo, si el último parámetro es true, se animará la eliminación. Utilice la propiedad NumberOfSegments para devolver el número actual de segmentos.

Para obtener el Título o el Icono de un segmento determinado, use lo siguiente:

// Get title
var title = SegmentedControl.TitleAt(0);

// Get icon
var icon = SegmentedControl.ImageAt(0);

Y para cambiar el Título o el Icono, use lo siguiente:

// Set title
SegmentedControl.SetTitle("New Title", 0);

// Set icon
SegmentedControl.SetImage(UIImage.FromFile("icon.png"), 0);

Para ver si un segmento determinado está Habilitado, use lo siguiente:

if (SegmentedControl.IsEnabled(0)) {
    // Do something
    ...
}

Y para Habilitar o Deshabilitar un segmento determinado, use lo siguiente:

SegmentedControl.SetEnabled(false, 0);

Modificar la apariencia del control segmentado

Puede usar el código siguiente para cambiar el fondo de un segmento determinado a una imagen:

SegmentedControl.SetBackgroundImage (UIImage.FromFile("background.png"), UIControlState.Normal, UIBarMetrics.Default);

Donde UIControlState especifica el estado del control para el que está estableciendo la imagen como:

  • Normal
  • Destacado
  • Deshabilitado
  • Seleccionada
  • Enfocado

Y UIBarMetrics especifica las métricas que se van a usar como:

  • Valor predeterminado
  • Compacto
  • DefaultPrompt
  • CompactPrompt

Además, puede establecer el divisor entre los segmentos mediante:

SegmentedControl.SetDividerImage (UIImage.FromFile("divider.png"), UIControlState.Normal, UIControlState.Normal, UIBarMetrics.Default);

Donde el primero UIControlState especifica el estado del segmento a la izquierda del divisor y el segundo UIControlState especifica el estado del segmento a la derecha.

Resumen

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