fc2ブログ

記事一覧

タイトルバーのスタイルを変更する方法 | Xamarin.Forms


前回に引き続き、Xamarin開発でのフォントの変更方法について、第2弾です。今回はタイトルバーのフォント変更です。背景色やフォントの色も変更します。
フォントファイルの設定方法については前回の記事にてご紹介しておりますので、今回は割愛させていただきます。


iOS9
xamarin_font_title_01.png
Android5
xamarin_font_title_02.png



前提条件
・Windows10
・Visual Studio 2015 Community Update3
・Xamarin 4.3.0.784 (NuGet Xamarin.Forms 2.3.4.224)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.4.0.123



1.事前準備

前回の記事でもご紹介していますが、以下の項目については設定を済ませておくことが前提です。
・必要なフォントのダウンロード
・各プロジェクトへの配置
・Info.plist の設定
・PostScript名の取得



2.iOSの場合

2通りの方法があります。
(1)CustomRendererを作成し、描画時に変更するコードを埋め込む
(2)AppDelegateで初回ロード時に読み込む
どちらかを記述すれば、変更されます。
※ iOS13 以降についてはフォントの適用方法が変更になっています。次の記事「タイトルバーのフォントを変更する方法 - iOS13の対応方法 -」をご参考ください。


CustomNavigationRenderer.csで描画する場合
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationRenderer))]
public class CustomNavigationRenderer : NavigationRenderer
{
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        //ナビゲーションのスタイル変更
        //背景色
        this.NavigationBar.BarTintColor = UIColor.Blue;
        //戻るボタンも含む文字色
        this.NavigationBar.TintColor = UIColor.White;

        //タイトルフォント
        this.NavigationBar.TitleTextAttributes = new UIStringAttributes()
        {
            Font = UIFont.FromName("フォントのPostScript名", 20),
            ForegroundColor = UIColor.White,    //タイトルフォントカラー
        };

//戻るボタンもフォント変更する場合
UIBarButtonItem.Appearance.SetTitleTextAttributes(new UITextAttributes()
{
Font = UIFont.FromName("フォントのPostScript名", 16),
//TextColor = UIColor.White,
//TextColorはイメージピッカーのような画面のキャンセルボタンまで白色になってしまうので設定しないほうが良い。
}, UIControlState.Normal);
    }
}

AppDelegate.csで設定する場合
[Register("AppDelegate")]
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
    public override bool FinishedLaunching(UIApplication app, NSDictionary options)
    {
        global::Xamarin.Forms.Forms.Init();
        LoadApplication(new App());

        //ナビゲーションタイトルの色変更
        UINavigationBar.Appearance.BarTintColor = UIColor.Blue;
UINavigationBar.Appearance.TintColor = UIColor.White;
        UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes()
        {
            Font = UIFont.FromName("フォントのPostScript名", 20),
            TextColor = UIColor.White,
        });

        return base.FinishedLaunching(app, options);
    }
}



3.Androidの場合

基本的には、Xamarin 4.3.0.784でアプリを新規に作成すると以下のファイルが初期段階で作成され、デフォルトでなんらかのスタイルが設定されています。
・Androidプロジェクト/Resources/layout/Toolbar.axml
・Androidプロジェクト/Resources/values/styles.xml
上記スタイル設定がされていることを前提に記述しています。

(1)ToolBar.axmlに以下のようにTextViewのブロックを追加します。
ToolBar.axml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

  <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/titleView" />
 
</android.support.v7.widget.Toolbar>

(2)CustomNavigationPageRenderer.csを追加作成します。
CustomNavigationPageRenderer.cs
using System.ComponentModel;
using Android.Widget;
using Android.Graphics;
using Support = Android.Support.V7.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
[assembly: ExportRenderer(typeof(Xamarin.Forms.NavigationPage), typeof(CustomNavigationPageRenderer))]
public class CustomNavigationPageRenderer : 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;
    }
       
    /// <summary>
/// ツールバータイトルのフォントを変更する
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
this.SetTitle();
}

/// <summary>
/// 画面の回転時のイベント(タイトルを再設定する)
/// </summary>
/// <param name="changed"></param>
/// <param name="l"></param>
/// <param name="t"></param>
/// <param name="r"></param>
/// <param name="b"></param>
protected override void OnLayout(bool changed, int l, int t, int r, int b)
{
base.OnLayout(changed, l, t, r, b);
this.SetTitle();
}

/// <summary>
/// タイトルを設定する
/// </summary>
private void SetTitle()
{
        var page = this.Element as NavigationPage;
        if (page != null && _toolbar != null)
        {
            Typeface tf = Typeface.CreateFromAsset(Android.App.Application.Context.Assets, "Fonts/拡張子付きフォント名");
                               
            TextView titleView = (TextView)_toolbar.FindViewById(Resource.Id.titleView);
            titleView.SetText(page.CurrentPage.Title, TextView.BufferType.Normal);
            titleView.SetTypeface(tf, TypefaceStyle.Normal);
        }
    }
}

※2019/10/21追記
スマホの画面を回転させた場合にタイトルが初期化されてしまう為、OnLayoutをオーバーライドしてタイトルを再セットするように変更しました。



4.関連記事

ラベルやボタンにカスタムフォントを適用させる方法については以下の記事にて紹介しております。
https://itblog.dynaspo.com/blog-entry-156.html

iOS13 でタイトルバーのフォントを変更する方法については以下の記事にて紹介しております。
https://itblog.dynaspo.com/blog-entry-442.html

ListView の ImageCell にカスタムフォントを適用させる方法については以下の記事にて紹介しております。
https://itblog.dynaspo.com/blog-entry-387html








最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html



関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。