Safe area de iPhones sin marcos en 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

Usando safe area
Usando safe area
Sin usar safe area
Sin usar safe area

 

 

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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .