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

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

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

- [Align](http://docwiki.embarcadero.com/Libraries/Tokyo/ja/FMX.Controls.TControl.Align)
- [Anchors](http://docwiki.embarcadero.com/Libraries/Tokyo/ja/FMX.Controls.TControl.Anchors) 
- [Padding](http://docwiki.embarcadero.com/Libraries/Tokyo/ja/FMX.Controls.TControl.Padding) 
- [Margins](http://docwiki.embarcadero.com/Libraries/Tokyo/ja/FMX.Controls.TControl.Margins)

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

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

Rectangle1 の Align を Center とすると、Rectangle1 コントロールは常に親となる TForm コントロールの中心に整列します
設計時でも、実行時でも
![fmxUi01.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/700f73e5-cb11-9206-9719-4a70d4edc3ec.gif)

Rectangle1 の Align を Top とすると、Rectangle1 は、親の TForm の常に上部に整列し、この Rectangle1 の子として設定した Rectangle2 の Align を Right にすると Rectangle2 は、親の Rectangle1 の常に右側に整列します
設計時でも、実行時でも
![fmxUi02.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/186314cd-0f13-7ce8-8962-8d98f69fe5f0.gif)

設計画面でビューをモバイルに設定すると、回転したときの画面の状態を確認することができるので、このプロパティを設定したときの UI イメージもつかみやすいですね
![fmxUi03.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/316611b0-5c0d-3876-6b39-33d0567ccaed.gif)

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

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

普通にコンポーネントを配置した際は、Anchors は akTop, akLeft に設定されているので、親コンポーネントとの上と左側の座標を死守します (赤の矢印の座標が死守されます)
![anc01.png](https://qiita-image-store.s3.amazonaws.com/0/164551/e7b508a2-397c-009f-7277-38cd6981b5eb.png)

設計時でも、実行時でも
![anchor01.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/c0aeea79-0632-1508-bb78-08a772eeb4de.gif)

Anchors を akTop, akBottom とすると、親コンポーネントとの上下の座標を死守します (赤の矢印の座標が死守されます)
![anc02.png](https://qiita-image-store.s3.amazonaws.com/0/164551/6c8a710b-4f86-8797-2748-894d645781f1.png)

そのため、親コンポーネントの高さが変わると、子コンポーネントの高さも変わります
設計時でも、実行時でも
![anchor02.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/0d67c3db-d989-664c-50cc-b33c773aa3fd.gif)

## Padding と Margins
Padding は、親コンポーネントが、子コンポーネントとの距離を指定するのに使用します
Margins は、子コンポーネントが、親コンポーネントとの距離を指定するのに使用します
ドキュメントの図が分かりやすいので貼っておきます
![Margins_Padding_example.png](https://qiita-image-store.s3.amazonaws.com/0/164551/82ff4afe-834c-d9eb-19f6-b25c9731d962.png)

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

またまた同様に色の設定が簡単にできる TRectangle コンポーネントを使用して例をあげます
この例では TForm の子として TRectangle(Rectangle1) コンポーネントがあり、さらにその子として TRectangle(Rectangle2) コンポーネントがあり、これは Align を Center に設定しています。
Rectangle1 の Align を Client に変更し、この Padding と Margins のプロパティを変更しています
![margin01.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/98d7b0e3-0ea2-34e9-8771-8011683a8abf.gif)

変更したあとの画面を回転させています
回転しても設定した距離はそのままです
![margin02.gif](https://qiita-image-store.s3.amazonaws.com/0/164551/79259a8a-f01e-1c6b-0f56-7419e021c331.gif)

## 参考
[docwiki - FireMonkey コントロールの配置](http://docwiki.embarcadero.com/RADStudio/Tokyo/ja/FireMonkey_%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AE%E9%85%8D%E7%BD%AE)

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