ITを駆使する猫エンジニア

 おはようございます、童爺です。

 

 昨日のブログで「ちなみにこれまで紹介してきた画面やダイアログボックスは全て幅が375に統一してあります。」

 続けて

「これは、スマートフォンで表示した際に画面が収まる様に配慮した結果です。」と書きました.。

 

 ですが、そんな事を意識しなくてもプラットフォームに合わせてサイズやスタイルを変更出来る様です。

 

 との助言をTwitterで頂きました。

 

 で、紹介されたスライドページ?を紹介してもらって勉強していたのですが、最新のrioとtokyoではStylebookのインタフェースが違っていて、四苦八苦したので、とりあえず出来た所から紹介したいと思います。

 

 まず、下図のUIデザイン画面を表示させます。

 

 で、TStylebookコンポーネントを貼り付け、同コンポーネントをダブルクリックします。

 

 そうすると、以下の画面が追加されるので、赤丸で囲った部分をクリックします。

 

 そうすると以下のダイアログボックスが表示されるので、WindowsからAndroid迄、全て選択し追加していきます。

 

 上記の作業が終わったら、現在表示されているスタイルデザイナを閉じます。

 

 下図のダイアログボックスで「はい」をクリックします。

 

 UI設計画面に戻ってきたら、オブジェクトインスペクタのStylebookプロパティにTStylebookの名前を設定します。

 ↓

 

 そうしましたら、スタイル:で表示されているWindowsをクリックして他のOSを選択してみましょう。

 

 macOSでは以下のデザインになる。

 

 iOSではこう。

 

 Androidではこうなります。

 

 各OSに合わせて、サイズ変更したりテーマ(Darkとか)は、未だ解りませんでしたが、とりあえずこんな所で。

 


 

 それではまた。

 

 でわでわ。