記事一覧

タイトルバーのスタイルを変更する方法 | 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.iOSの場合

2通りの方法があります。
(1)CustomRendererを作成し、描画時に変更するコードを埋め込む
(2)AppDelegateで初回ロード時に読み込む
どちらかを記述すれば、変更されます。

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.FromRGB(251, 140, 0); //#FB8C00
        //戻るボタンも含む文字色
        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,
}, 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.FromRGB(251, 140, 0); //#FB8C00
        UINavigationBar.Appearance.TintColor = UIColor.White;
        UINavigationBar.Appearance.SetTitleTextAttributes(new UITextAttributes()
        {
            Font = UIFont.FromName("フォントのPostScript名", 20),
            TextColor = UIColor.White,
        });

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


2.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);

        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);
        }
    }
}




当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿
非公開コメント

アルバム

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

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