Xamarin Forms Shell如何使用自定义渲染器自定义选项卡

如何解决Xamarin Forms Shell如何使用自定义渲染器自定义选项卡

我想实现此设计（以渐变突出显示所选标签）：

我一直在尝试首先使用ShellTabLayoutAppearanceTracker和自定义ShellRenderer在android上实现此功能，但我什至无法更改tablayout中任何标签的背景颜色。

即使我的标签栏中有4个标签，tabLayout.TabCount也只会返回1。显然，这一切我都不了解。

您将如何处理？ iOS解决方案的加分点。

到目前为止，这是我的代码：

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

        protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
        {
            return new CustomShellTabLayoutAppearanceTracker(this);
        }
    }

    public class CustomShellTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
    {
        public CustomShellTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext) { }

        public override void SetAppearance(TabLayout tabLayout,ShellAppearance appearance)
        {
            base.SetAppearance(tabLayout,appearance);

            for (var i = 0; i < tabLayout.TabCount; i++)
            {
                var tab = tabLayout.GetTabAt(i);
                if (tab.IsSelected)
                {
                    tab.View.Background = new GradientDrawable(/* ... */);
                }
                else
                {
                    tab.View.SetBackgroundColor(appearance.BackgroundColor.ToAndroid());
                }
            }
        }
    }
}

解决方法

我只是找到一种更改Xamarin.Shell的方法，因此在ios中选择Tab backgroud，

[assembly: ExportRenderer(typeof(AppShell),typeof(MyShellRenderer))]
 namespace App434.iOS
 {
public class MyShellRenderer : ShellRenderer
{
    protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
    {
        var renderer = base.CreateShellSectionRenderer(shellSection);
        if (renderer != null)
        {
            (renderer as ShellSectionRenderer).NavigationBar.SetBackgroundImage(UIImage.FromFile("monkey.png"),UIBarMetrics.Default);
        }
        return renderer;
    }




    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    {
        return new MyOtherTabBarAppearanceTracker();



    }
}



public class MyOtherTabBarAppearanceTracker : ShellTabBarAppearanceTracker,IShellTabBarAppearanceTracker
{
    void IShellTabBarAppearanceTracker.SetAppearance(UITabBarController controller,ShellAppearance appearance)
    {
        base.SetAppearance(controller,appearance);



        UITabBar tabBar = controller.TabBar;




            CGSize size = new CGSize(tabBar.Frame.Width / 2,tabBar.Frame.Height);



            //Background Color
            UITabBar.Appearance.SelectionIndicatorImage = imageWithColor(size);
            



    }



    public UIImage imageWithColor(CGSize size)
    {
        CGRect rect = new CGRect(0,size.Width,size.Height);
        UIGraphics.BeginImageContext(size);



        using (CGContext context = UIGraphics.GetCurrentContext())
        {
            context.SetFillColor(UIColor.Red.CGColor);
            context.FillRect(rect);
        }



        UIImage image = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();



        return image;
    }
}
}

您可以看看以下主题：

Background color of selected TabBarItem in Xamarin on iOS

但是我找不到在Android中更改所选标签页背景的方法，如果发现此问题，我会对其进行更新。

,

在您的自定义 ShellRenderer 中尝试覆盖 CreateBottomNavViewAppearanceTracker 方法，即

    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    {
        return new BottomNavView(this,shellItem);
    }  

然后在自定义的 BottomNavView 中，您可以执行以下操作：

public class BottomNavView : ShellBottomNavViewAppearanceTracker
{
    public BottomNavView(IShellContext context,ShellItem shellItem) : base(context,shellItem) { }

    public override void SetAppearance(Google.Android.Material.BottomNavigation.BottomNavigationView bottomView,IShellAppearanceElement appearance)
    {
        base.SetAppearance(bottomView,appearance);

        BottomNavigationMenuView bottomNavigationView = bottomView.GetChildAt(0) as BottomNavigationMenuView;

        var firstItem = bottomNavigationView.GetChildAt(0);
        firstItem.Background = new GradientDrawable(GradientDrawable.Orientation.TopBottom,new int[] { Color.Red.ToAndroid(),Color.White.ToAndroid(),Color.Blue.ToAndroid() });
    }
}

这样你就可以绘制渐变，即在这种情况下：