Safe area de iPhones sin marcos en Xamarin Forms

  • tips
  • xamarin-forms

Con este artículo comienzo una nueva categoría. Los he llamado tips y serán artículos muy cortos centrados en una funcionalidad específica. ¿Por qué voy a empezar a hacer este tipo de artículos? Muy sencillo. Llevo un tiempo en el que me cuesta más tiempo escribir posts elaborados, debido a que el día solo tiene 24h y gran parte de ellas las tengo ocupadas con varios quehaceres. No obstante, no quiero dejar de escribir en el blog, por lo que, creo que los tips me permitirán seguir generando contenido entre los post elaborados, que seguiré haciéndolos, aunque con una menor frecuencia.

Una vez hecha esta introducción, vamos al lio. Hoy os quiero explicar algo muy sencillo pero igualmente necesario en nuestras aplicaciones. Esto es, el safe area de los iPhone. No es otra cosa que un pequeño espacio en las partes superior e inferior de los iphone sin marcos (PE: iPhone X). En la parte inferior, el problema parece que no se hace muy palpable, pero en la parte superior se encuentra la famosa ceja que puede ocultar contenido de nuestra pantalla produciendo un efecto un tanto desagradable, que se agrava aun más si nuestra aplicación puede trabajar en modo landscape.

En este punto, ya ha quedado claro qué es el safe area y por qué es importante tenerlo en cuenta. Ahora bien, cómo adapto mi aplicación Xamarin para no tener problemas con la ceja de los iPhone. Es muy fácil, lo podemos hacer tanto en XAML como en C#. Simplemente hay que establecer la propiedad UseSafeArea de la Page a true. A continuación se muestran dos fragmentos de código en los que se muestra cómo hacerlo.

public MainPage()
{
    InitializeComponent();
    On().SetUseSafeArea(true);
}
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             x:Class="iPhoneSafeArea.MainPage"
             ios:Page.UseSafeArea="true">

 

Al establecer el safe area, lo único que hace Xamarin es asignar un padding a nuestra página, por lo que personalizar dicho safe area sería muy sencillo.

public MainPage()
{
    InitializeComponent();
    On().SetUseSafeArea(true);
}

protected override void OnAppearing()
{
    base.OnAppearing();

    var safeInsets = On().SafeAreaInsets();
    safeInsets.Left = 80;
    Padding = safeInsets;
}

 

Aquí os dejo 2 imágenes en las que se aprecia la diferencia de usar y no usar el safe area. Como podéis observar, en la segunda imagen se aprecia que el texto no se ve de una forma elegante, ya que se oculta detrás de la ceja y de los bordes redondeados

[caption id=“attachment_325” align=“aligncenter” width=“633”]Usando safe area Usando safe area[/caption]

[caption id=“attachment_326” align=“aligncenter” width=“633”]Sin usar safe area Sin usar safe area[/caption]

 

 

Como es habitual, he creado un proyecto en GitHub para ofrecer más detalles de la implementación que he realizado. Espero que os sea de ayuda https://github.com/jorgediegocrespo/iPhoneSafeArea