Xamarin.Forms：如何为TabBar添加渐变颜色（iOS与Android双端适配）

我之前做Xamarin.Forms项目时刚好解决过这个问题——TabBar本身确实没有内置的渐变背景属性，但咱们可以通过自定义渲染器分别给iOS和Android平台实现这个效果，步骤其实挺清晰的，下面一步步来：

首先在共享项目里创建一个继承自TabbedPage的自定义类，用来绑定渐变的起始和结束颜色，这样能在XAML里灵活配置：

using Xamarin.Forms;

namespace YourAppNamespace
{
    public class GradientTabBar : TabbedPage
    {
        // 渐变起始颜色属性
        public static readonly BindableProperty StartColorProperty =
            BindableProperty.Create(nameof(StartColor), typeof(Color), typeof(GradientTabBar), Color.DeepSkyBlue);

        public Color StartColor
        {
            get => (Color)GetValue(StartColorProperty);
            set => SetValue(StartColorProperty, value);
        }

        // 渐变结束颜色属性
        public static readonly BindableProperty EndColorProperty =
            BindableProperty.Create(nameof(EndColor), typeof(Color), typeof(GradientTabBar), Color.Purple);

        public Color EndColor
        {
            get => (Color)GetValue(EndColorProperty);
            set => SetValue(EndColorProperty, value);
        }
    }
}

在iOS项目中创建自定义渲染器，通过CAGradientLayer给原生UITabBar添加渐变背景：

using CoreAnimation;
using CoreGraphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(GradientTabBar), typeof(GradientTabBarRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class GradientTabBarRenderer : TabbedRenderer
    {
        private CAGradientLayer _gradientLayer;

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null && TabBar != null)
            {
                // 创建渐变层并插入到TabBar底层（避免遮挡标签和图标）
                _gradientLayer = new CAGradientLayer();
                _gradientLayer.Frame = TabBar.Bounds;
                // 设置渐变方向：这里是从左到右，改成(0,0)到(0,1)就是从上到下
                _gradientLayer.StartPoint = new CGPoint(0, 0.5);
                _gradientLayer.EndPoint = new CGPoint(1, 0.5);
                TabBar.Layer.InsertSublayer(_gradientLayer, 0);

                // 更新渐变颜色
                UpdateGradientColors();
            }
        }

        // 监听颜色属性变化，动态更新渐变
        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == GradientTabBar.StartColorProperty.PropertyName || 
                e.PropertyName == GradientTabBar.EndColorProperty.PropertyName)
            {
                UpdateGradientColors();
            }
        }

        // 布局变化时重新设置渐变层尺寸（比如屏幕旋转）
        public override void ViewWillLayoutSubviews()
        {
            base.ViewWillLayoutSubviews();
            if (_gradientLayer != null)
            {
                _gradientLayer.Frame = TabBar.Bounds;
            }
        }

        private void UpdateGradientColors()
        {
            if (_gradientLayer == null || Element is not GradientTabBar gradientTabBar) return;

            _gradientLayer.Colors = new CGColor[]
            {
                gradientTabBar.StartColor.ToCGColor(),
                gradientTabBar.EndColor.ToCGColor()
            };
        }
    }
}

Android这边需要操作原生的BottomNavigationView，我们用代码创建GradientDrawable来设置渐变背景（也可以用XML资源，后面会提）：

using Android.Content;
using Android.Graphics.Drawables;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(GradientTabBar), typeof(GradientTabBarRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    public class GradientTabBarRenderer : TabbedPageRenderer
    {
        public GradientTabBarRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null && View != null)
            {
                UpdateGradientBackground();
            }
        }

        // 监听颜色属性变化
        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == GradientTabBar.StartColorProperty.PropertyName || 
                e.PropertyName == GradientTabBar.EndColorProperty.PropertyName)
            {
                UpdateGradientBackground();
            }
        }

        private void UpdateGradientBackground()
        {
            if (Element is not GradientTabBar gradientTabBar) return;

            // 找到原生BottomNavigationView
            var bottomNav = FindViewById<AndroidX.Navigation.UI.BottomNavigationView>(Resource.Id.bottomtab_tabbar);
            if (bottomNav == null) return;

            // 创建渐变Drawable，LeftRight对应从左到右渐变，TopBottom是从上到下
            var gradientDrawable = new GradientDrawable(
                GradientDrawable.Orientation.LeftRight,
                new int[] { 
                    gradientTabBar.StartColor.ToAndroid(), 
                    gradientTabBar.EndColor.ToAndroid() 
                });

            // 设置为BottomNavigationView的背景
            bottomNav.SetBackground(gradientDrawable);
        }
    }
}

如果想要用XML固定渐变颜色，可以在Android项目的Resources/drawable下创建gradient_tabbar.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#00BFFF"
        android:endColor="#9400D3"
        android:angle="0" /> <!-- angle=0是左到右，90是上到下 -->
</shape>

然后把渲染器里的UpdateGradientBackground方法改成：

bottomNav.SetBackgroundResource(Resource.Drawable.gradient_tabbar);

最后替换原来的TabbedPage为我们的GradientTabBar，并设置渐变颜色：

<?xml version="1.0" encoding="utf-8" ?>
<local:GradientTabBar xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage"
             StartColor="#00BFFF"
             EndColor="#9400D3">

    <ContentPage Title="首页">
        <Label Text="首页内容" HorizontalOptions="Center" VerticalOptions="Center"/>
    </ContentPage>

    <ContentPage Title="设置">
        <Label Text="设置页面" HorizontalOptions="Center" VerticalOptions="Center"/>
    </ContentPage>

</local:GradientTabBar>

注意事项 #

• 确保自定义渲染器的ExportRenderer特性中，类型和命名空间完全匹配
• iOS上如果TabBar有半透明效果，可能需要调整_gradientLayer的Opacity属性
• Android上如果找不到bottomtab_tabbar，可以检查Xamarin.Forms版本，有些版本的ID是tabbar

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