Kotlin/足場（Scaffold）を固めてみる

実際に既存のアプリに機能を追加してみよう、と漠然と新しいActivityを用意してみました。このアプリの中ではこのActivityだけComposableな画面レイアウトとなっています。すなわち、この画面だけ統一感がない状態です。これを既存のActivityに合わせてみたいと思います。
ただedge-to-edgeとかいう施策によって、既存のレイアウトもちょっと考え直した方がいい部分もありそうで、もっとちゃんと設計を考えた方がいいのか！？と迷うところでもあります。とりあえず、画面の上の方にタイトルバーをつけて、前の画面に戻るナビゲーションもつけると思うので、その辺から着手してみます。確か、Scaffold（足場）を組み込むとよかったと前回学習した気がします。あとは色やフォントのテーマを作っていきます。

色のテーマ

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="basePink">#fff5f7</color>
</resources>

これまでは↑こんな colors.xml を使って使う色を定義していたようです。これを ui.theme/Color.kt に書き換えてみました。

val ColorPrimary = Color(0xFF3F51B5)
val ColorPrimaryDark = Color(0xFF303F9F)
val ColorAccent = Color(0xFFFF4081)
val BasePink = Color(0xFFfff5f7)

これをテーマ（MaterialThemeしか知らないのでそれを使用中）の中の colorScheme の中に入れてみればいいのでしょう・・・。

    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40

いや、これはそれぞれが何を意味しているのかさっぱりわかりません。主要な色が1番から3番まで並んでいるっぽいですが、どの色がどこに使われてるのやらさっぱり見当もつきません。画面全体の背景色とかタイトルバーの文字色をサクッと変えようと思っただけなのに。あとはDarkColorSchemeとLightColorSchemeって二つカラースキームがあることについてもちゃんとわかってません。世にいうダークモード用の設定ができるってことなんだと思いますが、普段そんなモードを自分自身が使わないせいか、イマイチピンとこないんですよね。消費電力とか目への優しさとか歌う前にみんなスマホ見過ぎじゃない？っていう何も解決しない感想出てしまいます。とにかくマテリアルデザインの進化版マテリアルデザイン 3ではそういう設定もできるってことで、輝度を落としたバージョンのカラースキームもあとで用意してやればいいくらいで今は流してしまいます。

primary, secondary...ていうのは差し色のことで、基調の色に対して、目立つ（際立つ）色を指定するってことのようです。1番、2番、3番と際立たせたいレベルに応じて使いわけると・・・、具体的な用例がマテリアルデザインの解説ページにありましたが、ザッと流し読むくらいにしました。この3色と基調の色（background）とエラー色（error）で5つの色で画面を作っていくのがカラースキームで、5色の塗りの上に乗る文字色（onPrimary, onSecondary...）やコンテナ色、コンテナ内の文字色、境界色も指定できるようです。指定しない場合はアルゴリズムに従って自動的に決定されるようです。とりあえず、真っ白な現在の背景色をBasePinkに付け替えてみます・・・あれ？何も変わらない・・・。

val colorScheme = when {
    dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
        val context = LocalContext.current
        if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
    }
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}

カラーを決定している部分をみてみると・・・通常スキーム、ダークモードスキームのほかにダイナミック通常スキームとダイナミックダークモードスキームというカラースキームがあうようです。ダイナミック版は壁紙の色味から自動的に各色が決定されるらしく、Android 12以上の機種ではこっちを使うようになってました。ダイナミック版は端末ごとに色味が決定されて、統一感のある色調を提供できそうですが、アプリごとの色が出せないってことですよね。これは悩ましい。今のアプリはピンクを基調としているんですが、新しいActivityだけダイナミックなカラースキームになっちゃうのって許容されますかね？そして、壁紙をいくつか変更してみたのですが、どれも通常（ライト）モードでは背景色が真っ白、ダークモードでは背景色が真っ黒でした。壁紙に応じて変わらないの？

まぁ、時間をかけてでも将来的に統一されたテーマに収斂していくのであれば、新しい画面だけ色が違ってもいいか、くらいの気持ちなので、ダイナミックなカラースキームがAndroidの推しというのならそれに従ってみるのもいいかもしれません。Activityの背景色には基本的にbackground色が使われるようで、ライトモードではどんな壁紙を選択しても白が割り当てられることが多いっぽいです。ダークモードだとほぼ黒（#121212）になりがちなのかな。一面の白ってつまんない気もしますが、Androidの推しに従うと決めたのなら一旦これで突っ走ってみましょう。イヤになたら変えればいいだけです。

Scaffoldの準備 2025/2/16

Scaffoldは今回topBar（タイトルバー）があって前の画面に戻るナビゲーションさえついてればいいです。edge-to-edgeとの兼ね合いなのかバー部分に標準では色がついていないので、白地に黒文字が出てきました。あっ、Scaffoldのコンテンツ部分の背景色はcontainerColorに指定できるようです。色を塗りたい気持ちもありますが、グッと今は我慢します。

（以下、未稿）

一覧へ

2025-02-16 20:59:55