Xamarin.Forms:如何在 Android 上禁用箭头到汉堡包的过渡动画?

Xamarin.Forms: how to disable arrow to hamburger transition animation on Android?

我已经使用 Xamarin.Forms 创建了一个 基本示例应用程序,我试图在其中重新生成一个 UI,例如 Twitter 或 Instagram:

  • 一个MasterDetail页面为主页面,这里默认"hamburger"图标 替换为自定义图标
  • a "bottom" TabbedPage 作为 MasterDetail 页面的详细信息
  • 允许在 TabbedPage
  • 中实现 top Tabs 的控件
  • ContentPages 托管在 NavigationPage 中 TabbedPage 的选项卡

因此,我的应用程序的 页面架构 如下所示:

|-- MasterDetailPage
..|--TabbedPage
....|-- NavigationPage
......|-- ContentPage

为了实现这一点,我使用了:

  • Naxam BottomTabedPage,在 Android 上实现 "bottom" TabbedPage(如 BottomNavigationView)
  • Syncfusion SfTabView 控件实现 "top" 选项卡
  • 一个自定义渲染器来管理自定义图标的使用,作为主级别的"hamburger"图标,以及子级别的"arrow"图标

这个渲染器看起来像这样:

public class CustomNavigationPageRenderer : MasterDetailPageRenderer
{
    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);
        var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);

        for (var i = 0; i < toolbar.ChildCount; i++)
        {
            var imageButton = toolbar.GetChildAt(i) as ImageButton;
            var drawerArrow = imageButton?.Drawable as DrawerArrowDrawable;
            if (drawerArrow == null)
                continue;

            bool displayBack = false;
            var app = Xamarin.Forms.Application.Current;
            //var navPage = ((app.MainPage.Navigation.ModalStack[0] as MasterDetailPage).Detail as NavigationPage);
            var detailPage = (app.MainPage as MasterDetailPage).Detail;
            if (detailPage.GetType() == typeof(BottomTp.Views.NaxamMainPage))
            {
                var tabPage = detailPage as BottomTabbedPage;
                var curPage = tabPage.CurrentPage;
                var navPageLevel = curPage.Navigation.NavigationStack.Count;
                if (navPageLevel > 1)
                    displayBack = true;
            }

            if (!displayBack)
                ChangeIcon(imageButton, Resource.Drawable.icon);
        }
    }

    private void ChangeIcon(ImageButton imageButton, int id)
    {
        if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Lollipop)
            imageButton.SetImageDrawable(Context.GetDrawable(id));
        imageButton.SetImageResource(id);
    }
}

这很好用,但是 最后一个问题 当我 "return" 到主页时:

  • 有默认的从箭头到"hamburger"图标的过渡动画
  • 此后,"hamburger" 图标将替换为我的 自定义图标

这里有一个简短的动画来说明这个问题:

有办法关闭这个动画吗?我该如何解决这个问题?

您需要使用自定义 NavigationPage。这是我的 demo 基于你的。

实现它需要三个步骤:

1) 添加一个名为 CustomControl 的文件夹,创建一个 class MyNavigationPage Inherited from NavigationPage:

namespace BottomTp.CustomControl
{
    public class MyNavigationPage : NavigationPage
    {
        public MyNavigationPage() { }
        public MyNavigationPage(Page root) : base(root) { }
    }
}

2) 更改 NaxamMainPage.xaml 文件中的标签,

在您的 naxam:BottomTabbedPage 标签中添加 xmlns:controls="clr-namespace:BottomTp.CustomControl;assembly=BottomTp",然后将您的 NavigationPage 标签更改为 controls:MyNavigationPage:

<controls:MyNavigationPage Title="Browse" Icon="md-view-list"
                x:Name="NP1">
    <x:Arguments>
        <views:SfItemsPage   />
    </x:Arguments>
</controls:MyNavigationPage>
<controls:MyNavigationPage Title="About" Icon="md-help"
                x:Name="NP2">
    <x:Arguments>
        <views:AboutPage />
    </x:Arguments>
</controls:MyNavigationPage>

3) 在 Android 平台上创建自定义渲染 MyCustomNavigationPageRenderer

[assembly: ExportRenderer(typeof(MyNavigationPage), typeof(MyCustomNavigationPageRenderer))]
namespace BottomTp.Droid.Renderers
{
    class MyCustomNavigationPageRenderer : NavigationPageRenderer
    {
        public MyCustomNavigationPageRenderer(Context c) : base(c)
        { }

        protected override Task<bool> OnPopToRootAsync(Page page, bool animated)
        {
            return base.OnPopToRootAsync(page, false);
        }

        protected override Task<bool> OnPopViewAsync(Page page, bool animated)
        {
            return base.OnPopViewAsync(page, false);
        }

        protected override Task<bool> OnPushAsync(Page view, bool animated)
        {
            return base.OnPushAsync(view, false);
        }

    }
}