Areas seguras del Layout para iOS en Xamarin Forms

Screen Shot 2019-04-24 at 5.57.45 PM
Share on facebook
Share on twitter
Share on linkedin

Desde el lanzamiento del iPhone X, hay un “notch” en la parte superior de la pantalla en los dispositivos iOS que tiende a ser molesto porque se sobrepone al contenido de nuestra aplicación. Normalmente tendrías que agregar algún tipo de margen para evitar este problema. El mayor inconveniente con este enfoque es que debes tener en cuenta si el teléfono estaba en modo horizontal o vertical y adecuar el margen según este criterio.

This image has an empty alt attribute; its file name is Screen-Shot-2019-04-24-at-5.57.33-PM.png
Intentando mostrar una etiqueta con el texto “Some Fancy content”

Para evitar esta frustración se introdujo el flag SafeArea a Xamarin Forms que puedes configurar en tu Page para asegurarte que el framework se haga cargo de los margenes dependiendo de la orientación del dispositivo.

Puedes configurarlo en C#:

O utilizando XAML, fijate en el ejmplo debajo como se declara primero el namespace donde reside el flag como ios y luego se utiliza con ios:UseSafeArea

Y voilá, obtienes algo como esto:

This image has an empty alt attribute; its file name is Screen-Shot-2019-04-24-at-6.11.05-PM.png
El texto está a una sana distancia del notch y se puede leer

Una cosa muy importante a tener en cuenta es que se debe establecer este indicador para cada página que tengas en pantalla. Digamos, por ejemplo, que tienes un MasterDetailPage que se ve así:

This image has an empty alt attribute; its file name is Screen-Shot-2019-04-24-at-5.57.45-PM.png
oh no! tanto el Master como el Detail están solapados ):

To fix it you would have to set the safe area to both the Mater and the Detail Page as follows:

Para solucionarlo, tendrías que configurar el área segura tanto para el Mater como para el Detail de la siguiente manera:

Y ahora se ve así:

This image has an empty alt attribute; its file name is Screen-Shot-2019-04-24-at-6.19.19-PM.png
Nada solapado, podemos leer todo! yey!

Este es otro artículo corto pero espero que haya sido útil. Si te gustó, compártalo en las redes sociales o en el grupo de tu iglesia local o donde sea. Realmente lo apreciaré mucho. Pasala bién.

¿Te gustó el artículo o tienes algún comentario? Puedes darme mention en twitter @eatskolnikov

Comparte este post con tus amigos

Share on linkedin
Share on twitter
Share on facebook

¿quieres recibir los artículos en tu correo?

Suscribete a mi boletín de correos y enterate cuando haya una nueva publicación

Otros artículos

Xamarin

Areas seguras del Layout para iOS en Xamarin Forms

Desde el lanzamiento del iPhone X, hay un “notch” en la parte superior de la pantalla en los dispositivos iOS que tiende a ser molesto porque se sobrepone al contenido de nuestra aplicación. Normalmente tendrías que agregar algún tipo de margen para evitar este problema. El mayor inconveniente con este

Leer más »
From https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=macos
Xamarin

Almacenamiento en caché de imágenes en Xamarin Forms

Alguien me preguntó sobre un problema que estaba teniendo al mostrar un ListView que tenía una imagen para cada celda. Cuando el usuario se movía por la lista, las imágenes parpadeaban y la interfaz de usuario se comportaba un poco lento. Las imágenes se estaban cargando desde internet. El problema

Leer más »
Xamarin

Agregando autenticación con huellas digitales en Xamarin Forms

Agregar una autenticación de huella digital para proyectos multiplataforma nunca ha sido tan fácil como con el paquete de NuGet Plugin.Fingerprint. Pero primero… Algunas cosas para aclarar acerca de la autenticación biométrica o por huella digital. Estas son limitaciones de implementación por la tecnología en sí y no están introducidas

Leer más »
Cinco Preguntas

Cinco preguntas sobre Startup Weekend

Del 10 al 12 de mayo del año en curso, seré voluntario como coach de tecnología en la próxima entrada de Startup Weekend Fintech, así que quise escribir un poco sobre el tema. ¿Qué es Startup Weekend Fintech? Startup Weekend es un evento, algo así como un hackathon, donde puedes

Leer más »
Streaming

Configurando Loopback para capturar audio con OBS

En Megsoft estamos usando esta herramienta llamada Loopback que te permite enrutar la salida de audio de una aplicación a un dispositivo de audio virtual. Es muy útil si vas a hacer streaming y la utilizamos para dos programas en Youtube llamados DevBorrachos y .Net Friday Show. Aquí una guía

Leer más »
Xamarin

Top 5 APIs de Xamarin Essentials que no has usado

Xamarin Essentials proporciona acceso multiplataforma a una gran cantidad de funciones de uso común y API nativas. En el momento de escribir hay 29 apis y el número sigue creciendo. Algunas de estas funciones solían ser bastante incómodas para configurar, pero ahora no hay que hacer nada de eso y

Leer más »