Xamarin формирует Shell Custom icon для выбранной вкладки - PullRequest
Новая
       30

Xamarin формирует Shell Custom icon для выбранной вкладки

0 голосов
/ 31 октября 2019

Я играю с оболочкой COOL xamarin, но я не нашел способа изменить значок выбранной вкладки. 

<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 для этой вкладки, только если она выбрана. Та же логика должна применяться к другим вкладкам.

Я думаю, что я заблудился в решениях, найденных в Интернете. Они говорят о пользовательских средствах визуализации (ShellTabLayoutAppearanceTracker), визуальных состояниях, эффектах и ​​т. Д. Но я не знаю, возможно ли это и каково идеальное решение

1 Ответ

2 голосов
/ 31 октября 2019

Вам необходимо использовать пользовательский рендерер оболочки, чтобы настроить выбранный значок панели вкладок на каждой платформе.

В 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....

        }
    }
}

Я загрузил пример проекта здесь , и вы можете проверить его.

...