titleとtitleLayout

DropDownList、IconButton、Image、TabbedPanel、FlashPlayerでは、titleプロパティが存在する。textとは違う。

例えば、右図のようなもの。一見、DropDownListとStaticTextの組み合わせのようにも見える。もちろんそれで作ることも可能だが、titleプロパティを使っている。

titleプロパティを使えば、2つのオブジェクトをグループ化する必要がないので、階層構造がスッキリする。それと引き換えに、ピクセル単位での細かい位置調整などは出来なくなるが、そんなことが必要なクレイジーなUIを作る機会はそうそうないので基本的にはデメリットは感じないはず。

指定は自動レイアウトの時とほとんど同じ。先に自動レイアウトのページを読んでおくとスムーズに理解できる。

ただ、CCのいつからか挙動がおかしくなったみたい。（こんなんばっかよ、本当に...）

これは難しいことはない。表示するテキストを与えるだけ。

var w = new Window('dialog{\

dl : DropDownList{ title :"選択してください：" }\

}');

w.show();

titleを使って表示した文字の配置をtitleLayoutで決める。titleLayout自体はオブジェクトで、直接何かの値を持たないので、その中のプロパティを設定していく。自動レイアウトで使うものばかりなので、自動レイアウトのページも参照されたし。

• • • alignment：配置位置

    • characters：確保する領域の幅指定。

    • justify：揃え。

    • margins：文字の周りに取る余白。

    • spacing：UIパーツ本体とtitleの文字との間隔。

    • truncate：文字の切り捨て方法。文字数が多くて予約スペースに収まらない場合、文字の省略方法を指定する。

最初にも書いたが、StaticTextとの」組み合わせでも実現は可能である。その場合、StaticTextともう一つ（ドロップダウンリストやアイコンボタン）をグループ化すると扱いやすいのでそうすることが多いと思う。titleLayoutを扱う今回もそのようなイメージを持っていると思い通りに指定しやすくなる。

アイコンボタン以外（ドロップダウンリストなど）を使用する時は、仮想的なGroupが存在すると考えればいいし、アイコンボタンのときは、ボタンがGroupの代わりのコンテナになっていると考えればよい。すると、marginsやspacingのイメージが掴みやすい。

では１つずつ見ていく。

テキストの配置場所を決める。left,right,top,bottom,centerから選ぶ。自動レイアウトの時と違ってfillは使えない。自動レイアウトの時は配列じゃなくても単独の文字列で指定出来たが、titleLayoutでは必ず配列で指定する。

まずは配列の1つ目の要素、left、center、rightを決めると良い。基本的には右図の色を塗った部分に配置できるものだと考える。次に、決めた領域内での位置をtop、center、bottomで決める。

var w = new Window('dialog{ \

dl : DropDownList{ alignment : ["center","center"], title : "自由な文字列を", titleLayout : { alignment : ["left","top"] } }\

}');

w.show();

ドロップダウンリストなどは["center","center"]を除いて、UIパーツと重ならない配置になるが、アイコンボタンの時はボタンの内側での話になる。

titleが使用するスペースを文字数で指定する。厳密に合うわけではないので、足りなかったら適当に増やす。指定しなかったら必要分が勝手に計算される。

var w = new Window('dialog{ \

dl : DropDownList{ alignment : ["center","center"] , title : "characters:30" , titleLayout : { characters : 30, alignment : ["left","center"] } }\

}');

w.show();

titleがcharactersなどで確保した領域内で、文字の揃えをどうするか決める。

• • • "left"：左揃え。

    • "center"：中央揃え

    • ”right”：右揃え

var w = new Window('dialog{ \

dl : DropDownList{ alignment : ["center","center"] , title : "justify : \\"left\\"" , titleLayout : { alignment : ["left","center"] , characters : 30, justify : "left" } }\

}');

w.show();

周りの余白幅を指定する。これも自動レイアウトと同じで、本当は配列で[左、上、右、下]の値を与えるのだが、数値をダイレクトに与えると、全ての辺を同じ数値に設定できる。

○ドロップダウンリストなど

var w = new Window('dialog{\

dl : DropDownList{ alignment : ["center","center"] , title : "選択してください" , titleLayout : { alignment : ["left","center"] , margins : 50} }\

}');

w.show();

○アイコンボタン

var w = new Window('dialog{\

dl : IconButton{ title :"画像つきボタン" , titleLayout : { alignment : ["right","center"], margins : 50 } }\

}');

//w.dl.image = ""; //適当な画像パスを指定

w.show();

UIパーツと文字との間隔を指定する。他に言うことはない。

○ドロップダウンリストなど

var w = new Window('dialog{\

dl : DropDownList{ alignment : ["center","center"] , title : "選択してください" , titleLayout : { alignment : ["left","center"] , spacing : 50 } }\

}');

w.show();

○アイコンボタン

var w = new Window('dialog{\

dl : IconButton{ title :"画像つきボタン" , titleLayout : { alignment : ["right","center"], spacing : 10 } }\

}');

//w.dl.image = ””; //適当な画像パスを指定

w.show();