


 
 
 
 
 
 
 |
DelphiXE3 [FMX] グリッドレイアウト(GridLayout)2014/01/02 |
前回は [Layouts]内の「拡大縮小可能レイアウト」(ScaledLayout)について見てみました。今回は同じく[Layouts]内の「グリッドレイアウト」(GridLayout)について見ていきます。
[Layouts]内
FMX |  |
ヘルプより。
各セルのサイズが等しいグリッド内に子コントロールを整列させるコントロールです。
TGridLayout の子は、ItemHeight プロパティおよび ItemWidth プロパティで指定されたサイズに合わせてサイズ変更されます。Orientation が orHorizontal に設定されている場合、TGridLayout の子コントロールは、レイアウトの Width を超えるまで 1 つずつ横に並べられ、その後、グリッドに新しい行が追加されます。Orientation が orVertical に設定されている場合、TGridLayout の子コントロールは、レイアウトの Height を超えるまで 1 つずつ縦に並べられ、その後、グリッドに新しい列が追加されます。
メモ:TFlowLayout 内のコントロールの Align プロパティは無視されます。子コントロールの Position、Height、Width の各プロパティは自動的に設定されるため、その値を明示的に変更しても効果がありません。
グリッド レイアウトは、グラフィック オブジェクト用のコンテナであり、次の図に示すように、含まれているオブジェクトをグリッド内に整列させることができます。 |

 |
ItemHeight
グリッド レイアウトのコントロールにおいて、項目を保持している各セルの高さを示します。
ItemHeight を ItemWidth を組み合わせて使用すると、このグリッド レイアウトの一部であるグラフィカル オブジェクトの縦横比を変更します。 |
ItemWidth
グリッド レイアウトのコントロールにおいて、項目を保持している各セルの幅を示します。
ItemWidth を ItemHeight を組み合わせて使用すると、このグリッド レイアウトの一部であるグラフィカル オブジェクトの縦横比を変更します。 |
Orientation
このグリッドの一部であるグラフィカル コントロールの方向を示します。
Orientation プロパティは、orHorizontal または orVertical に設定でき、グリッドの方向(およびこのグリッド内のグラフィカル オブジェクトの位置)を水平方向(左から右)または垂直方向(上から下)に変更することができます。 |
|
まずは、グリッドレイアウト(GridLayout)を配置し、大きさを決めます。
例として、ラベルを均等に並べたいとします。
このグリッドレイアウトを選択している状態で、ツールパレットにて、[Standard]内の ラベル(Label)をダブルクリックします。(勿論、ツールバーでも構いません)
すると、グリッドレイアウト内に ラベル(Label1)が配置されます。
更に何度もダブルクリックをしていくと、ラベルが均等に並べられていくのが分かります。
グリッドレイアウトの ItemWidth プロパティをデフォルトの「64」から「75」にしてみます。ラベル間が広がるのが分かります。
配置したラベルを選択してオブジェクトインスペクタを見ると、Width・Heightプロパティの値がそれぞれ、グリッドレイアウトの ItemWidth・ItemHeightプロパティと同じ値になっており、ラベルの Width・Heightプロパティ値を変更することが出来ない、という事が確認出来ます。
デフォルト状態(Orientation プロパティ=「orHorizontal」)では、水平方向→垂直方向、で並べられますが、Orientation プロパティを「orVertical」にすると、垂直方向→水平方向で並べられます。
「グリッド」という名前から「グリッド線」=区画線の表示がありそうな感じがしますが、ぱっと見た感じでは、無さそうですね。
ボタンを配置したとします。
ボタンが詰め詰めだと嫌だから少し隙間を開けたい、というような場合は、各ボタンの Padding プロパティ値を指定すれば良いようですね。下図は、ボタン Button1〜3 の Padding プロパティ各値に「2」を指定した場合です。
|
|
バッチファイル
BASIC
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Delphi入門編
>Delphi2010
>DelphiXE3
▲2014/01/01
2014/01/02
▼2014/01/03
シェアウェア
Script!World
データベース
|