Material2でのJetpackComposeのTopAppBarでタイトルを中央に配置したい

はじめに

現在、多くのアプリケーションではMaterial2でのandroidアプリ開発が行われているかと思います（2023年3月現在）。
しかし、最近Material3という、よりオシャなandroidアプリ開発に欠かせないテーマが出てきており、今回はMaterial2でのTopAppBarのタイトル配置方法を紹介していきます。

Material2のTopAppBarの仕様

TopAppBarコンポーネント

@Composable
fun TopAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    AppBar(
        // 省略
    )
}

このように、TopAppBarはAppBarのラッパーになっていることがわかります。
ここで注目したいのが、最後の引数のcontentがRowScopeになっていることです。
詳しくは割愛しますが、RowScopeではModifier.align(Alignment.CenterHorizontaly)のように、水平方向に中央揃えすることができないため、トップバーのタイトルを中央に配置するためにはRowScope内で工夫して配置する必要があります。

Material3では、標準で、タイトルを中央に配置するComposableが用意されたため、簡単に中央配置を実装する事が可能となります。
詳しくはこちらの記事が参考になるかと思います。

実装

実際にMaterial2でのトップバータイトルの中央配置方法が以下のようになります。

中央配置TopAppBar

TopAppBar {
    Spacer(modifier = Modifier.weight(1f))
    Text(text = "CenterHorizontalyTitle")
    Spacer(modifier = Modifier.weight(1f))
}

TopAppBarがRowScopeになっているため、タイトルをSpacerで挟み込んで、そのSpacerをweight（1f)に設定することで、タイトルを中央配置する事が可能となります。
Modifier.weightは画面上の表示する比率を調整するもので、今回だと、Textコンポーネント以外の余白を埋めるようなSpacerの配置となります。
以上がMaterial2でのトップアップバーのタイトルの中央配置方法でした。