Xamarin.Forms iOS 안전영역(Safe Area) 설정하기

iPhone X부터 탈모 노치(Notch)형 디스플레이가 적용되어 안전영역(Safe Area)이 도입되었다. 안전영역은 컨텐츠가 온전히 보이는 영역이다. 이 안전영역을 별도로 설정해주지 않으면 화면 상단 노치 디스플레이와 화면 하단의 라운드 디스플레이에 컨텐츠가 잘리게 된다.

컨텐츠를 안전영역에 온전히 보여주려면 별도로 안전영역을 설정해주어야 한다. 이 글은 Xamarin.Forms에서 iOS 안전 영역을 설정하는 방법에 대해 정리해 좋은 글이다. 자세한 사항은 Microsoft Xamarin 문서 참고.

 

XAML

C# 코드를 사용하지 않고 XAML로 안전영역을 구현할 수 있다.

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MyXamarinStudy" x:Class="MyXamarinStudy.MainPage"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             ios:Page.UseSafeArea="true"
             Title="Safe Area">
    <Label x:Name="label" Text="안녕요?ㅎ" FontSize="30"></Label>
</ContentPage>

 

C#

C# 코드로도 안전영역을 구현할 수 있다.

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

On<iOS>().SetUseSafeArea(true); // iOS Safe Area 설정

MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MyXamarinStudy" x:Class="MyXamarinStudy.MainPage"
             Title="Safe Area">
    <Label x:Name="label" Text="안녕요?ㅎ" FontSize="30"></Label>
</ContentPage>

MainPage.xaml.cs

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

namespace MyXamarinStudy
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            switch (Device.RuntimePlatform)
            {
                case Device.iOS:
                    On<iOS>().SetUseSafeArea(true); // iOS Safe Area 설정
                    break;
                case Device.Android:
                    // 필요한 경우 안드로이드 플랫폼에서 실행될 코드 구현
                    break;
                case Device.UWP:
                    // 필요할 경우 UWP(Universal Windows Platform)에서 실행될 코드 구현
                    break;
            }
        }
    }
}

 

실행화면