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

Question

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

我一直在尝试在 android 上实现这一点，首先使用 ShellTabLayoutAppearanceTracker 和自定义 ShellRenderer，但我什至无法更改tablayout.

此外，尽管我的标签栏中有 4 个标签，但 tabLayout.TabCount 只有 returns 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());
                }
            }
        }
    }
}

Answer 1

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

[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;
    }
}
}

你可以看看下面的帖子：

但是我在Android中没有找到更改selected标签背景的方法，如果找到这个我会更新它。

Answer 2

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

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

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

Xamarin Forms Shell how to customize tab with custom renderers

android

xamarin.forms

android-tablayout

xamarin.forms.shell