如何让FreshMVVM的FreshTabbedNavigationContainer实现全宽可滚动标签栏？

我之前也碰到过这个情况，FreshTabbedNavigationContainer默认的标签布局确实会把所有标签挤在一起截断，要改成常规TabbedPage那样的全宽可滚动样式，得针对不同平台做些调整，下面给你两种可行的方案：

方案一：自定义平台渲染器（推荐，更灵活） #

这个方法能精准控制标签栏的行为，是最可靠的解决方式，分Android和iOS端分别处理：

Android端 #

创建一个自定义渲染器，修改原生TabLayout的属性来开启滚动模式：

[assembly: ExportRenderer(typeof(FreshTabbedNavigationContainer), typeof(CustomFreshTabbedRenderer))]
namespace YourApp.Droid.Renderers
{
    public class CustomFreshTabbedRenderer : TabbedPageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (ViewGroup != null && ViewGroup.GetChildAt(1) is TabLayout tabLayout)
            {
                // 设置标签模式为可滚动，超出屏幕的标签会自动出现滚动条
                tabLayout.TabMode = TabLayout.ModeScrollable;
                // 设置标签填充整个宽度（可选，根据你的UI需求调整）
                tabLayout.TabGravity = TabLayout.GravityFill;
            }
        }
    }
}

iOS端 #

iOS原生的TabBar本身不支持滚动（超过数量会显示"更多"按钮），如果想要和Android一致的滚动标签效果，你可以换用Xamarin.Forms自带的TabView组件，或者基于FreshMVVM自定义一个使用UIScrollView的标签容器。如果只是想优化标签显示避免截断，可以在渲染器里调整文本样式：

[assembly: ExportRenderer(typeof(FreshTabbedNavigationContainer), typeof(CustomFreshTabbedRenderer))]
namespace YourApp.iOS.Renderers
{
    public class CustomFreshTabbedRenderer : TabbedRenderer
    {
        public override void ViewWillLayoutSubviews()
        {
            base.ViewWillLayoutSubviews();
            
            if (TabBar?.Items != null)
            {
                foreach (var item in TabBar.Items)
                {
                    // 调整标签字体大小，避免截断
                    item.SetTitleTextAttributes(new UITextAttributes { Font = UIFont.SystemFontOfSize(12) }, UIControlState.Normal);
                    // 微调文本位置，适配换行
                    item.TitlePositionAdjustment = new UIOffset(0, -2);
                }
            }
        }
    }
}

方案二：代码中直接调整（快速尝试） #

如果你不想写自定义渲染器，可以在初始化容器的时候，尝试直接修改原生控件属性，不过要注意得在页面渲染完成后执行：

var tabbedContainer = new FreshTabbedNavigationContainer();
// 添加你的标签页
tabbedContainer.AddTab<HomeViewModel>("首页", "home_icon.png");
tabbedContainer.AddTab<DiscoverViewModel>("发现", "discover_icon.png");
// ... 更多标签页

// 监听页面加载完成事件，调整Android端标签栏
tabbedContainer.Appearing += (s, e) =>
{
    if (Device.RuntimePlatform == Device.Android)
    {
        var renderer = tabbedContainer.GetRenderer() as TabbedPageRenderer;
        if (renderer?.ViewGroup?.GetChildAt(1) is TabLayout tabLayout)
        {
            tabLayout.TabMode = TabLayout.ModeScrollable;
            tabLayout.TabGravity = TabLayout.GravityFill;
        }
    }
};

另外，要是标签文本过长导致截断，还可以在Android端渲染器里给标签文本设置换行：

// Android端渲染器里添加这段代码，允许标签文本换行
foreach (int i in Enumerable.Range(0, tabLayout.TabCount))
{
    var tabView = tabLayout.GetTabAt(i).View;
    var textView = tabView.FindViewById<TextView>(Resource.Id.tab_text);
    textView.SetSingleLine(false);
    textView.Ellipsize = Android.Text.TextUtils.TruncateAt.End;
}

这样处理后，Android端的标签栏就会和常规TabbedPage一样，变成全宽可滚动的样式了。

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