Xamarin.Forms项目 iPhoneX的适配

iPhone X已经发布有一段时间了，适配iPhone X是必然的事情。因为有了IOS原生项目适配iPhone X的经验，Xamarin.Forms项目适配起来也很顺利，基本是一个套路，下面简单介绍一下方法。

步骤一：启动图的适配

如果发现App没有占满整个屏幕,而是在中心保持原有高度，这时我们就需要添加一张新启动图，分辨率为1125 * 2436.
因为开发工具不一样，不能直接像xcode那样拖入iPhone X对应尺寸的图片，所以只能采用下面这个非常规方法添加。

1.打开LaunchImage.launchimage目录，向Contents.json文件添加下面代码

{

"extent" : "full-screen",

"idiom" : "iphone",

"subtype" : "2436h",

"filename" : "launch_2436.png",

"minimum-system-version" : "11.0",

"orientation" : "portrait",

"scale" : "3x"

},

{

"orientation": "landscape",

"idiom": "iphone",

"extent": "full-screen",

"minimum-system-version": "11.0",

"subtype": "2436h",

"scale": "3x"

},

2.把制作好的”launch_2436.png“启动图，拷贝到LaunchImage.launchimage目录下。

3.编辑.csproj并在对应位置添加以下内容：

<ImageAsset Include="Resources\Images.xcassets\LaunchImage.launchimage\launch_2436.png" />

编辑并保存后，再次启动，就会发现可以全屏显示了。

步骤二：布局适配

方法1：直接使用safeArea，把SafeArea设置为true。

只要在布局页面对应的cs文件下添加下面代码即可

#if __IOS__
On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
#endif

这样做APP不会占满整个屏幕，但可以确保之前的布局不会出现遮挡。

方法2：通过设置高度来适配

直接在App.cs类中设置2个全局常量参数：顶部导航栏高度和底部安全区域。我们可以通过判断StatusBar高度来判断当前设备是否为iPhone X，iPhone X时StatusBar状态栏高度为44，非iPhone X为20。

• 顶部导航栏高度：当设备为iphoen X 时，我们设置成88；非iphoen X时设置成64；安卓设备设成44即可。

• 底部安全区域：当设备为iphoen X 时，我们设置成34；非iphoen X和安卓设备时，设置成0即可。

  参考代码如下：

    // 适配iPhoneX 导航栏高度       (navigationBar高度 + 状态栏高度）
        public static Double kNavigationHeight
        {
            get
            {
                Double nHeight = 64;
                #if __IOS__
                int tatusBarHeight  = (int)UIApplication.SharedApplication.StatusBarFrame.Height;
                if (tatusBarHeight > 20)
                {
                    nHeight = 88;
                }
                #else
                    nHeight = 44;
                #endif
                return nHeight;
            }
        }

        // 适配iPhoneX 用于减去底部安全距离  (iphoneX  Home Indicator 底部安全区域为34）
        public static Double kBottomSafetyHeight
        {
            get
            {
                Double bHeight = 0;
                #if __IOS__
                int tatusBarHeight = (int)UIApplication.SharedApplication.StatusBarFrame.Height;
                if (tatusBarHeight > 20)
                {
                    bHeight = 34;
                }
                #endif
                return bHeight;
            }
        }

导入UIKit时记得加判断，不然安卓工程会编译不过

#if __IOS__
using UIKit;
#endif

布局对应的xaml 使用方法：

顶部导航栏

HeightRequest="{x:Static local:App.kNavigationHeight}"

底部安全区域，我采用一个StackLayout来处理，背景颜色根据页面布局需求来设置。

 <StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand" BackgroundColor="White" HeightRequest="{x:Static local:App.kBottomSafetyHeight}"> </StackLayout>

效果截图如下：

Simulator Screen Shot - iPhone X .png

总结：网上关于Xamarin.Forms的资料比较少，所以把一些经验写下来，留给有需要的人，如有错误望指正。