Xamarin Android自定义渲染器：移除TabbedPage导航栏图标并缩小字体

作为Xamarin新手，你已经迈出了关键第一步——创建自定义渲染器，接下来我们把剩下的步骤补全，完美解决Android端的导航栏问题：

1. 先在共享项目中定义自定义TabbedPage（可选但推荐） #

如果你只想让特定的TabbedPage应用这个修改，先在共享项目里创建一个自定义类：

public class CustomTabbedPage : TabbedPage
{
    // 这里不需要额外代码，只是作为渲染器的目标类型
}

然后把你原来的<local:name>替换成<local:CustomTabbedPage>。如果想全局修改所有TabbedPage，可以跳过这一步，直接在渲染器中针对TabbedPage类型。

2. 在Android项目中实现完整的自定义渲染器 #

在Android项目的某个文件夹（比如Renderers）下创建CustomTabbedPageRenderer.cs，代码如下：

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace YourAppNamespace.Droid.Renderers
{
    using Android.Content;
    using Android.Graphics.Drawables;
    using Android.Support.Design.Widget;
    using Android.Widget;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.Android;

    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }

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

            if (e.NewElement != null && Control != null)
            {
                // 获取Android原生的BottomNavigationView
                var bottomNav = Control.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);
                if (bottomNav != null)
                {
                    ModifyBottomNavigationItems(bottomNav);
                }
            }
        }

        // 处理屏幕旋转等配置变化，防止修改被重置
        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);

            var bottomNav = Control.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);
            if (bottomNav != null)
            {
                ModifyBottomNavigationItems(bottomNav);
            }
        }

        // 封装修改逻辑，复用代码
        private void ModifyBottomNavigationItems(BottomNavigationView bottomNav)
        {
            // 遍历所有底部导航菜单项
            foreach (var menuItem in bottomNav.Menu)
            {
                // 移除图标：设置透明Drawable
                menuItem.SetIcon(new ColorDrawable(Android.Graphics.Color.Transparent));
            }

            // 找到每个菜单项的文字视图，修改字号
            if (bottomNav.GetChildAt(0) is BottomNavigationMenuView menuView)
            {
                foreach (var itemView in menuView.Children)
                {
                    var titleTextView = itemView.FindViewById<TextView>(Resource.Id.title);
                    if (titleTextView != null)
                    {
                        // 设置你需要的字号，单位是sp（Android默认字号单位）
                        titleTextView.TextSize = 12;
                        // 可选：如果文字还是截断，可以设置单行显示或调整padding
                        // titleTextView.SetSingleLine(true);
                        // titleTextView.SetPadding(0, 0, 0, 4);
                    }
                }
            }

            // 强制刷新布局，确保修改生效
            bottomNav.PostInvalidate();
        }
    }
}

3. 代码关键逻辑说明 #

• 获取BottomNavigationView：Xamarin.Forms的TabbedPage在Android端底层基于BottomNavigationView实现，我们通过它的默认IDbottomtab_tabbar定位到这个原生控件。
• 隐藏图标：给每个菜单项设置透明Drawable，相当于彻底移除了图标显示。
• 调整文字大小：遍历BottomNavigationMenuView的子视图，找到每个菜单项的文字TextView（ID为title），直接修改TextSize参数，你可以根据实际需求调整数值。
• OnLayout方法：解决屏幕旋转、配置变化后修改被重置的问题，确保每次布局更新时都重新应用我们的自定义设置。

4. 额外优化（可选） #

如果修改字号后仍存在文字截断，可以尝试：

• 强制TextView单行显示：titleTextView.SetSingleLine(true);
• 微调TextView内边距：titleTextView.SetPadding(0, 0, 0, 4);（数值可按需调整）
• 进一步缩小字号，比如设置为11sp。

这样修改后，Android端的底部导航栏就会只显示缩小后的文字，不会再有图标过大和文字截断的问题啦！

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