4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Delphi の FireMonkey で UI 設計するときの便利なプロパティあれこれ

Last updated at Posted at 2018-09-26

FireMonkey プラットフォームは、VCL のコンテナじゃないと親になれないのと異なり、どのコンポーネント間でも親子関係を作れます
また、FireMonkey プラットフォームは Windows、macOS、iOS、Android 上で動作するネイティブアプリケーションを作ることができますので、画面の回転や、大きさの変更に対応する便利なプロパティが用意されています

次の4つの便利なプロパティについて例を使って説明します (クリックするとドキュメントのサイトに飛びます)

Align

整列するという単語の意味のとおり、コントロールを設定されたとおりに整列させるプロパティ
親のコントロールのサイズが変わっても自身の大きさは変わらずに設定されたところに整列します

色の設定が簡単にできる TRectangle コンポーネントを使っていくつか例をあげます

Rectangle1 の Align を Center とすると、Rectangle1 コントロールは常に親となる TForm コントロールの中心に整列します
設計時でも、実行時でも
fmxUi01.gif

Rectangle1 の Align を Top とすると、Rectangle1 は、親の TForm の常に上部に整列し、この Rectangle1 の子として設定した Rectangle2 の Align を Right にすると Rectangle2 は、親の Rectangle1 の常に右側に整列します
設計時でも、実行時でも
fmxUi02.gif

設計画面でビューをモバイルに設定すると、回転したときの画面の状態を確認することができるので、このプロパティを設定したときの UI イメージもつかみやすいですね
fmxUi03.gif

Anchors

アンカー = 錨 (イカリ: 船の停泊時に使用するアレ) の単語の意味のとおり、親となるコンポーネントに対して自分自身をどのように固定するかを指定するプロパティ
親のコントロールのサイズが変わると、固定された位置を保つよう自身の位置やサイズが変化する

こちらも同様に色の設定が簡単にできる TRectangle コンポーネントを使用して例をあげます

普通にコンポーネントを配置した際は、Anchors は akTop, akLeft に設定されているので、親コンポーネントとの上と左側の座標を死守します (赤の矢印の座標が死守されます)
anc01.png

設計時でも、実行時でも
anchor01.gif

Anchors を akTop, akBottom とすると、親コンポーネントとの上下の座標を死守します (赤の矢印の座標が死守されます)
anc02.png

そのため、親コンポーネントの高さが変わると、子コンポーネントの高さも変わります
設計時でも、実行時でも
anchor02.gif

Padding と Margins

Padding は、親コンポーネントが、子コンポーネントとの距離を指定するのに使用します
Margins は、子コンポーネントが、親コンポーネントとの距離を指定するのに使用します
ドキュメントの図が分かりやすいので貼っておきます
Margins_Padding_example.png

たとえば通常 Align プロパティを Client に設定すると、親の領域すべてに子コンポーネントが広がりますが、その際に Padding や、Margins を使うと、細かく位置調整ができます
たとえばボタンを画面の右に Align = Right で固定したけど、少し左に寄せたいとかね

またまた同様に色の設定が簡単にできる TRectangle コンポーネントを使用して例をあげます
この例では TForm の子として TRectangle(Rectangle1) コンポーネントがあり、さらにその子として TRectangle(Rectangle2) コンポーネントがあり、これは Align を Center に設定しています。
Rectangle1 の Align を Client に変更し、この Padding と Margins のプロパティを変更しています
margin01.gif

変更したあとの画面を回転させています
回転しても設定した距離はそのままです
margin02.gif

参考

docwiki - FireMonkey コントロールの配置

蛇足

C++Builder の FireMonkey アプリケーションを設計する場合も同じです

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?