Flex 4.6 モバイル 3 – Callout Skin

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Calloutコンポーネントのスキン

今回はCalloutコンポーネントのスキンについて見ていきましょう。

Calloutコンポーネントのクラス構成

コンポーネントクラス:spark.components.Callout

スキンクラス:spark.skins.mobile.CalloutSkin

スキンパーツ

contentGroup

Calloutで表示するコンポーネントを配置するためのスキンパーツです。
contentGroup は、フレームを構成する backgroundColor の塗りの上に表示されます。
フレームの位置とサイズは、フレームの外側のエッジに arrow を表示するスペースが残るように、
ホストコンポーネントの arrowDirection に基づいて調整されます。

arrow

矢印を示すスキンパーツです。
このスキンパーツの配置は、updateSkinDisplayList()でオーナーに対する相対的な位置になります。
Calloutコンポーネントは、Callout スキンと arrow が同じ座標空間を使用していると仮定しています。

スキンステート

closed

Calloutの最初のステートはclosedステートです。開くと、normalステートに移行します。
開くまたは閉じるアニメーションを定義するには、closedステートとnormalステートの間にトランジションを使用します。

スキンステート

contentBackgroundAppearance

contentBackgroundAppearanceはcontentGroupスキンパーツの背景の描画について指定できます。
値は、inset、flat および none です。

  • inset:contentGroupスキンパーツの背景。contentGroupの内側にドロップシャドウがかかります
  • flat:contentGroupスキンパーツの背景
  • none:contentGroupスキンパーツの背景なし

また、ActionScript では、このプロパティを設定するために下記の定数が使用できます。
ContentBackgroundAppearance.INSET (デフォルト値)
ContentBackgroundAppearance.FLAT
ContentBackgroundAppearance.NONE