Xamarin.Forms：UI 在 iOS 10.1 和 iOS 10.4 上的呈现方式不同

Question

我在一个 Xamarin.Forms 应用程序上工作，我需要在其中实现 透明/半透明导航栏。

我研究了 Vision Conference sample，这是实施的地方。

这是通过CustomNavigationPage 和CustomRenderer 实现的。

CustomNavigationPage 的 XAML 是：

<?xml version="1.0" encoding="utf-8" ?>
<NavigationPage 
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="ConferenceVision.Views.CustomNavigationPage"
    xmlns:iOS="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    iOS:NavigationPage.IsNavigationBarTranslucent="True"
    BarTextColor="{StaticResource NavigationBarTextColor}">
    <NavigationPage.BarBackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Android, iOS" Value="Transparent" />
            <On Platform="UWP" Value="{StaticResource NavigationBarBackgroundColor}" />
        </OnPlatform>
    </NavigationPage.BarBackgroundColor>
</NavigationPage>

CustomNavigationPage 的代码隐藏是：

public partial class CustomNavigationPage : NavigationPage
{
    public bool IgnoreLayoutChange { get; set; } = false;

    protected override void OnSizeAllocated(double width, double height)
    {
        if (!IgnoreLayoutChange)
            base.OnSizeAllocated(width, height);
    }

    public CustomNavigationPage() : base()
    {
        InitializeComponent();
    }

    public CustomNavigationPage(Page root) : base(root)
    {
        InitializeComponent();
    }
}

CustomRenderer 是：

public class CustomNavigationRenderer : NavigationRenderer
{
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        UINavigationBar.Appearance.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
        UINavigationBar.Appearance.ShadowImage = new UIImage();
        UINavigationBar.Appearance.BackgroundColor = UIColor.Clear;
        UINavigationBar.Appearance.TintColor = UIColor.White;
        UINavigationBar.Appearance.BarTintColor = UIColor.Clear;
        UINavigationBar.Appearance.Translucent = true;
        UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes()
        {
            Font = UIFont.FromName("HelveticaNeue-Light", (nfloat)20f),
            TextColor = UIColor.White
        });
    }

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
        }

        base.Dispose(disposing);
    }
}

我已经在 :

上测试过该应用程序

• 模拟器：iOS 11.3 上的 iPhone 6
• 我的设备：iPhone 6 在 iOS 10.1 上

我们可以看到结果不一样。在模拟器和iOS 11.3上，导航栏和内容有差距：

但在我的iOS 10.1下的设备上，没有间隙，内容显示在导航栏“下方”：

页面是这样构建的，但是所有页面的渲染都是一样的：

<?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:effects="clr-namespace:ConferenceVision.Effects"
             xmlns:local="clr-namespace:ConferenceVision.Views.Renderers"
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"              
             ios:Page.UseSafeArea="true"
             Title="About"
             x:Class="ConferenceVision.Views.AboutView">
    <ContentPage.Content>
            <ScrollView>
                <ScrollView.Margin>
                    <OnPlatform x:TypeArguments="Thickness" Default="15,0">
                        <On Platform="Android" Value="15,50,15,0"/>
                    </OnPlatform>
                </ScrollView.Margin>
                ...
            </ScrollView>
    </ContentPage.Content>
</ContentPage>

怎么解释呢？这可能与UseSafeArea 的使用有关吗？ 我知道我的设备上有一个“旧”版本，但在我的应用中我必须覆盖最多的用户。

Answer 1

iOS 的区别与 SafeArea 的使用有关。在 iOS 11+ 中，安全区域添加了一个 paddind。

ios:Page.UseSafeArea="true"

Answer 2

那个版本是正常的。您必须始终使用每个移动操作系统的最后 3 个版本，因为它们的市场份额为您提供更好的稳定性、兼容性和公众接受度。

这是世界上 10.1 的数字（来自NetMarketshare）

只是告诉用户使用更新的版本。