Xamarin 窗体 Shell TabBar 圆角 [英] Xamarin Forms Shell TabBar Rounded Corner

问题描述

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

I'd like to know if there's a renderer to allows me to use a rounded corner in the tabbar using Shell, like in the image above.

推荐答案

你可以在你的自定义 shellrenderer 中做到:

You could do it in your custom shellrenderer :

在您的 android 项目中创建 MyShellRenderer:

create the MyShellRenderer in your android project:

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

在你的Resources/drawable中创建圆角drawablebottombackground.xml:

create the round corner drawable bottombackground.xml in your 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();
      }
   }
 }

MyShellTabBarAppearanceTranker 类:

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)
    {
        
    }
}

这篇关于Xamarin 窗体 Shell TabBar 圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！