2013/10/30

Flex:: Spark ListコンポーネントのensureIndexIsVisbleを拡張して指定したアイテムを好きな位置（一番上）に表示

Flex 4.10:: Spark Listコンポーネントの「ensureIndexIsVisble」はとても便利なメソッドです。これは引数にIndexを指定して、そのIndexのアイテムを表示エリアにスクロールして表示させるという機能です。
下のサンプルの左側のリストコンポーネントです。スクロール位置がどこでも、ボタンをクリックして「ensureIndexIsVisble」を呼ぶとスクロールしてIndex番号20のアイテムを表示エリアに表示させます。

でも、この動作好きですか？？？　私は少し気に入りませんでした。なぜ、表示エリアの一番上にジャンプしてくれないんだろう？それに、指定したアイテムが既に表示されている時は、何も反応しない。。。

どうもこの動作が好きになれなかったので、自分で拡張してみました。
このサンプルでは指定したアイテムを表示エリアの一番上に表示させるようにしました。これが、iOSでもAndroidでも標準の動きなのでなんだか私はしっくりきます。
少し変えれば、常に一番下に表示もできますし、思いのままです。
サンプル右側のリストコンポーネントが拡張したものです。ボタンをクリックすると20番目のアイテムが常に表示エリアの一番上に来ます。

■結果（Flashコンテンツ）
A Flash Content

■ソースコード（メインMXML）
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
      xmlns:myclasses="myclasses.*">
 
 <s:layout>
  <s:HorizontalLayout/>
 </s:layout>
 
 <!-- Regular VerticalLayout -->
 <s:VGroup>
  <s:Button label="Reqular" 
      click="listReqular.ensureIndexIsVisible(20);"/>
  <s:List id="listReqular"
    width="200" height="200">
   <s:layout>
    <s:VerticalLayout/>
   </s:layout>
   <s:dataProvider>
    <s:ArrayList>
     <fx:String>0</fx:String>
     <fx:String>1</fx:String>
     <fx:String>2</fx:String>
     <fx:String>3</fx:String>
     <fx:String>4</fx:String>
     <fx:String>5</fx:String>
     <fx:String>6</fx:String>
     <fx:String>7</fx:String>
     <fx:String>8</fx:String>
     <fx:String>9</fx:String>
     <fx:String>10</fx:String>
     <fx:String>11</fx:String>
     <fx:String>12</fx:String>
     <fx:String>13</fx:String>
     <fx:String>14</fx:String>
     <fx:String>15</fx:String>
     <fx:String>16</fx:String>
     <fx:String>17</fx:String>
     <fx:String>18</fx:String>
     <fx:String>19</fx:String>
     <fx:String>20 Hello</fx:String>
     <fx:String>21</fx:String>
     <fx:String>22</fx:String>
     <fx:String>23</fx:String>
     <fx:String>24</fx:String>
     <fx:String>25</fx:String>
     <fx:String>26</fx:String>
     <fx:String>27</fx:String>
     <fx:String>28</fx:String>
     <fx:String>29</fx:String>
     <fx:String>30</fx:String>
     <fx:String>31</fx:String>
     <fx:String>32</fx:String>
     <fx:String>33</fx:String>
     <fx:String>34</fx:String>
     <fx:String>35</fx:String>
     <fx:String>36</fx:String>
     <fx:String>37</fx:String>
     <fx:String>38</fx:String>
     <fx:String>39</fx:String>
     <fx:String>40</fx:String>
     <fx:String>41</fx:String>
     <fx:String>42</fx:String>
     <fx:String>43</fx:String>
     <fx:String>44</fx:String>
     <fx:String>45</fx:String>
    </s:ArrayList>
   </s:dataProvider>
  </s:List>
 </s:VGroup>  
 
 <!-- VerticalLayoutExtend -->
 <s:VGroup>
  <s:Button label="Extend"
      click="listExtend.ensureIndexIsVisible(20);"/>
  <s:List id="listExtend"
    width="200" height="200">
   <s:layout>
    <myclasses:VerticalLayoutExtend/>
   </s:layout>
   <s:dataProvider>
    <s:ArrayList>
     <fx:String>0</fx:String>
     <fx:String>1</fx:String>
     <fx:String>2</fx:String>
     <fx:String>3</fx:String>
     <fx:String>4</fx:String>
     <fx:String>5</fx:String>
     <fx:String>6</fx:String>
     <fx:String>7</fx:String>
     <fx:String>8</fx:String>
     <fx:String>9</fx:String>
     <fx:String>10</fx:String>
     <fx:String>11</fx:String>
     <fx:String>12</fx:String>
     <fx:String>13</fx:String>
     <fx:String>14</fx:String>
     <fx:String>15</fx:String>
     <fx:String>16</fx:String>
     <fx:String>17</fx:String>
     <fx:String>18</fx:String>
     <fx:String>19</fx:String>
     <fx:String>20 Hello</fx:String>
     <fx:String>21</fx:String>
     <fx:String>22</fx:String>
     <fx:String>23</fx:String>
     <fx:String>24</fx:String>
     <fx:String>25</fx:String>
     <fx:String>26</fx:String>
     <fx:String>27</fx:String>
     <fx:String>28</fx:String>
     <fx:String>29</fx:String>
     <fx:String>30</fx:String>
     <fx:String>31</fx:String>
     <fx:String>32</fx:String>
     <fx:String>33</fx:String>
     <fx:String>34</fx:String>
     <fx:String>35</fx:String>
     <fx:String>36</fx:String>
     <fx:String>37</fx:String>
     <fx:String>38</fx:String>
     <fx:String>39</fx:String>
     <fx:String>40</fx:String>
     <fx:String>41</fx:String>
     <fx:String>42</fx:String>
     <fx:String>43</fx:String>
     <fx:String>44</fx:String>
     <fx:String>45</fx:String>
    </s:ArrayList>
   </s:dataProvider>
  </s:List>
 </s:VGroup>  
 
</s:Application>

■ソースコード（VerticalLayoutExtend.as）
package myclasses
{
 import flash.geom.Point;
 import flash.geom.Rectangle;
 
 import spark.layouts.VerticalLayout;
 
 public class VerticalLayoutExtend extends VerticalLayout
 {
  public function VerticalLayoutExtend()
  {
   super();
  }
  
  public override function getScrollPositionDeltaToElement(index:int):Point
  {
   var elementR:Rectangle = getElementBounds(index);
   return getScrollPositionDeltaToElementHelperHelper(elementR, null, true, 0, NaN, NaN, NaN);
  }
 }
}


http://stackoverflow.com/questions/5136653/ensureindexisvisible-scroll-to-the-top-of-a-list-control
Labels: , , ,

0 件のコメント:

コメントを投稿

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