【问题标题】:Change hamburger icon in master detail navigation xamarin forms更改主详细信息导航 xamarin 表单中的汉堡包图标
【发布时间】:2018-04-27 10:47:33
【问题描述】:

我正在处理 Xamarin 表单,我需要在成功登录屏幕后显示主详细信息导航。我想更改默认汉堡图标但无法更改。

请看下面我正在使用的代码。

由于我的应用有登录屏幕,所以我不想在登录屏幕上显示任何导航。我只是在app.xaml.cs设置主页

public App()
{
    InitializeComponent();

    MainPage = new Login();
}

现在点击登录后,我尝试了以下方法来更改图标,但没有成功

var dashboard = new Dashboard(){Icon = "Menuicon.png" };
Application.Current.MainPage = dashboard;

Dashbaord 是 masterdetail 页面,在其 ctor 上,我正在设置详细页面,如下所示

Detail = new NavigationPage((Page)Activator.CreateInstance(typeof(DashbaordDetail))) { Icon = "Menuicon.png" };

它没有反映新图标

【问题讨论】:

    标签: xamarin.forms


    【解决方案1】:

    您应该使用自定义渲染器。

    在您的 Android 项目中,如下所示:

    [assembly: ExportRenderer(typeof(CustomIcon.Views.MainPage), typeof(IconNavigationPageRenderer))]
    namespace CustomIcon.Droid
    {
        public class IconNavigationPageRenderer : MasterDetailPageRenderer
        {
            private static Android.Support.V7.Widget.Toolbar GetToolbar() => (CrossCurrentActivity.Current?.Activity as MainActivity)?.FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
    
            protected override void OnLayout(bool changed, int l, int t, int r, int b)
            {
                base.OnLayout(changed, l, t, r, b);
                var toolbar = GetToolbar();
                if (toolbar != null)
                {
                    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;
    
                        imageButton.SetImageDrawable(Forms.Context.GetDrawable(Resource.Drawable.newIcon));
                    }
                }
            }
        }
    }
    

    在您的 iOS 项目中,仅在您的 PCL 项目中使用 xaml 文件中的相同图标,如下所示:

    <?xml version="1.0" encoding="utf-8" ?>
    <MasterDetailPage  xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CustomIcon.Views;assembly=CustomIcon"
             Title="MainPage"
             Icon="newIcon.png"
             x:Class="CustomIcon.Views.MainPage">
    <MasterDetailPage.Master>
        <local:MasterPage x:Name="masterPage" />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:Page1 />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
    

    有关更多信息,请参阅我在 github 上的 repo:https://github.com/wilsonvargas/CustomIconNavigationPage

    【讨论】:

    • 嗨@Wilson Vargas,我研究了你的样本,但我有一个问题。我添加了第二页来模拟导航。在这第二页上,“back”图标被“newIcon”取代,该图标用作Hamburger 图标,用于打开主详细信息页面。 当它不是显示的 MasterDetail 页面的主要级别时,有没有办法保留“后退”图标?谢谢!
    • @Gold.strike 同样的问题,我的是我删除了汉堡图标,这也导致删除了后退按钮
    • 只有我一个没有找到CrossCurrentActivity吗?
    • @AhmedSalah 你需要安装包"CurrentActivityPlugin"
    • @WilsonVargas GetToolbar() 每当我从登录页面(未包含在 NavigationPage 中)切换到 MainePage 时都会返回 null。
    【解决方案2】:

    我应用了这个调整,它帮助了我。现在我也可以在导航后看到返回按钮

    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);
        if (toolbar != null)
        {
            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 detailPage = (app.MainPage as MasterDetailPage).Detail;
                var navPageLevel = detailPage.Navigation.NavigationStack.Count;
                if (navPageLevel > 1)
                    displayBack = true;
                if (!displayBack)
                    ChangeIcon(imageButton, Resource.Drawable.iconMenu2);
                if (displayBack)
                    ChangeIcon(imageButton, Resource.Drawable.back1);
            }
        }
    }
    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);
    }
    

    【讨论】:

    • 你也可以帮忙使用 iOS 渲染器吗?
    • @Blu 我建议在您的基本页面上创建一个自定义布局并隐藏您的导航栏并在您的所有内容页面中使用该自定义布局
    猜你喜欢
    • 2018-04-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-04-13
    • 2016-02-02
    • 1970-01-01
    • 2020-11-20
    • 1970-01-01
    相关资源
    最近更新 更多