Xamarin Forms Shell TabBar 圆角

Question

我想知道是否有渲染器允许我使用 Shell 在选项卡栏中使用圆角，如上图所示。

Answer 1

您可以在自定义 shellrenderer 中执行此操作：

在你的 android 项目中创建MyShellRenderer：

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

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

定义MyShellBottomNavViewAppearanceTracker：

namespace ShellDemo.Droid
{
  class MyShellBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
    {
       public void Dispose()
       {
       }

       public void ResetAppearance(BottomNavigationView bottomView)
       {
       }

        public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
       
           bottomView.SetBackgroundResource(Resource.Drawable.bottombackground);
        }
     }
}

bottombackground.xml在您的中创建圆角可绘制Resources/drawable：

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#f00" />
  <corners android:topLeftRadius="20dp"
     android:topRightRadius="20dp"
  />
</shape>

效果：

iOS 更新：

与安卓类似

MyShellRenderer：ShellRenderer类

 [assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
 namespace your namepace
 {
   class MyShellRenderer:ShellRenderer
   {
      protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
      {
          return new MyShellTabBarAppearanceTrancker();
      }
   }
 }

MyShellTabBarAppearanceTrancker类：

class MyShellTabBarAppearanceTrancker : IShellTabBarAppearanceTracker
{
    public void Dispose()
    {

    }

    public void ResetAppearance(UITabBarController controller)
    {
      
    }

    public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
    {
       
        UIBezierPath uIBezierPath = UIBezierPath.FromRoundedRect(controller.TabBar.Bounds, UIRectCorner.TopLeft | UIRectCorner.TopRight, new CoreGraphics.CGSize(30, 30));
        CAShapeLayer cAShapeLayer = new CAShapeLayer();
        cAShapeLayer.Frame = controller.TabBar.Bounds;
        cAShapeLayer.Path = uIBezierPath.CGPath;
        controller.TabBar.Layer.Mask = cAShapeLayer;         
    }

    public void UpdateLayout(UITabBarController controller)
    {
        
    }
}