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);
}
}
}
我已经使用 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);
}
}
}