2013/10/13

Flex: LabelItemRendererとIconItemRendererの使い方

前回sparkコンポーネントのListについて紹介しました。その際、ItemRendererについて少し触れましたが、今回「LabelItemRenderer」と「IconItemRenderer」について紹介します。

「LabelItemRenderer」はリストに１つだけラベルを表示させる際に便利なItemRendererです。
「IconItemRenderer」はリストに１つのアイコン、２つのラベル、１つのデコレーター（遷移画面の矢印など）を表示させる際に便利なItemRendererです。

便利というのは、プロパティを設定するだけで、その項目にあった最適な表示をしてくれるということです。

前回のItemRendererを使った方法では、表示が左上によって、文字も小さく、最適とは言えません。自分で、フォントやサイズなどを設定する必要があります。
しかし、この「LabelItemRenderer」か「IconItemRenderer」を使うとデフォルトでフォントやサイズなどが設定してあり、綺麗に表示することが出来ます。便利！

手順は前回と同じで、プロパティを追加で設定するだけです。

■結果
■ソースコード
LabelItemRenderer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" title="Label">
 <s:List width="100%" height="100%">
  <s:dataProvider>
   <s:ArrayList>
    <fx:String>テストアイテム１</fx:String>
    <fx:String>テストアイテム２</fx:String>
    <fx:String>テストアイテム３</fx:String>
    <fx:String>テストアイテム４</fx:String>
    <fx:String>テストアイテム５</fx:String>
    <fx:String>テストアイテム６</fx:String>
    <fx:String>テストアイテム７</fx:String>
    <fx:String>テストアイテム８</fx:String>
    <fx:String>テストアイテム９</fx:String>
   </s:ArrayList>
  </s:dataProvider>
  <s:itemRenderer>
   <fx:Component>
    <s:LabelItemRenderer label="{data}" color="0xFF00FF"/>
   </fx:Component>
  </s:itemRenderer>
 </s:List>
</s:View>

IconItemRenderer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" title="Icon">
 <s:List width="100%" height="100%">
  <s:dataProvider>
   <s:ArrayList>
    <fx:Object iconPath="assets/images/item1.png" 
         itemName="テストアイテム１" 
         itemDesc="テストアイテム１についての説明。"/>
    <fx:Object iconPath="assets/images/item2.png" 
         itemName="テストアイテム２" 
         itemDesc="テストアイテム２についての説明"/>
    <fx:Object iconPath="assets/images/item3.png" 
         itemName="テストアイテム３" 
         itemDesc="テストアイテム３についての説明"/>
   </s:ArrayList>
  </s:dataProvider>
  <s:itemRenderer>
   <fx:Component>
    <s:IconItemRenderer 
     decorator="@Embed('assets/images/decoratorImage.png')"
     iconPlaceholder="@Embed('assets/images/loadingImage.png')"
     iconField="iconPath" 
     iconWidth="24" 
     iconHeight="24"
     labelField="itemName"
     messageField="itemDesc" />
   </fx:Component>
  </s:itemRenderer>
 </s:List>
</s:View>

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/LabelItemRenderer.html
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/IconItemRenderer.html
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/supportClasses/ItemRenderer.html#
Labels: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)