Compartir vía


Guía de diseño de área segura en iOS

Esta plataforma específica de iOS se usa para asegurarse de que el contenido de la página se coloca en un área de la pantalla que es segura para todos los dispositivos que usan iOS 11 y versiones posteriores. En concreto, ayudará a asegurarse de que el contenido no se recorta mediante esquinas redondeadas del dispositivo, el indicador de inicio o la carcasa del sensor en un iPhone X. Se consume en XAML estableciendo la propiedad adjunta Page.UseSafeArea en un valor boolean:

<ContentPage ...
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             Title="Safe Area"
             ios:Page.UseSafeArea="true">
    <StackLayout>
        ...
    </StackLayout>
</ContentPage>

Como alternativa, se puede consumir desde C# mediante la API fluida:

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
...

On<iOS>().SetUseSafeArea(true);

El método Page.On<iOS> especifica que esta plataforma específica solo se ejecutará en iOS. El método Page.SetUseSafeArea, en el espacio de nombres Xamarin.Forms.PlatformConfiguration.iOSSpecific, controla si la guía de diseño de área segura está habilitada.

El resultado es que el contenido de la página se puede colocar en un área de la pantalla que sea segura para todos los iPhone:

Guía de diseño de área segura

Nota:

El área segura definida por Apple se usa en Xamarin.Forms para establecer la propiedad Page.Padding y invalidará los valores anteriores de esta propiedad que se han establecido.

El área segura se puede personalizar recuperando su valor Thickness con el método Page.SafeAreaInsets del espacio de nombres Xamarin.Forms.PlatformConfiguration.iOSSpecific. A continuación, se puede modificar según sea necesario y volver a asignarse a la propiedad Padding en la invalidación OnAppearing:

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

    var safeInsets = On<iOS>().SafeAreaInsets();
    safeInsets.Left = 20;
    Padding = safeInsets;
}