Aitor Sánchez - Blog - Oct. 30, 2023, 12:12 p.m.
¿Queires incluir experiencias inmersivas para tus usuario en tu aplicación hecha en Ionic? O, quizás ya sabes cómo funciona el componente Full Screen Ionic, pero te falta información sobre algún campo o función para dejarlo cómo tú quieres ¿verdad?
Me llamo Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a implementar componentes a pantalla completa en tu aplicación con el componente Full Screen Ionic.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Y ahora si, comenzamos. Let´s go!
Cómo se trata de un componente desacoplado del core del sistema tenemos que instalarlo. Para ello vamos a utilizar las siguiente dos líneas de consola:
$ ionic cordova plugin add cordova-plugin-fullscreen
$ npm install @awesome-cordova-plugins/android-full-screen
La primera instalará el plugin para que nos podamos comunicar con la parte nativa del dispositivo. El segundo nos facilitará el código para la comunicación desde nuestro código TS y el plugin.
Ahora necesitamos incluir la característica en los módulos de nuestra app.
Nota: Si estás usando una versión superior a Ionic 4, y usas el componente NGX, no es necesario que hagas esto. De lo contrario te hace falta este código.
...
import { AndroidFullScreen } from "@awesome-cordova-plugins/android-full-screen/ngx"
...
providers: [
...,
AndroidFullScreen,
...
]
...
Recordatorio: Para mejorar el rendimiento de la aplicación, y dar una mejor experiencia de usuario, es recomendable que, si no vas a usar la característica, en este caso AndroidFullScreen, en toda la app, que solo la incluyas cómo servicio en los módules de cada uno de los componentes que lo vayan a usar en lugar de en el AppModule.ts.
Cómo en todos los tutoriales, siempre incluyo antes de pasar a explicar toda la chicha, un ejemplo de código y así todo es mucho más ilustrativo.
...
import { AndroidFullScreen } from "@awesome-cordova-plugins/android-full-screen/ngx";
constructor(private androidFullScreen: AndroidFullScreen) { }
...
this.androidFullScreen.isImmersiveModeSupported()
.then(() => console.log(‘El modo inmersivo está disponible’))
.catch(err => console.log(err));
...
En primer lugar realizamos un import con esta línea: import { AndroidFullScreen } from '@awesome-cordova-plugins/android-full-screen/ngx'; Lo que nos permitirá usar la clase dentro de nuestro código.
Posteriormente, al tratarse de un servicio y está incluido en los modules de nuestro componente, lo inyectamos a través del constructor.
Y depués, llamando al método “isImmersiveModeSupported” comprobamos si la característica está disponible.
Controlamos la promesa y en la resolución podríamos, en lugar de pintar un console log, llamar a la función que pone la pantalla completa que veremos a continuación.
Continuamos el tutorial y ahora vamos a pasar a hablar de los métodos que tenemos disponibles para darle forma.
Aunque solo hayamos visto una, siempre tiene cavidad aquí. Así que veamos de que se trata.
Esta clase/enumerado es la que se utiliza en "setSystemUiVisibility" para definir la visibilidad de la interface de manera manual. La clase la vemos en código aquí abajo:
export enum AndroidSystemUiFlags {
/** Ha solicitado que la UI del sistema (barra de estado) esté visible (el valor predeterminado). SYSTEM_UI_FLAG_VISIBLE */
Visible = 0,
/** Ha solicitado que la IU del sistema ingrese a un modo discreto de "perfil bajo". SYSTEM_UI_FLAG_LOW_PROFILE */
LowProfile = 1,
/** Ha solicitado que la navegación del sistema se oculte temporalmente. SYSTEM_UI_FLAG_HIDE_NAVIGATION */
HideNavigation = 2,
/** Ha solicitado pasar al modo normal de pantalla completa para que su contenido pueda hacerse cargo de la pantalla y al mismo tiempo permitir al usuario interactuar con la aplicación. SYSTEM_UI_FLAG_FULLSCREEN */
Fullscreen = 4,
/** Al usar otras flag de diseño, nos gustaría una vista estable de las inserciones de contenido dadas a fitSystemWindows (Rect). SYSTEM_UI_FLAG_LAYOUT_STABLE */
LayoutStable = 256,
/** Si le gustaría que su ventana se presentara como si hubiera solicitado SYSTEM_UI_FLAG_HIDE_NAVIGATION, incluso si actualmente no lo ha hecho. SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION */
LayoutHideNavigation = 512,
/** Si le gustaría que su ventana se presentara como si hubiera solicitado SYSTEM_UI_FLAG_FULLSCREEN, incluso si actualmente no lo ha hecho. SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN */
LayoutFullscreen = 1024,
/** Si desea que la pantalla permanezca interactiva al ocultar la barra de navegación con SYSTEM_UI_FLAG_HIDE_NAVIGATION. SYSTEM_UI_FLAG_IMMERSIVE */
Immersive = 2048,
/** Si desea que la pantalla permanezca interactiva al ocultar la barra de estado con SYSTEM_UI_FLAG_FULLSCREEN y / o al ocultar la barra de navegación con SYSTEM_UI_FLAG_HIDE_NAVIGATION. SYSTEM_UI_FLAG_IMMERSIVE_STICKY */
ImmersiveSticky = 4096,
/** Solicita que la barra de estado se dibuje en un modo que sea compatible con los fondos claros de la barra de estado. SYSTEM_UI_FLAG_LIGHT_STATUS_BAR */
LightStatusBar = 8192
}
Cuando tu optimizas el logo de tu aplicación, de manera inevitable, por cómo funciona Google Play, vas a recibir más descargas y a ganar más dinero. Esto es así, y por esta razón hemos creado para esta herramienta. Herramienta con la que puedes evaluar, optimizar y mejorar tus logos para ganar más pasta. Entra en el enlace, no te espoileo más.
Pues esto es todo lector, espero que hayas encontrado lo que buscas. Ahora solo me queda despedirme y decirte que nos vemos en el siguiente artículo. Hasta entonces, que vaya bien :)