Xamarin.Forms에서 iOS11(iPhone X) 대응해 보았다(SafeArea)

Xamarin.Forms를 사용한 앱으로 iOS11(iPhone X)의 레이아웃 대응을 해 보았습니다.
Xamarin 공식 블로그의 내용이 됩니다만. . .

iPhone X의 실제 기계가 없기 때문에 시뮬레이터에서 확인하고 있습니다.

환경

PC 등

Windows 10

Mac Book Air (macOS Sierra)

Visual Studio 2017 Community

iPhone X (iOS 11.1) @ 시뮬레이터

NuGet 패키지

Xamarin.Forms (2.4.0.74863) ★ 필수

우선 봐

대응 전

화면이 꽉 찼습니다. 의도적으로 색을 칠합니다.



시뮬레이터라고 알기 어려우기 때문에, 고육의 책으로 화면을 사진으로 찍었습니다. 이렇게 되었습니다.



화면 하단에 광고 등을 표시하는 경우 둥근 광고의 오른쪽 하단/왼쪽 하단이 누락되므로 대응해야 합니다.

대응 후

화면 하단이나 좌우에 공백이 태어나네요!



사진이라면 알기 쉽습니다.

소스 코드

큰 일은하지 않습니다.
On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true); 를 쓸 수 있습니다.

MainPage.cs

using System.Linq;
using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

namespace XamarinFormsiOS11Sample
{
    public class MainPage : ContentPage
    {
        public MainPage()
        {
            Title = "テスト画面";

            // iOS用のSetUseSafeArea設定
            On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);

            // ListView用のデータを作成
            var listData = Enumerable.Range(1, 100)
                                .Select(i => $"item {i}")
                                .ToList();
            // ListViewを作成
            var listView = new ListView
            {
                ItemsSource = listData,
                BackgroundColor = Color.LightSkyBlue
            };

            Content = new StackLayout
            {
                Children =
                {
                    listView
                }
            };
        }
    }
}

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:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    ios:Page.UseSafeArea="true" >

마지막으로

나 자신, Xamarin.Forms로 작성해, 릴리스하고 있는 어플리가 있기 때문에, 간단하게 iPhone X대응을 할 수 있어서 기쁩니다!

Xamarin은 좋습니다. Xamarin.Forms는 좋습니다.

Github

여기 에 샘플 코드가 있습니다.

참고 사이트

htps : // bg. 마린. 코 m / 마킨 g - 이오 s - 11 - 에 ​​ぇ