在 Android 上更改 TabbedPage 项目字体大小

Question

我在我的 xamarin 表单项目中使用位置为 bottom 的 TabbedPage。

在 Android 上，字体太大。

我正在寻找减小字体大小的方法。

我也在尝试删除使所选菜单项变大的效果。

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            xmlns:views="clr-namespace:namespace.Views"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            xmlns:i18n="clr-namespace:namespace.Utils;assembly=namespace"
            Title="{Binding Title}"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="#002244"
            android:TabbedPage.BarBackgroundColor="White"
            android:TabbedPage.BarSelectedItemColor="#096cd0"
            x:Class="namespace.Views.MainPage">
    <TabbedPage.Children>
        <NavigationPage x:Name="Home" Title="{i18n:Translate Menu_Home}" IconImageSource="accueil.png">
            <x:Arguments>
                <views:Home />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage x:Name="Services" Title="{i18n:Translate Menu_MyServices}" IconImageSource="services.png">
            <x:Arguments>
                <views:MyServices />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage x:Name="Documentation" Title="{i18n:Translate Menu_Documentation}" IconImageSource="documentation.png">
            <x:Arguments>
                <views:Documentation />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage x:Name="VideoCall" Title="{i18n:Translate Menu_Video}" IconImageSource="videoconferenc.png">
            <x:Arguments>
                <views:VideoCall />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

这是结果

我们发现 "videoconsultation" 没有足够的空间。
这里更糟
单词"services"在选择时消失。

我做了很多研究，但我找到了让它发挥作用的方法。

当菜单位于顶部时，我可以在style.xml中更改一些设置，但当它位于底部时似乎不起作用。

你有解决办法吗？

非常感谢，

克里斯

Answer 1

您可以按照this blog更改Android上tabbedPage项的FontSize，写一个TabbedPage的custom renderer并更改textSize 那里：

[assembly: ExportRenderer(typeof(ExtendedTabbedPage), typeof(ExtendedTabbedPageRenderer))]
namespace CustomTabbedPage.Droid
{
    public class ExtendedTabbedPageRenderer : TabbedPageRenderer
    {
        Xamarin.Forms.TabbedPage tabbedPage;
        BottomNavigationView bottomNavigationView;
        Android.Views.IMenuItem lastItemSelected;
        private bool firstTime = true;
        int lastItemId=-1;
        public ExtendedTabbedPageRenderer(Context context) : base(context)
        {
        }

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

            if (e.NewElement != null)
            {
                tabbedPage = e.NewElement as ExtendedTabbedPage;
                bottomNavigationView = (GetChildAt(0) as Android.Widget.RelativeLayout).GetChildAt(1) as BottomNavigationView;


                //Call to change the font
                ChangeFont();
            }
        }

        //Change Tab font
        void ChangeFont()
        {
            var fontFace = Typeface.CreateFromAsset(Context.Assets, "gilsansultrabold.ttf");
            var bottomNavMenuView = bottomNavigationView.GetChildAt(0) as BottomNavigationMenuView;

            for (int i = 0; i < bottomNavMenuView.ChildCount; 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));

                lastItemId = bottomNavMenuView.SelectedItemId;

                //smallTextView.SetTypeface(fontFace, TypefaceStyle.Bold);
                //largeTextView.SetTypeface(fontFace, TypefaceStyle.Bold);

                smallTextView.TextSize = 18;
                largeTextView.TextSize = 18;

                //Set text color
                var textColor = (item.Id == bottomNavMenuView.SelectedItemId) ? tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarSelectedItemColor().ToAndroid() : tabbedPage.On<Xamarin.Forms.PlatformConfiguration.Android>().GetBarItemColor().ToAndroid();
                smallTextView.SetTextColor(textColor);
                largeTextView.SetTextColor(textColor);
            }
        }      
    }
}

更改 smallTextView 的 textSize 和 largeTextView 将起作用。您还可以下载示例项目 here.

Answer 2

要更改底部选项卡式页面的字体大小，请参阅下面的内容 link ...它对我有用。无需创建自定义渲染器，只需按照以下步骤操作即可。

1)在Android -> Resources/Values中创建新文件“dimens.xml”（仅当它不存在时） 2)然后复制下面的代码link

link :

https://montemagno.com/control-text-size-on-android-bottom-navigation/

在 Android 上更改 TabbedPage 项目字体大小

Change TabbedPage Item FontSize on Android

android

font-size

xamarin

xamarin.forms

tabbedpage

这是结果

我们发现 "videoconsultation" 没有足够的空间。

这里更糟

单词"services"在选择时消失。