配置の基礎 および 並べ配置について と合わせてお読みください

　配置の基礎 において、「配置ＩＤの取得」とその「配置」というように２段に分けると説明しました。その理由は、配置ＩＤに対して各種属性を設定できるようにするためです。以下はそれらを解説します。
　なお、この章で解説する配置は「並べ配置」という種類です。そのほかに、「座標配置」、「格子配置」という配置手段もあります。後者２つについては その他の配置手段 をお読みください。



　たとえば、２つのボタンを縦方向に配置すると以下のようになります。

　・−−−−−−・　←ウィンドウの外枠
　｜・−−−−・｜
　｜｜ボタン１｜｜　←ボタン
　｜・−−−−・｜
　｜・−−−−・｜
　｜｜ボタン２｜｜　←ボタン
　｜・−−−−・｜
　・−−−−−−・

　ウィンドウサイズはこの二つのボタンをぴったり包み込むよう自動調整されるため窮屈に感じるかも知れません。
　ウィジェット配置に余裕を持たせるのに以下の方法があります。

1. ウィンドウサイズを明に指定

一見すると良い方法のように思えますが、その後のプログラム修正でウィジェットが大きくなったり、ウィジェットの数が増えたりすると、その都度、適切なウィンドウサイズを考える必要があり煩雑です。

2. パディングを使う

「パディング」とは詰め物です。このケースでは配置に対してパディングを指定することで空きを作ることができます。その後のプログラム修正でウィジェットが大きくなったり、ウィジェットの数が増えた場合であっても、GUIライブラリが適切に調整してくれます。

　二つのウィジェットを収容する”配置”にパディングを指定することで以下のように余裕が生まれます。（サンプル："padding-for-pack.exe" を実行してみてください）

　・−−−−−−−−・　←ウィンドウの外枠（=配置）
　｜　　　　　　　　｜
　｜　・−−−−・　｜
　｜　｜ボタン１｜　｜　←ボタン
　｜　・−−−−・　｜
　｜　　　　　　　　｜
　｜　・−−−−・　｜
　｜　｜ボタン２｜　｜　←ボタン
　｜　・−−−−・　｜
　｜　　　　　　　　｜
　・−−−−−−−−・

■配置へのパディング
　配置内に収容するウィジェット群周辺に隙間を作ります。
　「パディングを設定」は幅と高さ両方に作用します。「パディングの幅を設定」と「パディングの高さを設定」は個別に作用します。
       プログラム例：

■ウィジェットへのパディング

　ウィジェットに対してパディングを指定した場合は、ウィジェット内部、つまり、ウィジェット内に描画した文字周辺に空白を作ります（ウィジェットの外側ではありません）。
　文字周辺の空白を大きくする目的のほか、小さくする目的でも利用できます。もしデフォルトのままでボタンの文字周辺の空白がフォントサイズのわりには大きいと感じた場合は、あえて小さな値でパディングを指定してみてください。（本ライブラリ装備のダイアログのボタンはそのようにしています）

■パディング関係のサンプルを走らせて確認
　３つのプログラムを用意しています。実際に走らせてパディングの効果を確認してください。
       サンプルプログラム：



【上向き三角形の配置】
　次の図のような三角形の配置を考えてみます。

　・−−−−−−−−−−−−・
　｜　　　・−−−−・　　　｜
　｜　　　｜ラベル１｜　　　｜　←配置１
　｜　　　・−−−−・　　　｜
　｜・−−−−・・−−−−・｜
　｜｜ラベル２｜｜ラベル３｜｜　←配置２３
　｜・−−−−・・−−−−・｜
　・−−−−−−−−−−−−・

　上のような配置を実現するのが次のサンプルです。
　　　　　　side-top-3labels.src

〜略〜

　　　　（配置のＩＤ）
　　　　　　ラベル１を　並べ配置のＩＤを取得し　配置１に　入れ　　←ラベル１用

　　　　　　ラベル２と　ラベル３を　２個で
　　　　　　　これらの並べ配置のＩＤを取得し　配置２３に　入れ　　←ラベル２と３用

　　　　（並べ方向）
　　　　　　左から右を　配置２３に　並べ方向を設定し

　　　　（配置）
　　　　　　配置１を　　配置し
　　　　　　配置２３を　配置し

　まず三角形の頂点である「ラベル１」を配置します。並べ方向はデフォルトの”上から下”なので、ラベル１の下方向には余裕があります。そこへ配置２３を置く感じになります。配置２３の並べ方向として”左から右”を指定しているので、ラベル２とラベル３は横に並ぶことになります。

【下向き三角形の配置】（失敗版）
　では今度は下向き三角形です。

