2017/8/28

Xamarin.Forms Change Navigation Bar Font Family & Size - Android


由於目前 Xamarin.Forms 沒有屬性可以設定,Navigation Bar 的字體大小

那... App 的設計畫面就是會覺得醜醜的...

這問題其實困擾一陣子了...剛好心血來潮再翻一下資料,終於弄出來,

但目前只有 Android 版本就是了...

作法一樣從 CustomRender 下手,並在各平台專案內實作,有人有找到更好的方法請告訴我...

1. PCL 建立共用類別


.cs
可以在這裡先設定字的顏色或背景色
using Xamarin.Forms;

namespace CustomNavigation.Controls
{
    public class MyNavigationPage: NavigationPage
    {
        public MyNavigationPage(Page root):base(root)
        {
            BarBackgroundColor = Color.Black;
            BarTextColor = Color.White;
        }
    }
}


2. Android 專案內實作

// 若要修改字體的話,可以先將 .ttf 檔案放在 Assets 資料夾內


.cs
using Android.Graphics;
using CustomNavigation.Controls;
using CustomNavigation.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;

//指定輸出到在 PCL 建立的共用類別
[assembly: ExportRenderer(typeof(MyNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace CustomNavigation.Droid.Renderers
{
    public class CustomNavigationPageRenderer : NavigationPageRenderer
    {
        private Android.Support.V7.Widget.Toolbar toolbar;
  
        public override void OnViewAdded(Android.Views.View child)
        {
            base.OnViewAdded(child);

            //判斷是 Toolbar 再處理
            if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
            {
                toolbar = child as Android.Support.V7.Widget.Toolbar;

                //委派事件給子項目加入時
                toolbar.ChildViewAdded += Toolbar_ChildViewAdded;
            }
        }

        void Toolbar_ChildViewAdded(object sender, ChildViewAddedEventArgs e)
        {
            var view = e.Child.GetType();

            // 判斷是 TextView 時再處理
            if(e.Child.GetType() == typeof(Android.Widget.TextView))
            {
                var textView = e.Child as Android.Widget.TextView;

                //改字體
                var spaceFont = Typeface.CreateFromAsset(Forms.Context.ApplicationContext.Assets, "space_age.ttf");
                textView.Typeface = spaceFont;

                //改大小
                textView.TextSize = 30;
                toolbar.ChildViewAdded -= Toolbar_ChildViewAdded;
            }
         }
    }
}

3. 使用他
        public App()
        {
            InitializeComponent();

            MainPage = new MyNavigationPage(new MainPage());
        }


執行結果:

這種東西不是應該要內建好嗎...可惡的 Xamarin


參考來源:
https://github.com/jtourlamain/DevProtocol.Xam.Demos.SpaceNav



2 則留言:

  1. 請問Navigation Bar的高度如何調整,嘗試寫Renderer一直無法調整,謝謝~

    回覆刪除
    回覆
    1. 抱歉這塊我也找不太到資料,我試試看有答案再跟你說

      刪除