如何向 Xamarin Forms App Shell Tabbar 添加顶部边框

Posted 2023-03-25

【中文标题】如何向 Xamarin Forms App Shell Tabbar 添加顶部边框

【英文标题】：How to add a top border to Xamarin Forms App Shell Tabbar

【发布时间】：2021-12-09 11:09:32

【问题描述】：

使用 Xamarin Forms App Shell 模板，很明显如何更改标签栏的背景颜色，但我看不到添加顶部边框甚至阴影的方法，这在许多标签栏中很常见样式。

【问题讨论】：

也许更标准的做法是为每个标签页添加底部边框？

查看 github 上的 XF 源代码，我会说并非所有平台都自然支持，所以它不是 XF 中的选项。不幸的是，Shell 的实现很复杂。不同平台上的ShellRenderers 是不同的。我没有看到任何简单的方法来修改渲染器，也没有“欺骗”（“覆盖”Shell 页面顶部的一些装饰）。可能无法使用 Shell，并且无法对外观进行这种程度的控制。

【参考方案1】：

安卓：

您可以使用 CreateBottomNavViewAppearanceTracker 更改底部视图的内容。

  [assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
namespace ShellDemo.Droid

class ShellCustomRenderer : ShellRenderer


    public ShellCustomRenderer(Context context) : base(context)
    
    

    protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
    
        return new CustomBottomNavAppearance();
    


public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker

    public void Dispose()
    

    

    public void ResetAppearance(BottomNavigationView bottomView)
    

    

    public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    
        //put your code here
       
    

Shadow：在 android 的 Drawable 中创建 Shadow.xml。

<shape 
 xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
 android:startColor="@android:color/holo_orange_light"
 android:endColor="@android:color/transparent"
 android:angle="90" />
</shape>

然后在SetAppearance中将阴影设置为bottomview的背景。

bottomView.SetBackgroundResource(Resource.Drawable.shadow);

底视图的边界线。在Android的Drawable中创建一个Border_top.xml。

 <layer-list 
 xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:top="5dip">
   <shape>
     <solid android:color="@android:color/holo_green_light"> 
     </solid>
  </shape>
 </item>
 </layer-list>

然后设置为背景。

bottomView.SetBackgroundResource(Resource.Drawable.border_top);

iOS：

您可以使用 CreateTabBarAppearanceTracker 来更改标签栏。

  [assembly: ExportRenderer(typeof(AppShell), typeof(ShellCustomRenderer))]
namespace ShellDemo.ios

public class ShellCustomRenderer : ShellRenderer

    protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
    
        return new TabBarAppearance();
    



public class TabBarAppearance : IShellTabBarAppearanceTracker

    public void Dispose()
    

    

    public void ResetAppearance(UITabBarController controller)
    
        
    

    public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
    
    

    public void UpdateLayout(UITabBarController controller)
    
    

阴影：iOS 有一个默认的阴影。

【讨论】：

这当然是可以进行更改的地方，但您还没有包括进行实际的边界更改，我也看不出该怎么做。

我已经更新了我的回复。请检查一下。