　・−−−−−−−−−−−−・
　｜・−−−−・・−−−−・｜
　｜｜ラベル１｜｜ラベル２｜｜　←配置１２
　｜・−−−−・・−−−−・｜
　｜　　　・−−−−・　　　｜
　｜　　　｜ラベル３｜　　　｜　←配置３
　｜　　　・−−−−・　　　｜
　・−−−−−−−−−−−−・

　普通に書くなら次のような記述になります。
　　　　　　side-top-3labels-bad.src

〜略〜
　　　　（配置のＩＤ）
　　　　　　ラベル１と　ラベル２を　２個で
　　　　　　　　これらの並べ配置のＩＤを取得し　配置１２に　入れ
　　　　　　左から右を　配置１２に　並べ方向を設定し

　　　　　　ラベル３を　並べ配置のＩＤを取得し　配置３に　入れ

　　　　（配置）
　　　　　　配置１２を　配置し
　　　　　　配置３を　　配置し

　実行結果は次のようになります。

　・−−−−−−−−−−−−−−−−−−・
　｜・−−−−・・−−−−・・−−−−・｜
　｜｜ラベル１｜｜ラベル２｜｜ラベル３｜｜
　｜・−−−−・・−−−−・・−−−−・｜
　・−−−−−−−−−−−−−−−−−−・

　予想に反してすべて横並びになってしまいました。理由は以下のようなものです。
　まずラベル１とラベル２を横方向に配置しました。この直後、横方向には配置の余裕がありますが、縦方向には有りません。そのため余裕のある”もっと右”の場所にラベル３が配置されてしまいました。
　整理します。
　縦方向の配置では縦に配置余裕がありますが横には有りません（たとえ見た目が空いていたとしても）。
　逆に、横方向の配置では横方向に配置余裕がありますが縦には有りません。
　先のプログラムでラベル１と２を横に配置した直後の以下の状態では、

　　　　　　→　並べ方向　→
　・−−−−−−−−−−−−−−−−−・
　｜・−−−−・・−−−−・　　　　　｜
　｜｜ラベル１｜｜ラベル２｜ ←　 →　｜
　｜・−−−−・・−−−−・余裕あり　｜
　｜　　 ↑　　　　　↑ 　　　　　　　｜
　｜　１が占有し　２が占有し　　　　　｜
　｜　余裕無し　　余裕無し　　　　　　｜
　｜　　 ↓　　　　　↓ 　　　　　　　｜
　・−−−−−−−−−−−−−−−−−・

　上記のように、横並びをしたウィジェットの下方は見えない占有領域があると考えてください。この占有領域には（簡単な配置では）他のウィジェットを置けません。

【下向き三角形の問題解決】
　上の問題は、「ラベル３」（三角形の頂点）の並べ方向を”下から上”にすることで解決します。
　　　　　　side-bottom-3labels.src

〜略〜

　　　　（配置のＩＤ）
　　　　　　ラベル１と　ラベル２を　２個で
　　　　　　　これらの並べ配置のＩＤを取得し　配置１２に　入れ
　　　　　　左から右を　配置１２に　並べ方向を設定し

　　　　　　ラベル３を　並べ配置のＩＤを取得し　配置３に　入れ
　　　　　　下から上を　配置３に　並べ方向を設定し　　　　　←★注目

　　　　（配置）
　　　　　　配置３を　　配置し　　　　　←★三角形の頂点を先に
　　　　　　配置１２を　配置し

　上記では下向き三角の頂点である「ラベル３」の並べ方向を下から上にしています。

ま
と
め

縦・横混在ではウィジェット３つまでは比較的簡単。特に上向き三角配置は容易。
下向き三角は下段の頂点の並べ方向を”下から上”かつ先に配置すると良い。
それ以上複雑な配置（田の字など）は ”フレーム”または ”格子配置”を使う。
　→フレームの解説は フレーム に
　→格子配置の解説は 格子配置 に

■並べ方向を設定
       プログラム例：
　ウィジェットをどの方向に並べるかは、ウィジェットへの設定ではなく、それを担当する配置への属性設定となります。
　上の例で”配置１”は ラベル１， ラベル２、 ボタン１ を担当しますが、それらの並び順は配置１の属性として指定します。
　「上から下」がデフォルトのため、それで良いなら指定する必要はありません。

■横に伸ばす、縦に伸ばす、縦横に伸ばす

       サンプルプログラム：
　配置に含まれるウィジェットを横や縦に伸ばした状態で配置します。
　デフォルトの並べ方向は”上から下”で、ウィジェットは横方向を占有領域とするため横方向へは伸ばすことができます。しかし縦方向の占有領域は保有していないため「縦に伸ばす」ことはできないことに注意してください。
　並べ方向を「左から右」（あるいは右から左）にした場合にはこれが逆になり、縦には伸ばせますが横へは伸ばせません。

■占有領域を拡張
       プログラム例：
