Skip to content

Adds support for querying the screen safe area on iOS (helpful on iPhone X)

License

Notifications You must be signed in to change notification settings

HaxeExtension/extension-safearea

Repository files navigation

extension-safearea

An OpenFL extension that adds support for querying the screen safe area on iOS and Android.

This allows you to avoid placing important elements behind the notch and rounded corners on the iPhone X, as well as any future devices.

Usage

Initialize extension-safearea:

SafeArea.init();

Note: SafeArea.init() should be called before any Event.RESIZE event listeners are added.

Query the unsafe border on each edge of the screen:

var paddingTop:Float = SafeArea.paddingTop;
var paddingBottom:Float = SafeArea.paddingBottom;
var paddingLeft:Float = SafeArea.paddingLeft;
var paddingRight:Float = SafeArea.paddingRight;

Query the safe area of the screen (the screen area inset by the padding):

var safeArea:Rectangle = SafeArea.safeArea;

Simple usage example

In this example, the screen safe area will be drawn.

import extension.safearea.SafeArea;
import openfl.display.Sprite;
import openfl.events.Event;

class SafeAreaExample extends Sprite
{
    public function new()
    {
        super();

        SafeArea.init();

        stage.addEventListener(Event.RESIZE, onResize);

        drawSafeArea();
    }

    function onResize(e:Event)
    {
        graphics.clear();

        drawSafeArea();
    }

    function drawSafeArea()
    {
        graphics.beginFill(0xFF0000, 0.5);

        graphics.drawRect(SafeArea.safeArea.x, SafeArea.safeArea.y, SafeArea.safeArea.width, SafeArea.safeArea.height);

        graphics.endFill();
    }
}

License

The MIT License (MIT) - LICENSE.md

About

Adds support for querying the screen safe area on iOS (helpful on iPhone X)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published