ウィンドウ部品によるGUIのアプリを作る場合に、ウィンドウに合わせて部品の大きさを変えたいことがあります。ウィンドウに合わせて部品の大きさを変える方法は、状況にあわせて3つの方法があります。「ドッキング方向」設定項目と「位置固定方向」設定項目は、設定項目を設定するだけで自動的に大きさを調整してくれる便利な機能です。
ドッキング方向
「ドッキング方向」は、常にウィンドウの上下左右のいずれの隅に配置したい時や、ウィンドウと同じ大きさに固定したい時に便利な設定項目です。
ドッキング方向: 全体
部品をウィンドウ全体に合わせて調整します。
ドッキング方向: 上
部品を画面上部に固定します。部品の幅はウィンドウの幅に合わせて調整されます。
ドッキング方向: 下
部品を画面下部に固定します。部品の幅はウィンドウの幅に合わせて調整されます。
ドッキング方向: 左
部品を画面左側に固定します。部品の高さはウィンドウの高さに合わせて調整されます。
ドッキング方向: 右
部品を画面右側に固定します。部品の高さはウィンドウの高さに合わせて調整されます。
複数部品を組み合わせたドッキング
複数の部品にドッキング方向を設定することもできます。複数の部品がある場合は、部品を貼り付けた順に大きさが調整されます。
部品が重なる場合は部品を最前面へ
複数部品をドッキングした時に、部品どおしが重なる場合は、部品を「最前面」または「最背面」に設定して、大きさを調整する順番を変えます。
位置固定方法
「位置固定方向」は、ウィンドウの大きさに合わせてウィンドウ四隅と部品との距離が維持されるように、部品の位置と大きさを自動調整する設定項目です。部品を四隅の任意の位置で固定する時に便利です。
「位置固定方向」の既定値は、「左+上」です。例えば、「右+下」に設定すると、その部品が右下に固定されます。
左右で固定すると、ウィンドウの幅に合わせて部品の幅が調整されます。ウィンドウの左右端と部品との距離は維持されるので、余白は変わりません。
上下左右をすべて固定すると、ウィンドウの大きさに合わせて部品の大きさが調整されます。ウィンドウ四隅と部品との距離は維持されるので、余白は変わりません。
パネルに部品を配置した時のドッキング方向と位置固定方向
パネルの中に部品を配置すると、ドッキング方向と位置固定方向は、そのパネルの大きさに対して調整されます。例えば、分割パネルの中に部品を貼り付けた場合は、2つの領域でそれぞれで部品が自動的に調整されます。
大きさが変わった時の手順
「ドッキング方向」設定項目と「位置固定方向」設定項目で、よく使う部品の大きさ調整が簡単に実現できますが、条件分けが必要な場合や、位置と大きさの比率が決まっている場合には、「大きさが変わった時」のイベント手順を使います。
このイベント手順は、ウィンドウの大きさが変わったときに実行される手順です。このイベントが発生した時にそれぞれの部品の大きさを変えることで、手動で部品の大きさを変えることができます。
メイン画面を表示する
待機する
メイン画面とは
ウィンドウを継承する
はじめの手順
初期化する
終わり
初期化する手順
この実質大きさを｛428,394｝に変える
この内容を「メイン画面」に変える
初期化開始する
ボタン1というボタンを作る
その位置と大きさを｛157,174,112,34｝に変える
その内容を「ボタン1」に変える
初期化終了する
この設計スケール比率を｛144,144｝に変える
終わり
大きさが変わった時の手順
もし自分の表示でないなら抜け出す
ボタン1の位置を{(実質大きさの幅-ボタン1の幅)/2,(実質大きさの高さ-ボタン1の高さ)/2}に変える
終わり
終わり
表示スケール(DPI)による表示崩れに対応する
プロデルは、高DPI表示に対応しています。このため、PCの表示スケールを100%以外に設定した場合でも線や文字が綺麗に表示されます。ただし、開発したPCの表示スケールと、アプリを起動したPCの表示スケールが異なると、部品の大きさが崩れることがあります。
このような崩れを防止するには、「設計スケール比率」を設定します。「設計スケール比率」は、開発したPCの表示スケールを設定するための設定項目です。表示スケールを100%とした時は{96,96}です。アプリを起動したPCと開発PCの表示スケールが異なる場合は、この比率を使って位置と大きさが自動的に調整されます。「設計スケール比率」は、プロデルデザイナの「ウィンドウの設計」画面を使うと自動的に設定されます。
この設計スケール比率を｛144,144｝に変えるまとめ
「ドッキング方向」設定項目と「位置固定方向」設定項目を使うと、設定するだけで自動的に部品の大きさを調整してくれます。ぜひ活用してください。