Xamarin.Forms 上的选项卡式页面自定义渲染器

Question

如何使用选项卡式页面自定义渲染器实现类似于屏幕截图中顶部栏的内容 ("Totale Regioni Province")？现在我正在使用由三个不同标签组成的“假标签”。

我需要更改选项卡的字体系列、字体大小和填充。

Answer 1

当你想改变标签页的字体时，你可以使用自定义渲染器来重新设置它。

MyTabbedPageRenderer.cs:

[assembly: ExportRenderer(typeof(MainPage), typeof(MyTabbedPageRenderer))]
namespace TabbedPageDemo.Droid
{
class MyTabbedPageRenderer : TabbedPageRenderer
{
    public MyTabbedPageRenderer(Context context) : base(context)
    {

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

        if (e.NewElement == null || e.OldElement != null)
            return;

        TabLayout tablayout = (TabLayout)ViewGroup.GetChildAt(1);
        Android.Views.ViewGroup vgroup = (Android.Views.ViewGroup)tablayout.GetChildAt(0);
        for (int i = 0; i < vgroup.ChildCount; i++)
        {
            Android.Views.ViewGroup vvgroup = (Android.Views.ViewGroup)vgroup.GetChildAt(i);
            Typeface fontFace = Typeface.CreateFromAsset(this.Context.Assets, "Trashtalk.ttf");
            for (int j = 0; j < vvgroup.ChildCount; j++)
            {
                Android.Views.View vView = (Android.Views.View)vvgroup.GetChildAt(j);
                if (vView.GetType() == typeof(Android.Support.V7.Widget.AppCompatTextView) || vView.GetType() == typeof(Android.Widget.TextView))
                {
                    //here change textview style
                    TextView txtView = (TextView)vView;
                    txtView.TextSize = 14f;
                    txtView.SetTypeface(fontFace, TypefaceStyle.Normal);
                }
            }
        }
    }
  }
}

我使用的是标签页模板项目。

更新：

在资源中创建一个字体文件夹。添加 .ttf 文件并在其中 myfont.xml。

<?xml version="1.0" encoding="utf-8" ?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
 <font android:font="@font/Samantha"
          android:fontStyle="normal"
          android:fontWeight="400"
          app:font="@font/Samantha"
          app:fontStyle="normal"
          app:fontWeight="400"/>

</font-family>

Style.xml

<style name="MyTabLayout" parent="Base.Widget.Design.TabLayout">
<item name="tabTextAppearance">@style/MyTabTextAppearance</item>
</style>

<style name="MyTabTextAppearance" parent="TextAppearance.AppCompat.Button">
<item name="android:textSize">20sp</item>
<item name="android:fontFamily">@font/myfont</item>
</style>

在 Tabbar.xml 中应用样式。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="@android:color/white"
app:tabGravity="fill"
app:tabMode="fixed" 
style="@style/MyTabLayout"/>

Xamarin.Forms 上的选项卡式页面自定义渲染器

Tabbed page custom renderer on Xamarin.Forms

toolbar

xamarin.forms

tabbedpage