如何在导航页面的标题上应用自定义字体?

时间:2017-02-21 19:34:35

标签: xamarin.forms

我正在使用适用于Android,iOS和UWP的Xamarin.Forms的多平台应用程序。其中一个要求是在所有页面的标题上应用公司自定义字体,这些页面是NavigationPage的实例。我已经在iOS上工作,但我无法让它适用于Android或UWP。 我所做的是为每个平台创建自定义渲染器。对于iOS,这使用以下代码:

using System.ComponentModel;
using UIKit;
using MyNameSpace.iOS.Renderers
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRendererAttribute(typeof(NavigationPage), typeof(MyNavigationPageRenderer))]
namespace MyNameSpace.iOS.Renderers
{
    public class MyNavigationPageRenderer : NavigationRenderer
    {
        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            var page = this.Element as NavigationPage;
            if (page == null) return;

            this.NavigationBar.TitleTextAttributes = new UIStringAttributes
            {
                Font = UIFont.FromName("MyFont", 18),
                ForegroundColor = page.BarTextColor.ToUIColor()
            };
        }
    }
}

我知道如何在Android和UWP平台的OnElementChanged方法中获取正确的字体,但我该如何应用它们?我无法找到要设置的属性。

1 个答案:

答案 0 :(得分:4)

我可以部分回答我自己的问题。对于Android,Java中有很多解决方案,将它们转换为Xamarin并不容易。但我找到了一个基于Getting ActionBar Title TextView with AppCompat v7 r21的合理且易于理解的解决方案。

首先,将TextView添加到Resources / layout / toolbar.axml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways">

  <TextView
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Toolbar Title"
        android:gravity="center_vertical"
        android:id="@+id/toolbar_title" />

</android.support.v7.widget.Toolbar>

然后创建自定义NavigationPage渲染器:

using System;
using System.ComponentModel;
using Android.Graphics;
using Android.Widget;
using MyNameSpace.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using Support = Android.Support.V7.Widget;


[assembly: ExportRenderer(typeof(NavigationPage), typeof(MyNavigationPageRenderer))]
namespace MyNameSpace.Droid.Renderers
{
    public class MyNavigationPageRenderer : NavigationPageRenderer
    {
        private Support.Toolbar _toolbar;

        public override void OnViewAdded(Android.Views.View child)
        {
            base.OnViewAdded(child);

            if (child.GetType() == typeof(Support.Toolbar))
                _toolbar = (Support.Toolbar)child;
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            var page = this.Element as NavigationPage;

            if (page != null && _toolbar != null)
            {
                Typeface tf = Typeface.CreateFromAsset(Android.App.Application.Context.Assets, "MyFont.ttf");

                TextView title = (TextView)_toolbar.FindViewById(Resource.Id.toolbar_title);
                title.SetText(page.CurrentPage.Title, TextView.BufferType.Normal);
                title.SetTypeface(tf, TypefaceStyle.Normal);
            }

        }

    }
}

在OnViewAdded事件中,我们获得了对工具栏的引用。在OnElementPropertyChanged事件中,我们从资产中获取自定义字体,并使用FindViewById()检索已定义的TextView。然后我们可以设置工具栏的Textview的标题和字体(字体)。

到目前为止一切顺利。有人想在UWP项目中完成相同的工作吗?