　配置に含まれるウィジェットが保有する占有領域を拡張します。これにより、上から下の並べ方向のときのウィジェットの上下方向に拡張余地ができます。
　「縦に伸ばす」を併用すれば縦方向にウィジェットを、あるいはウィジェットの周りの空き領域を伸ばすことができます。
　逆に、左から右の並び方向のときのウィジェットでは左右方向に拡張の余地ができ、「横に伸ばす」を併用すれば横方向にウィジェットを伸ばすことができます。
　ただ、上から下に並べたウィジェットを上下に伸びるようにすること、あるいは左から右に並べたウィジェットを左右に伸びるようにすることは、デザイン上かえって変な感じなるかも知れません。たとえば電卓の数字ボタンがウィンドウサイズに従って伸び縮みすると違和感があるのと同じです。

■配置に収容するウィジェットの寄せ
　（ウィジェットの「寄せを設定」と同じものですが解説を分けました） 　配置あるいはフレームに収容するウィジェットの寄せを指定するものです。デフォルトは中央寄せです。
       プログラム例：
       サンプルプログラム：
　サンプルプログラムの anchor-pack.src について補足します。
　全体としては次のようなレイアウトになっています。

　・−−−−−−−−−−−−−−−−−−・
　｜　　　　　　・−−−−・　　　　　　｜
　｜　　　　　　｜ラベル１｜　　　　　　｜　←配置１
　｜　　　　　　・−−−−・　　　　　　｜
　｜　　　　　　　　　　　　　　　　　　｜
　｜・−−−−・・−−−−・　　　　　　｜
　｜｜ラベル２｜｜ラベル３｜　　　　　　｜　←フレーム中段
　｜・−−−配置２３−−−・　　　　　　｜
　｜　　　　　　　　　　　　　　　　　　｜
　｜・−−−−・　　　　　　・−−−−・｜
　｜｜ラベル４｜　　　　　　｜ラベル５｜｜　←フレーム下段
　｜・−配置４・　　　　　　・−配置５・｜
　｜　　　　　　　　　　　　　　　　　　｜
　・−−−−−−−−−−−−−−−−−−・

　フレーム中段にはラベル２とラベル３を収容しています。フレーム中段に対して「西寄せ」を指定しています。（配置２３に対して寄せを指定しても無視されます）
　フレーム下段にはラベル４とラベル５を収容しています。それぞれのラベルが位置的に分離しているため別々に配置ＩＤを割り当て、それぺれ「左から右」「右から左」の並べ方向を指定しています。この並べ方向のみで左右に配置されるため、フレームでは寄せを指定していません。



　フレームはウィジェットを収容するための（入れ物としての）ウィジェットです。デフォルトでは透明で見えないため存在を主張することはありません。
　概念としては配置と少し似ていますが、配置は文字通り配置するための仕組みなのに比べ、フレームはウィジェットとしての実体があります。たとえば意図的に背景色を塗ったり、枠が見えるようにすることもできます。
　「フレームに複数のウィジェットを収容し、それを配置する」という使い方になります。この仕組みを使うことでかなり複雑なウィジェット配置も可能になります。フレームをさらに上位フレームに収容することもできます。

■フレームのＩＤを取得
　フレームのＩＤを取得します。フレームはウィジェットの一種であるため、扱いはウィジェットＩＤとほとんど同じになります。
　前者はＩＤ取得と同時にそれを有効化してしまいます。通常は引き続いてそのフレームに収容するウィジェットの定義に入るため、フレームＩＤの取得直後に有効化することが多く、その便宜のため「フレームのＩＤを取得して有効化」という単語を設けています。
　後者はＩＤ取得のあと、そのフレームに対して属性設定をしたい場合に使ってください。

■サンプルソースの解説
　サンプルプログラムをご覧ください。（要所だけ示します。実際に起動してみてください）
       side-frame-4labels.src：

←フレーム上段

←フレーム下段
　上のソースコードを解説します。
　まず「フレーム上段」と「フレーム下段」という２つのフレームを用意しています。フレームのＩＤを取得すると同時に有効化しています。
　続いてラベルを定義します。
　次に、ラベル１と２を収容する「配置上段」を作って配置し、次いでラベル３と４を収容する「配置下段」を作って配置します。
　最後に２つのフレームを「配置全体」というＩＤに統合して配置しています。
　このようにすることで、多少手間はかかりますが田の字型のウィジェット配列を確実におこなうことができます。
　ポイントの一つは以下の部分です。
　上のように、ウィジェットのＩＤを取得する際、親ウィジェットとしてフレームを指定します。これによりラベル１と２がフレームに所属することが示されます。
　次のポイントは以下の部分です。
　このように、フレームを通常ウィジェットのように扱い、配置をおこないます。

• 
• 　　　　　　　　　　　　　　　　
• 　　

---