Xamarin 为所选选项卡形成 Shell 自定义图标 [英] Xamarin forms Shell Custom icon for selected tab

问题描述

我正在使用 COOL xamarin shell，但我没有找到更改所选选项卡图标的方法.

I'm playing with the COOL xamarin shell, but I didn't found a way to change icon of the selected tab.

<TabBar Route="sections">
    <Tab Title="home">
        <Tab.Icon>
            <FontImageSource FontFamily="{StaticResource AppIcons}" Glyph="{x:Static framework:Icons.HomePage}" />
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate home:HomePage}" Route="home" />
    </Tab>

目标是仅在此选项卡被选中时使用 Icons.HomePageFilled 而不是 Icons.HomePage.相同的逻辑应该适用于其他标签.

The goal is to use Icons.HomePageFilled instead of Icons.HomePage for this tab only when it's selected. Same logic should apply to other tabs.

我想我迷失在网上找到的解决方案中.他们谈论自定义渲染器(ShellTabLayoutAppearanceTracker)、视觉状态、效果等......但我不知道它是否可行，理想的解决方案是什么

I think I got lost in the solutions found on the web. They talk about Custom renderers(ShellTabLayoutAppearanceTracker), Visual states, effects etc ... But I do not know if it is feasible and what is the ideal solution

推荐答案

您需要使用 自定义渲染器 自定义每个平台上的标签栏选择图标.

You need to use custom renderer of shell to customize the tabbar selected icon on each platform.

在 iOS 中，覆盖 CreateTabBarAppearanceTracker 方法:

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace App30.iOS
{
    public class MyShellRenderer : ShellRenderer
    {
        protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
        {
            var renderer = base.CreateShellSectionRenderer(shellSection);
            if (renderer != null)
            {

            }
            return renderer;
        }

        protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
        {
            return new CustomTabbarAppearance();
        }
    }

    public class CustomTabbarAppearance : IShellTabBarAppearanceTracker
    {
        public void Dispose()
        {

        }

        public void ResetAppearance(UITabBarController controller)
        {

        }

        public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
        {
            UITabBar myTabBar = controller.TabBar;

            if (myTabBar.Items != null)
            {
                UITabBarItem itemOne = myTabBar.Items[0];

                itemOne.Image = UIImage.FromBundle("tab_about.png");
                itemOne.SelectedImage = UIImage.FromBundle("tab_feed.png");


                UITabBarItem itemTwo = myTabBar.Items[1];

                itemTwo.Image = UIImage.FromBundle("tab_feed.png");
                itemTwo.SelectedImage = UIImage.FromBundle("tab_about.png");

                //The same logic if you have itemThree, itemFour....
            }

        }

        public void UpdateLayout(UITabBarController controller)
        {

        }
    }
}

在 Android 中，覆盖 CreateBottomNavViewAppearanceTracker 方法:

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace App30.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new CustomBottomNavAppearance();
        }
    }

    public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {

        }

        public void ResetAppearance(BottomNavigationView bottomView)
        {

        }

        public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
        {
            IMenu myMenu = bottomView.Menu;

            IMenuItem myItemOne = myMenu.GetItem(0);

            if (myItemOne.IsChecked)
            {
                myItemOne.SetIcon(Resource.Drawable.tab_about);
            }
            else
            {
                myItemOne.SetIcon(Resource.Drawable.tab_feed);
            }

            //The same logic if you have myItemTwo, myItemThree....

        }
    }
}

我在这里上传了一个示例项目，您可以查看它.

I uploaded a sample project here and you can check it.

这篇关于Xamarin 为所选选项卡形成 Shell 自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！