ボトムバーの設定

今回は、『アプリで共通のボトムバーに、現在表示されているコンポーザブル（画面）の名称を表示させる』ことを目標にしてみましょう。

というわけで、ナビゲーションの制御とは直接関係しませんが、まず初めにボトムバーの設置から行います。

以前の記事で紹介したナビゲーションのサンプルを今回も使用しますが、ナビゲーションの実装については既に紹介したので、その部分は丸っと省きます。

以前の記事を読んでいない方も当然いらっしゃるでしょうが、Jetpack Composeにおけるナビゲーションの基本を理解できていれば、以前の記事を読んでコードの詳細を把握しておく必要はありません。

サンプルには、ホーム（Home）・Screen A・Screen Bの３つのコンポーザブル（画面）があり、各コンポーザブルに設置されたボタンをタップすることで画面遷移ができるようになっている…という構造を知っておいてもらえればそれで十分です。

ただ一点だけ注意が必要になるかもしれない点は、各スクリーンの名称は下のように enum class で管理されているという点です。（ナビゲーションの名称を管理する上で、文字列を直接渡していないということです）

enum class Screens {
   HOME,
   SCREEN_A,
   SCREEN_B
}

さて、ボトムナビゲーションバーの設定ですが、今回はテキストを表示させたいだけなのでアイコンやボタンなどは配置せず、シンプルにまとめます。

ボトムナビゲーションバーを設置するには、Scaffold の bottomBar パラメータにコンポーザブルを指定します。

今回は以下のように指定してみましょう。

Scaffold(bottomBar = {
   Text(
       text = "Current screen is ...",
       fontSize = 24.sp,
       textAlign = TextAlign.Center,
       modifier = Modifier
           .fillMaxWidth()
           .padding(vertical = 16.dp)
   )
}) {
   // Create NavHost
   NavHost(
       modifier = Modifier.padding(it),
       // The rest is omitted
}

今の段階ではまだ現在表示されている画面（Current Screen）の情報を得ることができないので、テキストはとりあえず『Current screen is …』と指定しています。

この時点における表示結果（HOME画面）は次のようになります。

これで、表示されている画面の名称をボトムバーに表示させる準備が整いました！

なお、Scaffold（スキャフォールド）は『足場』といった意味を持つ英単語で、トップバーやボトムバー、スナックバーなどのマテリアルデザイン・コンポーネントを設置するための土台的な役割を果たすものです。

Scaffoldに含まれるコンポーザブルでは、トップバーやボトムバーを表示するスペースを適切に確保できるようにするため、 PaddingValues を受け取って設定する必要があります。

POINT!
1. ・ボトムバーを設置するには、Scaffoldを利用しよう！
2. ・Scaffold の bottomBar パラメータに、必要なコンポーザブルを渡そう！
3. ・Scaffold = マテリアルデザイン・コンポーネントを利用するための土台（足場）！

表示画面の追跡と表示

実は、表示画面の追跡とその情報を表示する手順は簡単です。

ただし、それはこれから記述するコードの量が少ないという意味であり、ナビゲーションの仕組み自体が単純というわけではありません。

ナビゲーションについて細かいところまで深く理解しようと思えば、膨大なドキュメントをしっかり読み込む必要があります。（それほど、ナビゲーションの仕組みは複雑です）

なので、今回はサラッとシンプルに解説を進めていこうと思います。

まず、大前提としてナビゲーションは実装済みですから、navController は以下のように定義済みであることを確認しておきます。

// Create NavController
val navController = rememberNavController()

そして次に、currentBackStackEntryAsState() を利用して、ナビゲーションスタックの最上位のエントリ（現在のナビゲーション位置）を MutableState で取得することで、画面遷移を追跡できるようにします。

// get current back stack entry
val backStackEntry by navController.currentBackStackEntryAsState()

そして、その追跡結果を利用して、現在の画面情報を変数に格納します。

// get the current screen name
val currentScreen = Screens.valueOf(
   backStackEntry?.destination?.route ?: Screens.HOME.name
)

なお、backStackEntry はnull許容型ですから、その値がnullである可能性があるため、セーフコールとエルビス演算子を利用しています。

※セーフコールやエルビス演算子については、こちらの記事で解説しています。→ Kotlinにおけるnullの基本（セーフコール・エルビス演算子）

そして、この情報を先ほどのボトムバーのテキストとして利用すれば完成です。

Scaffold(bottomBar = {
   Text(
       text = "Current screen is ${currentScreen.name}",
       fontSize = 24.sp,
       textAlign = TextAlign.Center,
       modifier = Modifier
           .fillMaxWidth()
           .padding(vertical = 16.dp)
   )
}) { // The rest is omitted}

画面遷移に伴い、ボトムバーの画面の名称を表すテキスト部分が適切に切り替わっている（表示画面を追跡できている）ことがわかります。

これを利用することで、ユーザーが現在どの画面にいるのか（＝現在地）をわかりやすく示すことができ、UX（ユーザーエクスペリエンス）の向上などが期待できます。

また、ユーザーが特定の画面を表示している時にだけ何かを表示させたり、あるいは逆に非表示にしたり等、表示画面によってUIを制御したい場合にも使えます。

POINT!
1. ・currentBackStackEntryAsState() で、現在のナビゲーション位置を追跡できる！
2. ・↑で取得した値はnull許容なので、セーフコールやエルビス演算子を用いて値を利用しよう！
3. ・現在の画面名称を適切に表示することで、UXが向上できる場合も！