Compartir a través de

Trabajar con controladores de vistas divididas de 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.

Un controlador de vista dividida presenta y administra un controlador de vista principal y otro de vista detallada uno al lado del otro, en pantalla al mismo tiempo. Los controladores de vista dividida se usan para presentar contenido persistente y enfocable en la vista maestra (la sección más pequeña de la izquierda) y detalles relacionados en la vista detallada (la sección más grande de la derecha).

Vista dividida de ejemplo

Acerca de los controladores de vista divididos

Como ya se ha dicho, un controlador de vista dividida administra un controlador de vista principal y otro de vista detallada que se presentan uno al lado del otro, siendo la principal la vista más pequeña de la izquierda y la detallada la más grande de la derecha.

Además, el controlador de la vista principal puede ocultarse o mostrarse según sea necesario:

Controlador de vista maestro oculto

Los controladores de vistas divididas suelen usarse para presentar una lista de contenidos filtrables, con las categorías en la vista principal y los resultados filtrados en la vista detallada. Normalmente se presenta como una vista de tabla a la izquierda y una vista de colección a la derecha.

Cuando diseñe una interfaz de usuario que requiera un controlador de vista dividida, Apple sugiere usar controladores de vista principal y detallada que no cambien (solo cambia el contenido, no la estructura). Si necesita intercambiar Controladores de Vista, lo mejor es usar un Controlador de Navegación como base del Controlador de Vista que necesita cambiar ( Principal o Detalle).

Apple tiene las siguientes sugerencias para trabajar con controladores de vista dividida:

  • Use el porcentaje de división correcto: De forma predeterminada, el controlador de vista dividida usa un tercio de la pantalla para el controlador de vista principal y dos tercios para el controlador de vista detallada. Opcionalmente, puede usar una división de 50/50. Elija el porcentaje correcto para que el contenido aparezca equilibrado en pantalla.
  • Conservar la selección principal : mientras que el contenido de la vista detallada puede cambiar es respuesta a la selección de un usuario en la vista principal, el contenido de ésta debe ser fijo. Además, debe mostrar claramente el elemento actualmente seleccionado en la vista principal.
  • Use un único título unificado: normalmente, querrá usar un único título centrado en la vista detallada, en lugar de un título tanto en la vista detallada como en la vista principal.

Controladores de vista divididos y guiones gráficos

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

    Un controlador de vista dividido

  3. De forma predeterminada, el diseñador de iOS instalará un controlador de navegación y un controlador de vista en la vista principal. Si esto no se ajusta a los requisitos de la aplicación, simplemente elimínelos.

  4. Si elimina la vista principal predeterminada, arrastre un nuevo controlador de vista a la superficie de diseño:

    Un controlador de vista

  5. Haga clic con el botón Control y arrastre desde el controlador de vista dividida al nuevo controlador de vista principal.

  6. Seleccione Principal en el menú emergente:

    Seleccione Master en el menú emergente

  7. Diseñe el contenido de las vistas maestras y de detalles:

    Diseño de ejemplo

  8. Asigne nombres en la pestaña Widget del Panel de propiedades para trabajar con los controles de interfaz de usuario en código de C#.

  9. Guarde los cambios y vuelva a Visual Studio para Mac.

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 controladores de vista divididos

Como se indicó anteriormente, un controlador de vista dividido se usa a menudo en situaciones en las que se muestra contenido filtrado al usuario. Las categorías principales se muestran a la izquierda en la vista principal, y los resultados filtrados a la derecha en la vista detallada en función de la selección del usuario.

Acceso a Principal y a Detalle

Si necesita acceder a los controladores de vista principal y detallada mediante programación, use la propiedad ViewControllersdel controlador de vista dividida. Por ejemplo:

// Gain access to master and detail view controllers
var masterController = ViewControllers [0] as MasterViewController;
var detailController = ViewControllers [1] as DetailViewController;

Se presenta como una matriz, donde el primer elemento (0) en el Controlador de la vista principal y el segundo elemento (1) es el detalle.

Acceder a detalle desde principal

Dado que usted suele mostrar información detallada en la Vista en Detalle basándose en la selección del usuario en la Principal, necesitará una forma de acceder a la Vista en Detalle desde la Principal.

La forma más sencilla de hacerlo es exponer una propiedad en su clase de Controlador de vista principal, por ejemplo:

public DetailViewController DetailController { get; set;}

En el controlador de vista dividida, invalide el ViewDidLoadmétodo y una las dos vistas. Por ejemplo:

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

    // Gain access to master and detail view controllers
    var masterController = ViewControllers [0] as MasterViewController;
    var detailController = ViewControllers [1] as DetailViewController;

    // Wire-up views
    masterController.SplitViewController = this;
    masterController.DetailController = detailController;
    detailController.SplitViewController = this;
}

Puede exponer propiedades y métodos en su Controlador de vista en detalle que el Principal puede usar para presentar nuevos datos según sea necesario.

Mostrar y ocultar principal

Opcionalmente, puede mostrar y ocultar el controlador de vista principal usando la PreferredDisplayModepropiedad del controlador de vista dividida. Por ejemplo:

// Show hide split view
if (SplitViewController.DisplayMode == UISplitViewControllerDisplayMode.PrimaryHidden) {
    SplitViewController.PreferredDisplayMode = UISplitViewControllerDisplayMode.AllVisible;
} else {
    SplitViewController.PreferredDisplayMode = UISplitViewControllerDisplayMode.PrimaryHidden;
}

La UISplitViewControllerDisplayModeenumeración define cómo se presentará el Controlador de la vista principal como uno de los siguientes:

  • Automático: tvOS controlará la presentación de las vistas principal y detallada.
  • PrimaryHidden: oculta el controlador de vista principal.
  • AllVisible: muestra los controladores de la vista principal y detallada uno al lado del otro. Esta es la presentación predeterminada normal.
  • PrimaryOverlay:el Controlador de la vista en detalle se extiende por debajo y queda cubierto por el principal.

Para obtener el estado de presentación actual, use la DisplayMode propiedad del Controlador de vista dividida.

Resumen

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