如何在Xamarin.Forms中自定义TabbedPage的Tab-Items?

问题描述

我正在使用 TabbedPage 作为Xamarin.Forms应用程序(Xamarin.Forms版本:2.3.5.239-pre3)的主页.我的MainActivity继承自 FormsAppCompatActivity .

I'm using a TabbedPage as my MainPage of my Xamarin.Forms app (Xamarin.Forms Version: 2.3.5.239-pre3). My MainActivity inherits from FormsAppCompatActivity.

在TabbedPage中添加了四个类型为 ContentPage 的页面，例如:

There are four pages of type ContentPage added to the TabbedPage like:

<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>

但是，选项卡显示如下:

However, the tabs are displayed like:

现在，我需要更改title属性的字体大小，以便显示整个标题.最好的方法是什么?我尝试了 CustomRenderer ，但是我不知道如何访问选项卡项.

Now I need to change the font size of the title property, so the whole title will be displayed. Whats the best way to do this? I tried a CustomRenderer but I couldn't figure out how to access the tab-items.

我尝试过:

      [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始终为null.

But activity.ActionBar is always null.

推荐答案

您应该在寻找TabLayout，而不是ActionBar.最后，我检查了TabLayout是渲染器视图层次结构中的第二个子对象，因此您应该可以像这样获得它:

You should be looking for a TabLayout, not an ActionBar. Last I checked the TabLayout is the second child in the renderer's view hierarchy so you should be able to get at it like so:

var tabLayout = (TabLayout)GetChildAt(1);

一旦需要，您就需要遍历各个选项卡，并将所需的字体大小应用于每个选项卡的文本视图.

Once you have that you need to loop through the individual tabs and apply your desired font size to each tab's textview.

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

Helpful hint, the view hierarchy looks like this:

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

下面提供了我用来生成此信息的方法，供您使用:

The method I use to generate this information is included below for your enjoyment:

    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);
    }

这篇关于如何在Xamarin.Forms中自定义TabbedPage的Tab-Items?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！