.NET MAUI中CustomAndroidShellHandler自定义底部标签栏中心按钮阴影问题

问题描述 #

在.NET MAUI的CustomAndroidShellHandler中，自定义的底部标签栏中心按钮在Android端无法显示阴影，但iOS端可正常显示。以下是Android端Handler的实现代码，需排查原因并解决：

原代码 #

public override View? OnCreateView(LayoutInflater inflater, ViewGroup? container, Bundle? savedInstanceState)
{
    var view = base.OnCreateView(inflater, container, savedInstanceState);
    if (Context is not null && ShellItem is ArtemisBar { CenterVisible: true } tabBar)
    {
        var rootLayout = new FrameLayout(Context)
        {
            LayoutParameters = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent)
        };

        rootLayout.AddView(view);
        const int middleViewSize = 100;
        var middleViewLayoutParams = new FrameLayout.LayoutParams(
                ViewGroup.LayoutMargins.WrapContent,
                ViewGroup.LayoutMargins.WrapContent,
                GravityFlags.CenterHorizontal | GravityFlags.Bottom)
        {
            BottomMargin = 40
        };
        var middleView = new Button(Context)
        {
            LayoutParameters = middleViewLayoutParams
        };
        middleView.Click += delegate
        {
            tabBar.CenterCommand?.Execute(null);
        };
        middleView.SetPadding(0, 0, 0, 0);
        middleView.SetShadowLayer(5,0,-20,Colors.DarkGray.ToPlatform());
        if (tabBar.CenterBackgroundColor is not null)
        {
            var backgroundView = new View(Context)
            {
                LayoutParameters = middleViewLayoutParams
            };
            var backgroundDrawable = new GradientDrawable();
            backgroundDrawable.SetShape(ShapeType.Rectangle);
            backgroundDrawable.SetCornerRadius(middleViewSize / 4f);
            backgroundDrawable.SetColor(tabBar.CenterBackgroundColor.ToPlatform(Colors.Green));
            backgroundDrawable.Thickness = 2;
            backgroundView.SetBackground(backgroundDrawable);
            backgroundView.SetElevation(1);
            rootLayout.AddView(backgroundView);
        }
                
        tabBar.CenterIcon?.LoadImage(Application.Current!.MainPage!.Handler!.MauiContext!, result =>
        {
            if (result?.Value is not BitmapDrawable drawable || drawable.Bitmap is null)
            {
                return;
            }
            const int padding = 20;
            middleView.LayoutParameters = new FrameLayout.LayoutParams(
            drawable.Bitmap.Width - padding, 
            drawable.Bitmap.Height - padding,
            GravityFlags.CenterHorizontal | GravityFlags.Bottom)
            {
                BottomMargin = middleViewLayoutParams.BottomMargin - (int)(.65 * padding)
            };
            middleView.SetShadowLayer(2,0,0,Colors.LightGray.ToPlatform());
            middleView.SetBackground(drawable);
            middleView.SetShadowLayer(8,0,-100, Colors.DarkGray.ToPlatform());
            middleView.SetMinimumHeight(0);
            middleView.SetMinimumWidth(0);
            middleView.SetElevation(1);
        });

        rootLayout.AddView(middleView);
        return rootLayout;
    }

    return view;
}

问题原因分析 #

1. 阴影参数错误：最后一次调用SetShadowLayer(8,0,-100,...)时，垂直偏移量设为-100，阴影会被向上移出屏幕，完全不可见。
2. 背景Drawable影响：将BitmapDrawable直接设为Button背景时，Android无法基于透明的Bitmap生成有效阴影，因为阴影需要依附于有形状的背景。
3. Elevation值过低：按钮的Elevation仅设为1，Android阴影需要足够的高度才能渲染显示，过低的值会导致阴影被其他元素遮挡或不渲染。
4. 视图层级冲突：backgroundView的Elevation与按钮相同，可能遮挡按钮的阴影；且重复调用SetShadowLayer会覆盖之前的设置，导致参数混乱。

解决方案 #

修改步骤： #

1. 修正阴影参数：调整垂直偏移量为合理值（如5），让阴影显示在按钮下方。
2. 设置有效背景：给按钮添加带圆角的透明背景Drawable，让阴影有可依附的形状，再将图标设为前景避免覆盖阴影。
3. 提高Elevation值：将按钮的Elevation设为更高的值（如10），确保阴影层级高于其他视图。
4. 调整视图层级：降低backgroundView的Elevation（如0），避免遮挡按钮阴影；移除重复的SetShadowLayer调用。

修改后的核心代码片段： #

// 移除初始的SetShadowLayer调用，统一在LoadImage回调中设置
// middleView.SetShadowLayer(5,0,-20,Colors.DarkGray.ToPlatform());

if (tabBar.CenterBackgroundColor is not null)
{
    var backgroundView = new View(Context)
    {
        LayoutParameters = middleViewLayoutParams
    };
    var backgroundDrawable = new GradientDrawable();
    backgroundDrawable.SetShape(ShapeType.Rectangle);
    backgroundDrawable.SetCornerRadius(middleViewSize / 4f);
    backgroundDrawable.SetColor(tabBar.CenterBackgroundColor.ToPlatform(Colors.Green));
    backgroundDrawable.Thickness = 2;
    backgroundView.SetBackground(backgroundDrawable);
    // 降低backgroundView的Elevation，避免遮挡按钮阴影
    backgroundView.SetElevation(0);
    rootLayout.AddView(backgroundView);
}
                
tabBar.CenterIcon?.LoadImage(Application.Current!.MainPage!.Handler!.MauiContext!, result =>
{
    if (result?.Value is not BitmapDrawable drawable || drawable.Bitmap is null)
    {
        return;
    }
    const int padding = 20;
    middleView.LayoutParameters = new FrameLayout.LayoutParams(
        drawable.Bitmap.Width - padding, 
        drawable.Bitmap.Height - padding,
        GravityFlags.CenterHorizontal | GravityFlags.Bottom)
    {
        BottomMargin = middleViewLayoutParams.BottomMargin - (int)(.65 * padding)
    };

    // 设置带圆角的透明背景，作为阴影的依附形状
    var buttonBackground = new GradientDrawable();
    buttonBackground.SetShape(ShapeType.Rectangle);
    buttonBackground.SetCornerRadius((drawable.Bitmap.Height - padding)/2f);
    buttonBackground.SetColor(Colors.Transparent.ToPlatform());
    middleView.SetBackground(buttonBackground);

    // 将图标设为前景，避免覆盖阴影
    middleView.SetForeground(drawable);

    // 设置合理的阴影参数：半径8，水平偏移0，垂直偏移5，深灰色
    middleView.SetShadowLayer(8, 0, 5, Colors.DarkGray.ToPlatform());
    middleView.SetMinimumHeight(0);
    middleView.SetMinimumWidth(0);
    // 提高Elevation确保阴影显示
    middleView.SetElevation(10);
});

额外优化建议 #

• 可以考虑使用CardView包裹按钮，利用CardView自带的阴影效果，实现更稳定的阴影展示。
• 避免在回调中重复修改布局参数，尽量一次性设置完成，减少UI渲染冲突。

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