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; } } } }
실행화면