Xamarin.Forms iOS에서 SafeArea를 하단에만 주고 싶은 경우

아이폰 노치가 있는 모델이 생기면서 노치 영역에 의도치 않게 디자인한 컨트롤들이 표현 되는 것을 방지하기 위해 아래와 같은 코드를 사용하였다.

 

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:views="clr-namespace:StampApp.Views"
             xmlns:vm="clr-namespace:StampApp.ViewModel"
             x:Class="testProject.Page.TestPage"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" 
             ios:Page.UseSafeArea="true">

 

ios 부분을 별도로 정의해주고 SafeArea를 주는 부분인데 이걸 하게 되면 첫 이미지와 같이 ContentPage의 배경색이 SafeArea 영역에 표시 되는 것을 알 수 있다.

 

이렇게 되면 문제는 Scrollviewer 등을 구현 시에 하단 영역에 거슬리는 빈 공간이 발생 된다는 것이다. 이 경우에는 ContentPage에 정의한 것처럼 UseSafeArea를 True로 주어서 처리하면 안된다. 이건 위 아래 둘 다 만들기 때문이다.

 

protected override void OnAppearing()
{
    base.OnAppearing();
    if( Device.RuntimePlatform == Device.iOS )
    {
        var safeInsets = On<Xamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets();
        safeInsets.Bottom = 0;
        this.Padding = safeInsets;
    }
}

위와 같이 OnAppearing 을 오버라이드 하여 디바이스가 iOS인 경우에만 하단 영역에 패딩을 주지 않는 것으로 해결할 수 있다.

 

 

제거하게 되면 이런 식으로 스크롤링에 영향을 주지 않는다.