マルチデバイス向けのUI設計
StyleBookを使う
VCLにもあったスタイルの機能は、FireMonkeyでより積極的に使われています。ちょうどHTML5に対するCSSのような位置付けで、ビューを定義するための重要な役割を担っています。
FireMonkeyでスタイルを使うには、TStyleBookコンポーネントを用います。コンポーネントをフォーム上にドロップしたら、ダブルクリックしてスタイルデザイナを開きます。ここで、Windows 10のダークスタイルを選択しましょう。
スタイルデザイナで定義を行っただけでは、フォームにスタイルは適用されません。フォームのStyleBookプロパティに配置したTStyleBook(この場合は、StyleBook1)を指定します。
画面右側のタブ「マルチデバイスプレビュー」をクリックすると、複数デバイス向けのプレビューが表示されます。この画面では、さまざまなデバイスで、現在設計しているUIが、どのように表示されるかを確認することができます。
TMultiViewとビヘイビアサービス
FireMonkeyでは、TSplitViewに相当するコンポーネントとしてTMultiViewが用意されています。ただ、TMultiViewはTSplitViewとはちょっと違います。
TSplitViewは、Windows専用なので、Windowsプラットフォームでの動作だけを考慮するだけですみます。一方、FireMonkeyのTMultiViewは、複数プラットフォームが対象となるため、OSごとの差、スクリーンのサイズや向きまで考慮しなければなりません。これをすべて手作業のコーディングで行うと、画面制御だけで膨大なコードになってしまいます。
そこでFireMonkeyでは、ビヘイビアサービスという実行時サービスが裏で動いています。ビヘイビアサービスを使えば、どのようなデバイスで動いているのかを理解し、最適な動作を実行時に選択できます。
TMultiViewは、ビヘイビアサービスを利用するUIコントロールです。つまり、デフォルトの動作であれば、特に指定しなくても、各デバイスで最適な表示にしてくれるのです。
次の図は、TMultiViewを使ったハンバーガーメニュー相当の機能です。
作り方も外見もほぼ同じですが、実際にはマルチデバイスを考慮した最適な表示を行ってくれます。