できることが増えてきたので、いよいよレイアウトのデザインを進めて行けそうです。デザインはアプリの使い勝手に直結する行程なので、トライアンドエラーしながら何度も修正を重ねて最適なものを模索していくことになります。ちょっとゲーム開発に似てるかもしれませんね。しかし、修正の度にビルドして実機に転送して使い心地を確認するのは結構手間です。反復する行程が大きいほど、同じ時間でできる試行回数は減っていき、よいものを作る障害となりえます。Composableな関数のことを熟知していて、一発で正解に近いコードが書ける人には問題とならないかもしれませんが、私には無理そうですので、簡易的にComposable関数がどんな風にレンダリングされるか確認できるPreview機能を使ってみることにします。

Android Studioのアプリ新規作成テンプレートには、Greetingみたいな名前のComposable関数と一緒にGreetingPreviewみたいなComposable関数がついてきました。@Composableアノテーションと一緒に@Preview(showBackground = true)っていうアノテーションがついてきたあれです。@Previewアノテーションがついた関数は、Android Studioの中でどんな風にレンダリングされるか確認できるようです。コードエディタの右肩あたりにイメージアイコンがあるので、それを押すと表示されるようになりました。Code / Split / Design と3つ並んだボタンの一番右ですね。@PreviewアノテーションにshowBackground = true をつけておくと背景色が描画されて、描画範囲がわかりやすくなりそうですね。backgroundColor で任意の背景色も指定できそうです。uiMode を指定して、ダークモードでレンダリングさせることもできそうですが、まだそれはいいか。nameでプレビューに名前もつけられるようです。名前をつけられることから、察しのいい人は複数のプレビューを準備して、一緒に並べて確認できるようです。ライトモードとダークモードが比較できたり、入力値の内容に合わせて表示が変化することも一度に確認できます。ズバリ、これでテストを書けますね。ロジックは追えないかもしれませんが、見た目の変化を要件と突き合わせるのが簡単になりそうです。

状態がある場合

でも、利用いているComposable関数が状態を持っている場合、どうやって欲しい条件でレンダリングさせるのでしょう？Composable関数の引数に任意の値を指定して状態を書き換えられるようにするのがまず一手として考えられます。rememberやLaunchedEffectを使うケースでは、remember値の初期値でレンダリングされるのでそれをうまく使ったり、Preview用のデータやモック的なものを用意する感じでしょうか。テストを書くのとやはり似てますね。

言語設定

あっ、@Previewアノテーションにlocale = "ja"をつけたら日本語設定でレンダリングされました。多言語で表示を確認するのに使えますね。

スクリーンショット

プレビュー画面を右クリックしたら「Copy Image」メニューで画面イメージがクリップボードに取得できました・・・業務でアプリを作っている人は、やりとりでスクリーンショットを多用するでしょうから、便利ですかね？スクリプトで一発でスクリーンショットを操作できると資料作成までできてよさそうだけど、どうでしょう？

一覧へ