.Net Maui ShellでAndroidのタイトルを中央揃えにする方法

.Net Maui ShellでAndroidのタイトルを中央揃えする方法を紹介していきます。

Androidのタイトルを中央揃えするには、以下のXMLで行えました。しかし、Android API 35からこの方法が利用できなくなりましたので、当記事では別の方法で中央揃えする方法を紹介していきます。

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="Maui.MainTheme" parent="Theme.MaterialComponents.DayNight">
		<item name="titleCentered">true</item>
	</style>
</resources>

紹介環境
- 開発環境
- 対象プラットフォーム
対応方法1
対応方法2
動作イメージ
終わりに

紹介環境

当記事は以下の環境で作成しています。

開発環境

Visual Studio 2022
.Net 9

対象プラットフォーム

Android 8.0以上

対応方法1

ShellRendererをカスタマイズしてAndroidのタイトルを中央揃えにする方法を紹介していきます。

ファイル構造は以下で作成しています。良ければ参考にしてください。

手順1：ShellToolbarTrackerをカスタムします

MaterialToolbar.TitleCenteredをtrueすることでAndroidのタイトルを中央揃えします。

カスタマイズしたShellToolbarTrackerが以下のようになります。

using AndroidX.DrawerLayout.Widget;
using Google.Android.Material.AppBar;
using Microsoft.Maui.Controls.Platform.Compatibility;

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp.Platforms.Android.Handler;

internal class CustomShellToolbarTracker : ShellToolbarTracker
{
    public CustomShellToolbarTracker(IShellContext shellContext, AndroidX.AppCompat.Widget.Toolbar toolbar, DrawerLayout drawerLayout) : base(shellContext, toolbar, drawerLayout)
    {
    }

    protected override void UpdatePageTitle(AndroidX.AppCompat.Widget.Toolbar toolbar, Page page)
    {
        base.UpdatePageTitle(toolbar, page);

        if (toolbar is MaterialToolbar materialToolbar)
        {
            materialToolbar.TitleCentered = true;
        }
    }
}

手順2：ShellRendererをカスタマイズします

カスタマイズしたShellToolbarTrackerは、ShellRendererをカスタマイズして呼び出します。

カスタマイズしたShellRendererは、以下のようになります。

using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp.Platforms.Android.Handler;

public class CustomShellRenderer : ShellRenderer
{
    protected override IShellToolbarTracker CreateTrackerForToolbar(AndroidX.AppCompat.Widget.Toolbar toolbar)
    {
        return new CustomShellToolbarTracker(this, toolbar, ((IShellContext)this).CurrentDrawerLayout);
    }
}

手順3：カスタマイズしたShellRendererを登録します

カスタマイズしたShellRendererは、アプリに登録する必要があります。

アプリの登録は以下のよう行います。

#if ANDROID

using SampleApp.Platforms.Android.Handler;

#endif

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();
        builder.UseMauiApp<App>();

        builder.ConfigureMauiHandlers(handlers =>
        {
#if ANDROID
            handlers.AddHandler<Shell, CustomShellRenderer>();
#endif
        });

        return builder.Build();
    }
}

対応方法2

ToolbarHandlerのマッパーを利用してAndroidのタイトルを中央揃えにする方法を紹介していきます。対応方法1と同じくMaterialToolbar.TitleCenteredをtrueにして対応していきます。

対応した内容が以下のようになります。

#if ANDROID

using Google.Android.Material.AppBar;

#endif

// 名前空間はプロジェクトに合わせてください。
namespace SampleApp;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
    }

    protected override Window CreateWindow(IActivationState? activationState)
    {
        Microsoft.Maui.Handlers.ToolbarHandler.Mapper.AppendToMapping("CustomToolbar", (handler, view) =>
        {
#if ANDROID
            MaterialToolbar materialToolbar = handler.PlatformView;
            materialToolbar.TitleCentered = true;
#endif
        });

        return new Window(new AppShell());
    }
}

動作イメージ

終わりに

style.xmlで対応している内容が、Android API 35の移行で駄目になるとは考えていませんでした。修正は意外とシンプルだったので助かりました。当記事の内容が役に立てば幸いです。