[Proposal] SafeAreaEffect

[TheCodeTraveler]

SafeAreaEffect

• [x] Proposed
• [ ] Prototype: Not Started
• [ ] Implementation: Not Started
  • [ ] iOS Support
  • [ ] Android Support
  • [ ] macOS Support
  • [ ] Windows Support
• [ ] Unit Tests: Not Started
• [ ] Sample: Not Started
• [ ] Documentation: Not Started

Summary

The SafeAreaEffect is an effect that can be added to any element through an attached property to indicate whether or not that element should take current safe areas into account. This is an area of the screen that is safe for all devices that use iOS 11 and greater. Specifically, it will help to make sure that content isn't clipped by rounded device corners, the home indicator, or the sensor housing on an iPhone X. The effect only targets iOS, meaning that on other platforms it does not do anything.

Motivation

Detailed Design

SafeAreaEffect.shared.cs

public static class SafeAreaEffect
{
  public static readonly BindableProperty SafeAreaProperty ;

  public static SafeArea GetSafeArea(BindableObject view);
  public static void SetSafeArea(BindableObject view, SafeArea value);
}

SafeAreaEffectRouter.shared.cs

public class SafeAreaEffectRouter : RoutingEffect
{

}

SafeAreaEffectRouter.iOS.cs

public class SafeAreaEffectRouter : PlatformEffect
{
  protected override void OnAttached()
  {
	if (!IsEligibleToConsumeEffect)
		return;

	orientationDidChangeNotificationObserver = NSNotificationCenter.DefaultCenter.AddObserver(
		UIDevice.OrientationDidChangeNotification, _ => UpdateInsets());

	initialMargin = Element.Margin;
	UpdateInsets();
  }

  protected override void OnDetached()
  {
	if (!IsEligibleToConsumeEffect)
		return;

	if (orientationDidChangeNotificationObserver != null)
	{
		NSNotificationCenter.DefaultCenter.RemoveObserver(orientationDidChangeNotificationObserver);
		orientationDidChangeNotificationObserver?.Dispose();
		orientationDidChangeNotificationObserver = null;
	}

	Element.Margin = initialMargin;
  }
}

Usage Syntax

XAML Usage

<StackLayout VerticalAlignment="Center" SafeAreaEffect.SafeArea="true" HorizontalAlignment="Center" Width="400" Height="400">
  ...
</StackLayout>

C# Usage

var stackLayout = new StackLayout();
SafeAreaEffect.SetSafeArea(stackLayout, new SafeArea(true));