Question

我正在使用 Xamarin.Forms应用，在其中我需要实现透明/半透明导航栏。

我研究了视觉会议 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

我的设备： iOS 10.1

iPhone 6

我们可以看到结果不相同。在模拟器和 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）

只需告诉用户使用更新的版本即可。

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

2 个答案: