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

Posted 2023-03-12

【中文标题】Xamarin Forms Shell 如何使用自定义渲染器自定义选项卡

【英文标题】：Xamarin Forms Shell how to customize tab with custom renderers

【发布时间】：2020-10-26 21:23:30

【问题描述】：

我想实现这个设计（用渐变突出显示选定的选项卡）：

我一开始一直试图在 android 上使用 ShellTabLayoutAppearanceTracker 和自定义 ShellRenderer 来实现这一点，但我什至无法更改选项卡布局中任何选项卡的背景颜色。

即使我的标签栏中有 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());
                
            
        
    

【参考方案1】：

在您的自定义 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() );
    

然后您可以绘制渐变，即在这种情况下：

【讨论】：

我最终使用了基于 Xam 表单构建的自定义选项卡视图，但显然这是正确的答案。非常感谢！

【参考方案2】：

我只是想办法在ios中改变Xamarin.Shell select Tab背景，像这样：

[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, 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中更改所选标签背景的方法，如果我找到了，我会更新它。