如何在 Xamarin.Forms 中自定义 TabbedPage 的选项卡项？

Question

我正在使用一个TabbedPage作为我的Xamarin.Forms应用程序的MainPage（Xamarin.Forms版本：2.3.5.239-pre3）。我的MainActivity继承自FormsAppCompatActivity。

有四个ContentPage类型的页面添加到TabbedPage中，如下所示：

<TabbedPage ... >    

   <pages:FirstPage Title="Testpage1" Icon="icon.png" />
   <pages:SecondPage Title="Testpage2"  Icon="icon.png" />
   <pages:ThirdPage Title="Testpage3"  Icon="icon.png" />
   <pages:FourthPage Title="Testpage3"  Icon="icon.png" />

</TabbedPage>

然而，选项卡显示如下所示： 现在我需要更改标题属性的字体大小，以便整个标题都能显示。最好的方法是什么？我尝试使用CustomRenderer，但无法找出如何访问选项卡项。

我尝试了：

      [assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTab))]
       namespace AdvancedForms.Droid.CustomRenderer
       {
            public class CustomTab : TabbedRenderer
            {
                protected override void DispatchDraw(Canvas canvas)
                {    
                  base.DispatchDraw(canvas);
                  ActionBar actionBar = activity.ActionBar;
                  // Do Stuff here
                }
            }
        }

但是 activity.ActionBar 始终为空。

- Tobias von Falkenhayn

Answer 1

您应该寻找一个TabLayout而不是ActionBar。 我上次检查，TabLayout是渲染器视图层次结构中的第二个子级，因此您可以像这样获取它：

var tabLayout = (TabLayout)GetChildAt(1);

一旦你拥有这个，你需要循环遍历每个选项卡并将所需的字体大小应用于每个选项卡的textview。

有用的提示，视图层次结构如下：

MsiTabbedRenderer
    FormsViewPager
    TabLayout
        SlidingTabStrip
            TabView
                AppCompatImageView
                AppCompatTextView
            TabView
                AppCompatImageView
                AppCompatTextView
            TabView
                AppCompatImageView
                AppCompatTextView
            ...

我用的生成此信息的方法如下，供您参考：

    public static void DebugLayout(this View self, int indent = 0)
    {
        // write info about me first
        var indents = new string('\t', indent);
        System.Diagnostics.Debug.WriteLine(indents + self.GetType().Name);

        // check if I'm a view group
        var vg = self as ViewGroup;
        if (vg == null) return;

        // enumerate my children
        var children = Enumerable.Range(0, vg.ChildCount).Select(x => vg.GetChildAt(x));

        // recurse on each child
        foreach (var child in children)
            DebugLayout(child, indent+1);
    }

- Will Decker

---

嗨，抱歉回复晚了！你的建议对我非常有用，谢谢！ :)你从哪里得到了那个层级视图？有一些好工具可以让我看到这样的视图吗？ - Tobias von Falkenhayn

我添加了一个扩展方法，用于生成我的视图布局“备忘单”。 - Will Decker

谢谢，我非常感激！ :) - Tobias von Falkenhayn

Answer 2

对于自定义选项卡视图/页面，我正在使用xam.Tabview（Xamarin.Forms）组件，并且它的工作效果符合预期。

它支持自定义标题和内容视图。

安装Nuget：TabView Nuget

示例：Tabview Sample

- Rajesh