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并在对应位置添加以下内容:



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

步骤二:布局适配

方法1:直接使用safeArea,把SafeArea设置为true。

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

#if __IOS__
On().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来处理,背景颜色根据页面布局需求来设置。

  

效果截图如下:


Xamarin.Forms项目 iPhoneX的适配_第1张图片
Simulator Screen Shot - iPhone X .png

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

你可能感兴趣的:(Xamarin.Forms项目 iPhoneX的适配)