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

Layout safe areas for iOS in Xamarin Forms

Since the launch of the iPhone X there is a notch at the top of the screen on iOS devices that tend to be annoying to work around. You would have to add some sort of margin to avoid your controls to be overlapped by it. The problem with this approach is that you would have to take into consideration wether or not the phone was in landscape or portrait mode.

Trying to show a label with the text “Some Fancy content”

To avoid these frustrations Xamarin Forms introduces a SafeArea flag that you can set on your Page Layout to ensure it’s content will automatically adjust the margin depending on the orientation of the device.

You can set it with C#

Or using XAML, see the ios namespace declared bellow and then how we set the flag right after

And you will get something like this:

The text is at a healthy distance from the notch and you can clearly see it.

One very important thing to take into consideration is that you need to set this flag for every Page you have on screen. Say for example you have a MasterDetailPage that looks like this:

oh no! both the Master and the detail are being overlapped ):

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

And now it will look like this:

No text is being overlapped! yey!

This is another short one but hopefully very useful. If you liked it please share it on social media or at your local church group if you are into that. I will really appreciate it. Have a good one.