Á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.

¿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

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 »
Enmanuel Toribio hablando sobre Xamarin en codecamsdq 2019
Eventos

La Experiencia CodecampSDQ

El sábado pasado, 1 de junio, tuve el privilegio de participar como miembro del personal y orador en el CodecampSDQ. Se llevó a cabo en las instalaciones de la Universidad INTEC aquí en Santo Domingo. Este evento ha estado ocurriendo durante muchos años y se ha convertido en una especie

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