如何在Xamarin Shell TabBar中实现内容与底部导航栏重叠

问题背景 #

已通过Android自定义Shell渲染器移除TabBar背景仅保留图标，现需让内容页面与底部导航栏重叠，项目高度依赖Shell，不采用纯XAML方案。

解决方案 #

在现有自定义Shell渲染器基础上，通过调整Android端Shell的布局参数与内容容器属性，实现内容区域延伸至底部导航栏下方：

1. 修改自定义Shell渲染器代码 #

重写OnCreateView方法，调整Shell根布局的裁剪属性与内边距，同时确保底部导航栏层级在内容之上：

[assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]
namespace App4.Droid
{
    public class CustomShellRenderer : ShellRenderer
    {
        public CustomShellRenderer(Context context) : base(context)
        {
        }

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

        protected override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
        {
            var view = base.OnCreateView(inflater, container, savedInstanceState);
            
            if (view is ViewGroup rootLayout)
            {
                // 关闭内容裁剪，允许内容超出容器边界
                rootLayout.ClipToPadding = false;
                rootLayout.ClipChildren = false;
                
                // 获取底部导航栏实际高度
                int navBarHeight = 0;
                var resourceId = Context.Resources.GetIdentifier("design_bottom_navigation_height", "dimen", "android");
                if (resourceId > 0)
                {
                    navBarHeight = Context.Resources.GetDimensionPixelSize(resourceId);
                }

                // 设置负底部内边距，让内容区域向下延伸覆盖导航栏
                rootLayout.SetPadding(rootLayout.PaddingLeft, rootLayout.PaddingTop, rootLayout.PaddingRight, -navBarHeight);
            }

            return view;
        }
    }

    public class CustomShellBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {
        }

        public void ResetAppearance(BottomNavigationView bottomView)
        {
        }

        public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            (bottomView.Parent as LinearLayout)?.SetBackgroundColor(Color.Transparent.ToAndroid());
            bottomView.SetBackgroundColor(Color.Transparent.ToAndroid());
            bottomView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
            
            // 确保导航栏在内容上方显示
            bottomView.BringToFront();
        }
    }
}

2. 关键调整说明 #

• 关闭裁剪属性：ClipToPadding和ClipChildren设为false，解除内容区域的边界限制，允许内容延伸至底部导航栏区域。
• 适配导航栏高度：通过系统资源获取底部导航栏的实际高度，精准设置负内边距，确保内容刚好覆盖导航栏区域。
• 提升导航栏层级：调用BringToFront()保证底部导航栏始终显示在内容上层，避免被内容完全遮挡。

内容的提问来源于stack exchange，提问作者Sunday