You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Xamarin Form:如何在ResourceDictionary中修改TabbedPage标题字号

解决Xamarin.Forms TabbedPage Android端标题字号过大的问题

嘿,我太懂你这个困扰了——TabbedPage的标题在iOS上显示得好好的,到了Android端不管怎么调系统字体偏好,字号都大到离谱,显示得乱七八糟。别着急,给你几个实用的解决办法,按需选就行:

方法一:自定义Android渲染器(最灵活的方案)

Android的TabbedPage默认标题字体没有很好适配系统缩放,我们可以写个自定义渲染器来手动控制。

在你的Android项目里新建一个CustomTabbedPageRenderer.cs文件,代码如下:

using Android.Content;
using Android.Support.Design.Widget;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(YourAppName.Droid.CustomTabbedPageRenderer))]
namespace YourAppName.Droid
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }

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

            if (ViewGroup != null && ViewGroup.GetChildAt(0) is Android.Support.V4.View.ViewPager viewPager)
            {
                if (viewPager.GetChildAt(1) is TabLayout tabLayout)
                {
                    // 用sp单位设置字体大小,*sp会自动适配系统字体缩放*
                    var scaledTextSize = 12 * Resources.DisplayMetrics.ScaledDensity;

                    for (int i = 0; i < tabLayout.TabCount; i++)
                    {
                        var tab = tabLayout.GetTabAt(i);
                        if (tab?.CustomView is TextView tabTextView)
                        {
                            tabTextView.TextSize = scaledTextSize;
                        }
                        else if (tab != null)
                        {
                            // 如果没有自定义View,创建一个新的TextView来控制样式
                            TextView customTabText = new TextView(Context)
                            {
                                Text = tab.Text,
                                TextSize = scaledTextSize,
                                Gravity = Android.Views.GravityFlags.Center
                            };
                            tab.SetCustomView(customTabText);
                        }
                    }
                }
            }
        }
    }
}

替换YourAppName为你的项目命名空间,这样所有TabbedPage的Android端标题都会自动应用这个字体大小,而且会跟着系统字体缩放调整,不会再出现过大的问题。

方法二:用TitleView+OnPlatform快速调整(最简单的方案)

如果不想写渲染器,直接在XAML里给每个子页面的TitleView设置字体大小,针对Android单独适配:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="YourAppName.MainTabbedPage">

    <ContentPage>
        <ContentPage.TitleView>
            <Label Text="首页">
                <Label.FontSize>
                    <OnPlatform x:TypeArguments="x:Double">
                        <!-- Android端设置较小字号,iOS保持默认 -->
                        <On Platform="Android" Value="12" />
                        <On Platform="iOS" Value="16" />
                    </OnPlatform>
                </Label.FontSize>
            </Label>
        </ContentPage.TitleView>
        <!-- 页面内容 -->
    </ContentPage>

    <!-- 另外三个ContentPage重复上述TitleView设置即可 -->
</TabbedPage>

你也可以用NamedSize.Small代替固定数值,这样字体大小会自动跟随Xamarin.Forms的主题缩放,更适配不同设备。

方法三:修改Android原生主题样式(全局统一设置)

如果你想通过Android原生样式来统一管理所有Tab的标题样式,修改Resources/values/styles.xml

<!-- 定义Tab文字样式 -->
<style name="CustomTabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">12sp</item>
    <!-- 还可以设置文字颜色、字重等其他样式 -->
</style>

<!-- 应用到TabLayout -->
<style name="CustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/CustomTabText</item>
</style>

然后可以在自定义渲染器里给TabLayout应用这个样式:

tabLayout.SetTabTextAppearance(Resource.Style.CustomTabText);

或者在AndroidManifest.xml的Application标签里设置全局主题,把TabLayout的样式包含进去,这样整个App的Tab都会统一样式。

这三个方法都能解决你遇到的问题,根据自己的需求选就行啦!

内容的提问来源于stack exchange,提问作者JackyLoo

火山引擎 最新活动