Skip to content

Instantly share code, notes, and snippets.

@SeanMcTex
Last active March 2, 2024 07:27
Show Gist options
  • Star 20 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save SeanMcTex/c28f6e56b803cdda8ed7acb1b0db6f82 to your computer and use it in GitHub Desktop.
Save SeanMcTex/c28f6e56b803cdda8ed7acb1b0db6f82 to your computer and use it in GitHub Desktop.
Restrict Unity UI to an iPhone X or other Mobile Device's Safe Area
using UnityEngine;
/// <summary>
/// Resizes a UI element with a RectTransform to respect the safe areas of the current device.
/// This is particularly useful on an iPhone X, where we have to avoid the notch and the screen
/// corners.
///
/// The easiest way to use it is to create a root Canvas object, attach this script to a game object called "SafeAreaContainer"
/// that is the child of the root canvas, and then layout the UI elements within the SafeAreaContainer, which
/// will adjust size appropriately for the current device./// </summary>
public class PinToSafeArea : MonoBehaviour {
private Rect lastSafeArea;
private RectTransform parentRectTransform;
private void Start() {
parentRectTransform = this.GetComponentInParent<RectTransform>();
}
private void Update() {
if ( lastSafeArea != Screen.safeArea ) {
ApplySafeArea();
}
}
private void ApplySafeArea() {
Rect safeAreaRect = Screen.safeArea;
float scaleRatio = parentRectTransform.rect.width / Screen.width;
var left = safeAreaRect.xMin * scaleRatio;
var right = -( Screen.width - safeAreaRect.xMax ) * scaleRatio;
var top = -safeAreaRect.yMin * scaleRatio;
var bottom = ( Screen.height - safeAreaRect.yMax ) * scaleRatio;
RectTransform rectTransform = GetComponent<RectTransform>();
rectTransform.offsetMin = new Vector2( left, bottom );
rectTransform.offsetMax = new Vector2( right, top );
lastSafeArea = Screen.safeArea;
}
}
@mardax007
Copy link

Tnx this helped a lot. The wording of your explanation was a little hard to understand. Could you maybe change it to the following so others will be able to understand it more easily?

/// Resizes a UI element with a RectTransform to respect the safe areas of the current device.
/// This is particularly useful on an iPhone X, where we have to avoid the notch and the screen corners.
///
/// The easiest way to use it is to create a root Canvas object, attach this script to a game object called "SafeAreaContainer"
/// that is the child of the root canvas, and then layout the UI elements within the SafeAreaContainer, which
/// will adjust size appropriately for the current device.

@SeanMcTex
Copy link
Author

Tnx this helped a lot. The wording of your explanation was a little hard to understand. Could you maybe change it to the following so others will be able to understand it more easily?

Sounds good to me! Done! Thanks for the suggestion. (And I'm glad you found it useful!)

@Xaverix
Copy link

Xaverix commented Feb 21, 2023

I think there is an error in your code and top is swapped with bottom. You're offsetting from top using yMin, which is offset from the bottom.

@MalinduRK
Copy link

With the help of @Xaverix 's comment, I found that by doing a slight adjustment, the function works perfectly. Here's the fixed lines of code (line 33,34):

var top = -(Screen.height - safeAreaRect.yMax) * scaleRatio;
var bottom = safeAreaRect.yMin * scaleRatio;

@mardax007
Copy link

2018 (when this was published) is now 5 years ago, crazy

@cihadturhan
Copy link

Using it in 2024. Funny that unity doesn't have a SafeArea component after those years. Shame on you Unity!
Thanks!

@SeanMcTex
Copy link
Author

Using it in 2024. Funny that unity doesn't have a SafeArea component after those years. Shame on you Unity! Thanks!

Haha! Glad it continues to be useful. :)

@devingDev
Copy link

Thank you! Simple and just works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment