サイズ変更可能なウィンドウの作成方法（１）
uLilithフェイスはアイテムの配置・設定によっては
「ウィンドウの特定の部分をドラッグすることによりサイズ変更が可能なウィンドウ」
にすることもできます。
この「サイズ変更可能なウィンドウ」を作るためには、
- ウィンドウサイズによって表示位置やサイズが変更される背景画像アイテム
- ドラッグすることによりウィンドウサイズを変更できるType = WindowResizerのアイテム
の配置が必要となります。
このページではまず、
ウィンドウサイズによって表示位置・サイズが変更される
特殊な配置のアイテムの設定方法について説明します。
このページで使用するファイルについて
このページでの説明に使うサンプルフェイスは↓のzipファイルに入っています。
resize_test.zip
このフェイスは前ページまでに使ってきた背景画像と見た目は同じですが、
ウィンドウの四隅をドラッグしてサイズを変更できるように作ってあります。
iniを編集する際には、iniファイル内の一番下の、
;ここから
の行の下以降にフィールドを追加していってください。
アイテムの左上位置を指定する - TopLeftAnchorキー
アイテムの表示位置の設定でPosX・PosYキーの代わりに
TopLeftAnchorキーを使用すると、
キーで指定された基準点からの位置にアイテムを配置することができます。
[Image01]
Category = DynamicImage
Type = StaticItem
BackgroundColor = 0xFF00FF00
TopLeftAnchor = TopRight, -40, 20
Width = 20
Height = 20
TopLeftAnchorキーは、PosX・PosYキーと同じくアイテムの左上座標を指定するキーです。
PosX・PosYキーとの違いは、基準となる位置をフェイス左上以外でも
四隅・四辺の中央・フェイス中央の９箇所から選べることです。
この９箇所はアイテムに設定するAlignキーと同じく
以下の９つのどれかで指定します。
| TopLeft |
左上端 |
|
TopCenter |
上端中央 |
|
TopRight |
右上端 |
| CenterLeft |
左端中央 |
|
Center |
中央 |
|
CenterRight |
右端中央 |
| BottomLeft |
左下端 |
|
BottomCenter |
下端中央 |
|
BottomRight |
右下端 |
OriginItemキーで別のアイテム位置を基準にアイテムを配置するのと
同じようなことだと考えてください。
OriginItemキーではPosX・PosYキーと組み合わせて座標を指定しましたが、
TopLeftAnchorキーでは１つのキーで基準位置と座標をまとめて指定します。
TopLeftAnchorキーは
TopLeftAnchor = 【原点（基準位置。TopLeftなど）】, 【相対X座標】, 【相対Y座標】
という書式で指定します。原点と座標は半角カンマ・スペースで区切ってください。
【相対X座標】【相対Y座標】は
OriginItemならPosX・PosYキーで指定している
「基準からの座標」の数値をX,Yの順で「数値だけで」記入してください。
【相対X座標】がプラスの数値なら右に、マイナスなら左に、
【相対Y座標】がプラスの数値なら下に、マイナスなら上に配置されます。
例えば、
TopLeftAnchor = TopRight, -60, 30
なら、「アイテムの左上位置」はウィンドウの右上から60px左・30px下に配置されます。
【相対X座標】・【相対Y座標】はウィンドウの幅や高さに対する割合でも設定が可能です。
割合で指定する場合は数値の後に半角で%を記述してください。
（%表記の場合、10.0%というふうに小数表記も可能です）
例：ウィンドウの左上から10px右、10%下の場合
TopLeftAnchor = TopLeft, 10, 10.0%
割合指定の場合もピクセル単位での指定と同じく、
【相対X座標】がプラスの数値なら基準位置から右に、マイナスなら左に、
【相対Y座標】がプラスの数値なら下に、マイナスなら上に配置されます。
TopLeftAnchorを設定したアイテムは
キーで指定した原点からみて、指定した数値の分だけ離れた表示位置に配置され、
ウィンドウのサイズを変更した場合、それに合わせて
指定した原点からの表示位置を保った位置へ自動的に移動されます。
アイテム自体の表示サイズは変更されません。
このキーはウィンドウの四隅に配置する背景画像アイテムや
ウィンドウの下・右側に配置するスイッチ類など
ウィンドウ変更によって位置を変更するようなアイテムに設定して下さい。
次に、表示位置・サイズ両方をウィンドウサイズの変更に連動させる配置方法を説明します。
アイテムの右下位置を指定する - BottomRightAnchorキー
TopLeftAnchorキーで表示位置を指定しているアイテムに
BottomRightAnchorキーもあわせて設定すると、
アイテムの右下の位置を指定することができます。
[Image02]
Category = DynamicImage
Type = StaticItem
BackgroundColor = 0xFFFF0000
TopLeftAnchor = TopLeft, 20, 20
BottomRightAnchor = BottomRight, -20, -20
Width = 260
Height = 100
BottomRightAnchorキーはアイテムの右下座標（右下端の位置）を指定します。
TopLeftAnchorキーと同じように基準位置と座標をまとめて指定します。
BottomRightAnchor = 【原点（基準位置。BottomRightなど）】, 【相対X座標】, 【相対Y座標】
例えば、
BottomRightAnchor = BottomRight, -70, -40
なら、「アイテムの右下位置」はウィンドウの右下から70px左・40px上に配置されます。
なお、「アイテムの右下位置がウィンドウ右下端にぴったり重なった状態」は
「BottomRight, 0, 0」と設定します。
このキーでアイテムの右下端の位置を指定すると、
下の画像のようにウィンドウのサイズを変更したときに
ウィンドウサイズ変更に合わせて「アイテム右下端の位置」が
キーで指定した「基準位置からの座標（距離）」を保とうとするので、
自動的にアイテムのサイズが変更されます。
DynamicImage・StaticImageアイテムに指定されている画像ファイルは、
サイズの自動変更後も
Alignキーが設定されていればその設定に合わせて配置され
TilingMethodキーが設定されていればそれに合わせて繰り返し・拡大縮小表示されます。
このキーはTopLeftAnchorキーとともに指定します。
ウィンドウ背景の上下左右の枠部分や、ウィンドウ中央に配置したプレイリストなど、
ウィンドウサイズに合わせて縦横サイズを自動的に変更したいアイテムに記述してください。
ウィンドウサイズが変われば自動的に縦横サイズは設定されますが、
アイテムのフィールド内には他の通常アイテムと同じく、
初期サイズとしてのWidth・Heightは必ず記入しておいてください。
（もちろん、ImageFileが指定されているDynamicImageならWidth・Heightは省略できます。）
最終更新：2013年06月02日 08:02
