»このセクションでは、複数の要素を作成したときに、要素間のスペースを調整する方法について学びます。して、利用者によって使っているディスプレイが異なっているということがあります。高解像度の大型ディスプレイ装置を使う利用者もいれば、低解像度のものを使う利用者もいます。異なったプラットフォームには、ユーザーインターフェイスの点で特殊な用件を考慮する必要があるものもあります。複数の言語をサポートする場合は、同じテキストでも他の言語より広いスペースが必要になるような言語があるかもしれません。複数のプラットフォームや言語をサポートする必要のあるアプリケーションでは、こういった問題に配慮して、ウィンドウのレイアウトで多めにスペースを置いておくのが普通です。プラットフォームやユーザーインターフェイスのツールキットの中には、利用者に表示する内容に応じて、自動的にリサイズと再配置を行うような賢いコンポーネントを提供している物もあります。要素の配置とサイズ変更を自動的に行なう機能があります。これまでのファイル検索ダイアログの作成作業で見てきたように、ウィンドウは内部にある要素に適した大きさで表示され、何かを追加するたびに大きくなっていきます。「ボックス・モデル」という名称のレイアウト・システムを使用しています。詳細については、後のセクションで触れますが、基本的にはウィンドウ上の要素を一連のボックスに所属させることで分割していき、各ボックスの位置と大きさを、開発者が定義可能な仕様に基づいて動的に変更することで最適なレイアウトを行います。要素がボックスのひとつであるという事だけ押さえておいてください。つの属性しか必要ありません。簡単なスペーサーは以下のようになります。flex="1"/>スペーサーはウィンドウに何もないスペースを設定するのに使用します。スペーサーの最も有効な能力は、利用者がウィンドウのサイズを変更するのに合わせて、大きくなったり小さくなったりすることです。これは、ボタンをウィンドウの右端または一番下に設定する際、ウィンドウの大きさが変化しても右端または一番下から動かないようにするために使うことができます。後で説明しますが、複数のスペーサーを組み合わせることで、いろいろなレイアウト効果を作成できます。定義するために使用します。これにより、スペーサー要素は伸縮性のあるものになります。このスペーサーをウィンドウの中に直接置いた場合、ウィンドウのサイズが変化すると、合わせてスペーサーも伸縮します。ファイル検索ダイアログにスペーサーを追加する作業を始める前に、まず現在のダイアログがリサイズされたらどうなるかを見てみることにします。ファイル検索ウィンドウの大きさを変更しても、要素は最初の位置から動かない事がわかります。ボタンの間に追加したら、どのように変わるかを見てみます。スペーサーを追加してウィンドウをサイズ変更すると、スペーサーが出来たスペースを埋めるようにして拡大されるのがわかると思います。拡大したスペーサーに押されて、ボタンは右に移動しています。ファイル検索ダイアログの例それでは、ファイル検索ダイアログの正しい位置に、スペーサーを追加しましょう。ボタンの直前に挿入してください。ウィンドウ内に要素をレイアウトする時には、その要素の適切な幅と高さを計算し、もしその要素が伸縮性を持つものであればスペースを追加します。要素の幅と高さについての情報を指定しなければ、要素のデフォルトの大きさはその内容から決定されます。ボタンが、いつも中のテキストに応じた幅に設定されていることから確認できると思います。非常に長いラベルを持つボタンを作成すれば、そのボタンのデフォルトの大きさは、ラベル全体を保持するのに充分な大きさになるはずです。テキストボックスなどの他の要素も、それぞれ適切なデフォルトサイズを決める方法を持っています。合わせて大きさを変更可能かどうかを指定するのに使用されます。属性は他の任意の要素にも適用することが可能です。ボタンの方をリサイズさせる場合の例を示します。属性を与えると、ウィンドウのリサイズ時にボタンもリサイズされるようになります。このことから、スペーサーは特別な要素でもなんでもなく、ただの隠れたボタンのようなものだと考えることも出来ます。スペーサーの動作は、画面に表示されるものが何も無いこと以外、ボタンとほとんど変わりません。ボタンが大きくなっているだけではなく、メインラベルとボタンの間のスペースも大きくなっていることも確認できます。このスペースは、その前に追加したスペーサーによるものなのですが、このスペーサーもまたリサイズされています。注意深く見ると、ウィンドウのサイズが変化した分が、スペーサーとボタンに対して均等に分配されていることがわかると思います。増えたスペースの半分はスペーサーが受け取り、残りの半分はボタンが受け取っています。属性を持っていることから生じています。ボタンとスペーサーのどちらにも伸縮性があるため、両方とも同じようにサイズ変更された訳です。大きな数値を使用することもできます。属性の値は、伸縮する割合を示します。倍拡大されることになります。倍であるという意味になります。空きスペースを子供のコンテナボックスの間に分配する方法を示しています。(ボックスについては後のセクションで見ていきます)。伸縮性の値は、子供のボックスのデフォルトサイズが確定した後に、ボックスに残った空きスペースを分配するために使用されます。ピクセル分のスペースが残っているはずです。ピクセル分の幅が追加されます。ピクセル分の追加スペースを受け取ることになります。ボックス中に、直接置いた要素に設定した場合のみ意味を持ちます。要素を含めて、何にでも設定することが可能ですが、設定した要素がボックス要素の中に無い場合は、なんの効果も発生しないという事です。指定について、いくつかの例を示します。つのボタンに均等に分配されます。どちらのボタンも同じ長さでサイズが変更されます。値を持っているためです。ボタンに割り振られることになります。つのボタンだけが伸縮可能なものとして設定されています。