グリッドレイアウトとフローレイアウトを使用する

チュートリアル：FireMonkey レイアウトを使用するへの移動

このチュートリアルでは、FireMonkey レイアウトを使用して、シンプルな計算機インターフェイスを作成する方法を実例で説明します。

計算機のフォームの生成

［ファイル｜新規作成｜その他...｜Delphi プロジェクト｜マルチデバイスアプリケーション｜空のアプリケーション］を選択します。

Delphi HD アプリケーションの作成
フォームのサイズを 210x250（または計算機を作成したいサイズ）に変更します。それには、フォームを選択し、［オブジェクトインスペクタ］で Height と Width を設定します。
フォームに TFlowLayout を追加します。
- TFlowLayout を選択し、［オブジェクトインスペクタ］で次のように設定します。
  - Name を PrincipalLayout に設定します。
  - Align を None に設定します。
  - Justify を Center に設定します。
  - JustifyLastLine を Center に設定します。
  - VerticalGap を 3 に設定し、見た目が乱雑にならないようにします。

計算機の表示部

計算機ディスプレイとして表示されるよう、TEdit を PrincipalLayout に追加します。

TEdit を選択し、［オブジェクトインスペクタ］で次のように設定します。
- Name を Display に設定します。
- Width を 200（または指定したフォームサイズに合う別の値）に設定します。

計算機の表示部

計算機のボタン

計算機には、次のように多くの種類のボタンがあります。

メモリボタン：メモリキャンセル（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 に追加します。
- ［オブジェクトインスペクタ］で、各ボタンを次のように設定します。
  - Text を Backspace、C、CE にそれぞれ設定します。
  - Height を 30 または ManageInputDataButtons に指定した値と同じ値に設定します。
  - C ボタンおよび CE ボタンの Width を 50 または MemoryButtonsGrid ボタンの幅に指定した値と同じ値に設定します。
  - Backspace ボタンの Width を 100 または標準ボタンの幅の 2 倍に設定します。

数字ボタンと演算記号ボタン

+ と = は最もよく使われる演算記号なので、そのボタンは特別な扱いをします。残りの演算記号には標準サイズのボタンを使用します。

通常の操作ボタンを追加するには、PrincipalLayout に TGridLayout を追加します。
- TGridLayout を選択し、［オブジェクトインスペクタ］で次のように設定します。
  - Name を RegularOperationButtons に設定します。
  - Width を 200（または指定したフォームサイズに合う別の値）に設定します。
  - ItemWidth をレイアウト全体の Width の 4 分の 1 に設定します。この場合は 50 になります。
  - ItemHeight を 30（またはボタンの形に応じた別の値）に設定し、ボタンが長方形になるようにします。
  - Height を 30（または ItemHeight と同じ値）に設定します。
- 上記の通常の演算記号ごとに 1 個、合計 4 個の TButtons を RegularOperationButtons に追加します。
  - ボタンを順に選択し、［オブジェクトインスペクタ］で Text を +/-、/、*、- にそれぞれ変更します。
  結果は右の画像のようになります。
0 は最もよく使われる数字なので、0 ボタンは他の数字のボタンよりも大きくします。数字は 2 つのグループに分かれます。
- 1 から 9 のボタンは同じサイズであるため、TGridLayout で、3列3行に追加することができます。
- 0 と . のボタンは、他のボタンと同じサイズでないため、TFlowLayout として追加します。
1. すべての数字ボタンをグループ化するには、TFlowLayout を PrincipalLayout に追加します。
  - TFlowLayout を選択し、［オブジェクトインスペクタ］で次のように設定します。
    - Name を DigitsButtons に設定します。
    - Width を 150 または標準ボタンの幅の 3 倍に設定します。
    - Height を 120 または標準ボタンの高さの 4 倍に設定します。
    - Justify を Center に設定します。
    - JustifyLastLine を Center に設定します。
2. 標準の数字ボタンを追加するための TGridLayout オブジェクトを DigitsButtons に追加します。
  - TGridLayout を選択し、［オブジェクトインスペクタ］で次のように設定します。
    - Name を RegularDigitsButtons に設定します。
    - Width を 150 に設定します。
    - ItemWidth を 50 に設定します。
    - ItemHeight を 30 に設定します。
    - Height を 90 または標準ボタンの高さの 3 倍に設定します。
  - 1 から 9 まで、合計 9 個の TButtons を RegularDigitsButtons に追加します。
    - ボタンを順に選択し、［オブジェクトインスペクタ］で Text プロパティを右の図のように変更します。
3. 0 と . の数字ボタンを追加するための TFlowLayout オブジェクトを DigitsButtons に追加します。
  - TFlowLayout を選択し、［オブジェクトインスペクタ］で次のように設定します。
    - Name を SpecialDigitsButtons に設定します。
    - Width を 150 に設定します。
    - Height を 30 または標準ボタンの高さに設定します。
    - JustifyLastLine を Center に設定します。
  - 2 つの TButtons を SpecialDigitsButtons に追加します。
    - ［オブジェクトインスペクタ］で、各ボタンを次のように設定します。
      - Text を 0 および . に設定します。
      - Height を 30 または標準ボタンの高さに設定します。
      - . ボタンの Width を 50 または標準ボタンの幅に設定します。
      - 0 ボタンの場合、Width を 100 に、または、通常ボタンの幅の 2 倍の幅に設定します。
  結果は右の画像のようになります。
残りの操作ボタンを追加するには、TGridLayout を PrincipalLayout に追加します。
- TGridLayout を選択し、［オブジェクトインスペクタ］で次のように設定します。
  - Name を SpecialOperationButtons に設定します。
  - Width を 50 または標準ボタンの幅と同じ値に設定します。
  - ItemWidth を 50 に設定します。
  - ItemHeight を 60 または標準ボタンの高さの 2 倍の値に設定します。
  - Height を 120 または ItemHeight の 2 倍の値に設定します。
- 2 つの TButtons を SpecialOperationButtons に追加します。
  - ボタンを順に選択し、［オブジェクトインスペクタ］で Text を + または = にそれぞれ設定します。

インターフェイスは次の図のようになります。

前のトピック

レイアウトを使用して拡大/縮小効果を作成する

グリッドレイアウトとフローレイアウトを使用する

目次

計算機のフォームの生成

計算機の表示部