Doble pantalla de Xamarin.Forms

  • Artículo

Los dispositivos de doble pantalla como Microsoft Surface Duo ofrecen nuevas posibilidades de experiencia del usuario para las aplicaciones. Xamarin.Forms incluye las clases TwoPaneView y DualScreenInfo para que pueda desarrollar aplicaciones para dispositivos de doble pantalla.

Introducción

Siga estos pasos para agregar funcionalidades de doble pantalla a una aplicación Xamarin.Forms:

  1. Abra el cuadro de diálogo Administrador de paquetes de NuGet para su solución.

  2. En la pestaña Examinar, busca Xamarin.Forms.DualScreen.

  3. Instale el paquete de Xamarin.Forms.DualScreen en la solución.

  4. Agregue la siguiente llamada al método de inicialización a la clase MainActivity del proyecto de Android, en el evento OnCreate:

    Xamarin.Forms.DualScreen.DualScreenService.Init(this);

    Este método es necesario para que la aplicación pueda detectar cambios en el estado de la aplicación, como el hecho de abarcar un espacio de dos pantallas.

  5. Actualice el atributo Activity en la clase MainActivity del proyecto de Android, de modo que incluya todas estas opciones de ConfigurationChanges:

    ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation
    | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode

    Estos valores son necesarios para que los cambios de configuración y el espacio abarcado se puedan notificar de forma más confiable. De forma predeterminada, solo dos se agregan a los proyectos de Xamarin.Forms, por lo que no olvide agregar el resto para ofrecer compatibilidad de doble pantalla confiable.

Solución de problemas

Si la clase DualScreenInfo o el diseño TwoPaneView no funcionan del modo esperado, revise de nuevo las instrucciones de configuración de esta página. La omisión o la incorrecta configuración del método Init o de los valores de atributo de ConfigurationChanges son causas comunes de error.

Revise los ejemplos de doble pantalla de Xamarin.Forms para obtener orientación adicional y una implementación de referencia.

Pasos siguientes

Una vez que haya agregado NuGet, agregue características de doble pantalla a la aplicación con las siguientes instrucciones:

  • Modelos de diseño de doble pantalla: al considerar el uso óptimo de varias pantallas en un dispositivo de doble pantalla, consulte estas instrucciones de patrones para encontrar la mejor opción para la interfaz de su aplicación.
  • Diseño TwoPaneView: la clase TwoPaneView de Xamarin.Forms, inspirada en el control de UWP del mismo nombre, es un diseño multiplataforma optimizado para los dispositivos de pantalla doble.
  • Clase auxiliar DualScreenInfo: la clase DualScreenInfo permite determinar en qué panel se encuentra la vista, qué tamaño tiene, en qué posición está el dispositivo, el ángulo de la bisagra y mucho más.
  • Desencadenadores de pantalla doble: el espacio de nombres de Xamarin.Forms.DualScreen incluye dos desencadenadores de estado que desencadenan un cambio de VisualState cuando varía el modo de visualización del diseño adjunto o de la ventana.

Para obtener más información, consulte la documentación sobre la doble pantalla para desarrolladores.