保持活动项目标签的字体大小与Xamarin形式的BottomNavigationView中的其他标签相同

Question

BottomNavigationView中的活动项目标签在Android上被连字符。发生这种情况是因为活动标签的字体大小增加了。我希望它的行为类似于iOS导航栏，其中活动项标签的大小与其他标签没有区别。我跟着这个tutorial到此为止。Image of the problem

我找到了针对Android本机How to remove hypheanted labels的解决方案，但我不知道如何将其与Xamarin Forms一起使用。

我尝试设置ItemTextAppearanceActive：

public class NoShiftEffect : PlatformEffect {
    protected override void OnAttached() {
        if (!(Container.GetChildAt(0) is ViewGroup layout)) {
            return;
        }

        if (!(layout.GetChildAt(1) is BottomNavigationView bottomNavigationView)) {
            return;
        }

        bottomNavigationView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityLabeled;

        // How to set this?
        bottomNavigationView.ItemTextAppearanceActive = 5;
    }

    protected override void OnDetached() {
    }
}

任何想法在哪里设置？

Answer 1

在标签页渲染器中尝试一下：

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

    }
    protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
    {
        base.OnElementChanged(e);
        if (Element != null)
        {
            var bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;
            var bottomNavMenuView = bottomNavigationView.GetChildAt(0) as BottomNavigationMenuView;
            for (var i = 0; i < Element.Children.Count; i++)
            {
                var item = bottomNavMenuView.GetChildAt(i) as BottomNavigationItemView;
                var itemTitle = item.GetChildAt(1);
                var smallTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(0));
                var largeTextView = ((TextView)((BaselineLayout)itemTitle).GetChildAt(1));                    
                smallTextView.TextSize = 5f;
                largeTextView.TextSize = 5f;
                smallTextView.Ellipsize = Android.Text.TextUtils.TruncateAt.End;
                largeTextView.Ellipsize = Android.Text.TextUtils.TruncateAt.End;
            }
        }
    }
}

Answer 2

解决方案1：

您可以使用“自定义渲染器”在标签页中设置标签的字体

public class StyledTabbedPageRenderer : TabbedPageRenderer
{
    private TabLayout tabLayout = null;

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

        this.tabLayout = (TabLayout)this.GetChildAt(1);


        changeTabsFont();
    }


    private void changeTabsFont()
    {
        //Typeface font = 
        Typeface.CreateFromAsset(Android.App.Application.Context.Assets, "fonts/" + Constants.FontStyle);
        ViewGroup vg = (ViewGroup)tabLayout.GetChildAt(0);
        int tabsCount = vg.ChildCount;
        for (int j = 0; j < tabsCount; j++)
        {
            ViewGroup vgTab = (ViewGroup)vg.GetChildAt(j);
            int tabChildsCount = vgTab.ChildCount;
            for (int i = 0; i < tabChildsCount; i++)
            {
                Android.Views.View tabViewChild = vgTab.GetChildAt(i);
                if (tabViewChild is TextView)
                {
                    //((TextView)tabViewChild).Typeface = font;
                    ((TextView)tabViewChild).TextSize = 6;  // set font size here !!!
                }
            }
        }
    }
}

解决方案2：

您可以从nuget安装软件包Naxam.BottomTabbedPage。

有关更多详细信息，您可以检查here。