Xamarin.Forms 上的选项卡式页面自定义渲染器 [关闭]答案

【问题标题】：Tabbed page custom renderer on Xamarin.Forms [closed]Xamarin.Forms 上的选项卡式页面自定义渲染器 [关闭]
【发布时间】：2020-07-08 09:11:42
【问题描述】：

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

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

【问题讨论】：

到目前为止你有什么尝试？
没有自定义渲染器，我尝试更改 tabbar.xml 但这不是我想要的，因为我想将照片中的栏设计应用到这个特定页面而不是整个应用程序。 @EliasJohannes
在这种情况下，您可以创建一个自定义控件，然后专门为此控件创建一个自定义渲染器。网上有很多教程，而且很简单。制作自定义控件后，您可以仅在需要时使用它，并在其他情况下坚持使用标准渲染器。
您会向自定义控件的初学者推荐什么教程，然后是自定义渲染器？

标签： xamarin.forms toolbar tabbedpage

【解决方案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>

样式.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"/>

【讨论】：

如果我想使用 custom_tab_layout.xml 更改每个选项卡的外观怎么办？
我已经更新了我的回复。请检查一下。