[ES] Incorporar un SlideMenu como opción de un TabView con SwiftUI

En el mundo del desarrollo de aplicaciones móviles, es común encontrarse con situaciones inesperadas durante las migraciones de versiones y las actualizaciones de código. A veces, nos topamos con desafíos que no están contemplados de forma predeterminada en los controles base originales. Un ejemplo sencillo es la integración de un menú deslizante (SlideMenu) dentro de una TabView en SwiftUI. En este artículo, exploraremos cómo abordar este escenario específico y aprenderemos cómo lanzar un SlideMenu desde una TabView en nuestras aplicaciones.

Para comenzar, lo primero que necesitamos es un enum que reflejará los distintos tabs que queremos mostrar en nuestra TabView. Esto nos ayudará a tener todo organizado, facilitará la lectura y será la clave para mantener el tab original cuando se pulse la opción de menú en el tabview.

Luego de haber establecido los cimientos, es hora de adentrarnos en la construcción del SlideMenu en sí. Para lograr esto, crearemos una vista que estará oculta en la parte izquierda de la pantalla, fuera de la vista del usuario. Para hacerlo, estableceremos su width con un valor negativo. Así, estará listo para hacer su gran entrada en el momento adecuado. Cuando llegue el momento de revelarlo, implementaremos una animación que se activará con la transición de isMenuOpen, dándole vida a nuestro SlideMenu.

Para finalizar construímos ya el TabView, teniendo en cuenta que en las opciones que no son de menú tendremos que guardar en el onAppear el último tab seleccionado (Líneas 23, 33 y 43). Esto nos va a permitir frenar la navegación en nuestro tab que alberga la opción de menú reasignando la opción anterior como seleccionada (Línea 53). Para el ejemplo el primer tab es rojo, el segundo amarillo, el tercero azul y el cuarto tendría un panel verde pero en su lugar lo que veremos no será ese panel si no el menú que se despliega desde el lado izquierdo también de color verde.

El proyecto completo de ejemplo se puede clonar en github

Comments are closed here.