iOS
Xamarin
Xamarin.Forms
iPhoneX

Xamarin.FormsでiOS11(iPhone X)対応してみた(SafeArea)

More than 1 year has passed since last update.

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

こちらにサンプルコードがあります。

参考サイト