Xamarin使用TabbedPage自定义渲染器后Tabbar隐藏不显示问题

你当前自定义渲染器继承的TabbedRenderer仅适用于Android原生顶部Tabbar的渲染场景。你在XAML中通过Android平台特定属性将ToolbarPlacement设置为Bottom时，Xamarin.Forms默认会调用Xamarin.Forms.Platform.Android.AppCompat命名空间下的TabbedPageRenderer渲染底部Tabbar，自定义渲染器继承父类不匹配导致Tabbar无法正常渲染，因此出现添加自定义渲染器后Tabbar消失的问题。

1. 替换自定义渲染器的父类 #

调整渲染器的继承逻辑，适配底部Tabbar的渲染器父类，如需修改标签字体的逻辑可参考下方完整代码：

using Android.Content;
using Android.Graphics;
using Android.Text;
using Android.Text.Style;
using Google.Android.Material.BottomNavigation;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;
using ***.Droid;

// 全局替换所有TabbedPage可保留当前配置
[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace ***.Droid
{
    class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement == null || e.OldElement != null)
                return;

            // 适配底部Tabbar的字体修改逻辑
            if (GetChildAt(0) is BottomNavigationView bottomNav)
            {
                var menu = bottomNav.Menu;
                for (int i = 0; i < menu.Size(); i++)
                {
                    var menuItem = menu.GetItem(i);
                    var titleSpan = new SpannableString(menuItem.TitleFormatted);
                    // 修改字体样式、大小
                    titleSpan.SetSpan(new TypefaceSpan(Typeface.SansSerif), 0, titleSpan.Length(), SpanTypes.ExclusiveExclusive);
                    titleSpan.SetSpan(new AbsoluteSizeSpan(14, true), 0, titleSpan.Length(), SpanTypes.ExclusiveExclusive);
                    menuItem.SetTitle(titleSpan);
                }
            }
        }
    }
}

2. 可选优化 #

如果不需要全局修改所有TabbedPage的样式，可先在共享项目中创建自定义TabbedPage子类：

public class CustomTabbedPage : TabbedPage {}

将XAML中你的TabbedPage根节点改为CustomTabbedPage，再将渲染器注册的第一个参数改为typeof(CustomTabbedPage)，避免影响其他页面的TabbedPage渲染。

自定义字体配置 #

如果需要使用自定义字体文件，将字体文件放入Android项目的Assets/Fonts目录（需将文件属性设置为AndroidAsset，替换TypefaceSpan部分代码即可：

var customTypeface = Typeface.CreateFromAsset(Context.Assets, "Fonts/你的字体文件名.ttf");
titleSpan.SetSpan(new CustomTypefaceSpan("", customTypeface), 0, titleSpan.Length(), SpanTypes.ExclusiveExclusive);

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