Áreas 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 ):

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.

Share on facebook
Share on twitter
Share on linkedin

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

¿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

.Net Core

El nuevo portal de emplea.do

Llevo un tiempo trabajando directamente y liderando esfuerzos para sacar adelante la nueva versión del portal emplea(punto)do y debo decir que me llena de emoción saber que estamos a solo un paso de publicar la nueva versión mejorada del sitio web. El site actualmente te lleva a la nueva versión

Leer más »
Xamarin

Obtener la firma del usuario

Esta es una característica solicitada para muchas aplicaciones en el mundo corporativo, si estás trabajando en algún tipo de aplicación de procesamiento de pagos o una aplicación de entregas. También es posible que necesites la firma del usuario para confirmar que ha recibido un paquete, que se ha entregado un

Leer más »
Xamarin

Definiendo estilos para nuestras aplicaciones

El uso de estilos (Styles) puede ayudar a definir una interfaz de usuario coherente para tu aplicación y es una excelente manera de hacer que tus archivos XAML sean más legibles y mantenibles a largo plazo. Algunas características de los estilos: Son muy fáciles de definir. Se puede heredar para

Leer más »
Xamarin

Cambiando la etiqueta del botón Back en iOS con Xamarin Forms

Algo de contexto He estado trabajando en la aplicación para CodecampSDQ (iOS | Android) que se celebrará en las instalaciones de Intec este 1 de junio. El código se basa en este repositorio y hemos realizado algunas adaptaciones de las que probablemente hablaré con mayor detalle más adelante. En un momento me

Leer más »
Xamarin

Áreas 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 »