グリッド レイアウトとフロー レイアウトを使用する
チュートリアル:FireMonkey レイアウトを使用する への移動
このチュートリアルでは、FireMonkey レイアウトを使用して、シンプルな計算機インターフェイスを作成する方法を実例で説明します。
目次
計算機のフォームの生成
- [ファイル|新規作成|その他...|Delphi プロジェクト|マルチデバイス アプリケーション|空のアプリケーション]を選択します。
- フォームのサイズを 210x250(または計算機を作成したいサイズ)に変更します。それには、フォームを選択し、[オブジェクト インスペクタ]で Height と Width を設定します。
- フォームに TFlowLayout を追加します。
-
- TFlowLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- Name を PrincipalLayout に設定します。
- Align を
None
に設定します。 - Justify を
Center
に設定します。 - JustifyLastLine を
Center
に設定します。 - VerticalGap を
3
に設定し、見た目が乱雑にならないようにします。
- TFlowLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
-
計算機の表示部
計算機ディスプレイとして表示されるよう、TEdit を PrincipalLayout に追加します。
- TEdit を選択し、[オブジェクト インスペクタ]で次のように設定します。
計算機の表示部
計算機のボタン
計算機には、次のように多くの種類のボタンがあります。
- メモリ ボタン: メモリ キャンセル(MC)、メモリ リコール(MR)、メモリへの追加(M+)、メモリからの抽出(M-)
- 入力データを管理するボタン: Backspace - クリア/キャンセル(C)、キャンセル入力(CE)。
- 操作: +、-、*、/、符号変更(+/-)。
- 等号ボタン =
- 数字ボタン(0~9)、および点ボタン(.)。
この計算機には合計で 25 個のボタンがあります。使いやすいよう、重要な(よく使われる)ボタンは、他のボタンの 2 倍のサイズにします。重要なボタンとは、Backspace、+、=、0 です。このレイアウトでは、標準ボタンのサイズは横 50
ピクセル、縦 30
ピクセルにします。
メモリ関連のボタン
メモリ ボタンの場合、TGridLayout を PrincipalLayout に追加します。
- TGridLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- Name を MemoryButtonsGrid に設定します。
- Width を
200
(または指定したフォーム サイズに合う別の値)に設定します。 - ItemWidth をレイアウト全体の Width の 4 分の 1 に設定します。この場合は
50
になります。 - ItemHeight を
30
(またはボタンの形に応じた別の値)に設定し、ボタンが長方形になるようにします。 - Height を
30
に設定するか、または ItemHeight として同じ値を設定します。これは、様態を PrincipalLayout に保持します。
- 4 つの TButtons を MemoryButtonsGrid に、それぞれ上記に列記された各メモリ操作に追加します。
- ボタンを順に選択し、[オブジェクト インスペクタ]で Text を MC、MR、M+、M- にそれぞれ変更します。
結果は右の画像のようになります。
入力データを管理するボタン
入力データ管理ボタンは、同じ幅ではありませんので、フォームに別の TFlowLayout と介して追加されます。TFlowLayout を PrincipalLayout に追加します。
- 追加した TFlowLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- Name を ManageInputDataButtons に設定します。
- JustifyLastLine を
Center
に設定します。 - Width を
200
(または MemoryButtonsGrid に指定した値と同じ値)に設定します。 - Height を
30
(または MemoryButtonsGrid に指定した値と同じ値)に設定します。
- 3 つの TButton オブジェクトを ManageInputDataButtons に追加します。
数字ボタンと演算記号ボタン
+ と = は最もよく使われる演算記号なので、そのボタンは特別な扱いをします。残りの演算記号には標準サイズのボタンを使用します。
- 通常の操作ボタンを追加するには、PrincipalLayout に TGridLayout を追加します。
- TGridLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- Name を RegularOperationButtons に設定します。
- Width を
200
(または指定したフォーム サイズに合う別の値)に設定します。 - ItemWidth をレイアウト全体の Width の 4 分の 1 に設定します。この場合は
50
になります。 - ItemHeight を
30
(またはボタンの形に応じた別の値)に設定し、ボタンが長方形になるようにします。 - Height を
30
(または ItemHeight と同じ値)に設定します。
- 上記の通常の演算記号ごとに 1 個、合計 4 個の TButtons を RegularOperationButtons に追加します。
- ボタンを順に選択し、[オブジェクト インスペクタ]で Text を +/-、/、*、- にそれぞれ変更します。
- 結果は右の画像のようになります。
- TGridLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- 0 は最もよく使われる数字なので、0 ボタンは他の数字のボタンよりも大きくします。数字は 2 つのグループに分かれます。
- 1 から 9 のボタンは同じサイズであるため、TGridLayout で、3列3行に追加することができます。
- 0 と . のボタンは、他のボタンと同じサイズでないため、TFlowLayout として追加します。
- すべての数字ボタンをグループ化するには、TFlowLayout を PrincipalLayout に追加します。
- TFlowLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- Name を DigitsButtons に設定します。
- Width を
150
または標準ボタンの幅の 3 倍に設定します。 - Height を
120
または標準ボタンの高さの 4 倍に設定します。 - Justify を
Center
に設定します。 - JustifyLastLine を
Center
に設定します。
- TFlowLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- 標準の数字ボタンを追加するための TGridLayout オブジェクトを DigitsButtons に追加します。
- TGridLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- Name を RegularDigitsButtons に設定します。
- Width を
150
に設定します。 - ItemWidth を
50
に設定します。 - ItemHeight を
30
に設定します。 - Height を
90
または標準ボタンの高さの 3 倍に設定します。
- 1 から 9 まで、合計 9 個の TButtons を RegularDigitsButtons に追加します。
- ボタンを順に選択し、[オブジェクト インスペクタ]で Text プロパティを右の図のように変更します。
- TGridLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- 0 と . の数字ボタンを追加するための TFlowLayout オブジェクトを DigitsButtons に追加します。
- TFlowLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- Name を SpecialDigitsButtons に設定します。
- Width を
150
に設定します。 - Height を
30
または標準ボタンの高さに設定します。 - JustifyLastLine を
Center
に設定します。
- 2 つの TButtons を SpecialDigitsButtons に追加します。
- 結果は右の画像のようになります。
- TFlowLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- 残りの操作ボタンを追加するには、TGridLayout を PrincipalLayout に追加します。
- TGridLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
- Name を SpecialOperationButtons に設定します。
- Width を
50
または標準ボタンの幅と同じ値に設定します。 - ItemWidth を
50
に設定します。 - ItemHeight を
60
または標準ボタンの高さの 2 倍の値に設定します。 - Height を
120
または ItemHeight の 2 倍の値に設定します。
- 2 つの TButtons を SpecialOperationButtons に追加します。
- ボタンを順に選択し、[オブジェクト インスペクタ]で Text を + または = にそれぞれ設定します。
- TGridLayout を選択し、[オブジェクト インスペクタ]で次のように設定します。
インターフェイスは次の図のようになります。