Flexの画像リスト上の1つの画像を、縦向きと横向きの両方で一貫して表示します。

Question

Adob​​e Flex 4.5を使用してタブレット用の画像ビューアアプリケーションをコーディングしています。基本的には、リスト内のイメージをレンダリングするカスタムアイテムレンダラーのリストがあります。私は、画像サイズをポートレート（600x1024）のタブレットデバイスの幅/高さに設定しました。この方法では、一度に1つの画像しか見ることができません。問題は、デバイスがランドスケープに向かうときに、このデザインが明らかにネジ止めされることです。私の質問は、一度に1つの画像だけが表示されるように向きが変わったときに、画像の幅/高さを自動的に変更する方法です。それとも、これに接近するより良い方法がありますか？

これが私のリストです：

<s:List width="600" height="1024" 
     id="imageList" dataProvider="{data}" itemRenderer="{inlineRenderer}" click="imageList_clickHandler(event)" 
     verticalScrollPolicy="off" useVirtualLayout="true"> 
    <s:layout> 
     <s:HorizontalLayout columnWidth="600"/> 
    </s:layout> 
</s:List> 

これは、アイテムレンダラーです：ここで

<s:Scroller width="600" height="1024"> 
       <s:Group> 
        <s:Image source="{data.imageurl}" width="600" height="1024" 
            contentLoader="{FlexGlobals.topLevelApplication.imageCache}"/> 
       </s:Group> </s:Scroller>    

Answer 1

は自動的に向きの変更を処理した画像のみのアイテムレンダラーを作成する方法の例です。

<s:List id="list" width="100%" height="100%"> 
    <s:dataProvider> 
     <s:ArrayList> 
      <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String> 
      <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String> 
      <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String> 
      <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String> 
      <fx:String>http://www.google.com/images/logos/ps_logo2.png</fx:String> 
     </s:ArrayList> 
    </s:dataProvider> 
    <s:itemRenderer> 
     <fx:Component> 
      <s:ItemRenderer width="{outerDocument.list.width}" 
          height="{outerDocument.list.height}"> 
       <fx:Script> 
        <![CDATA[ 
         import spark.core.ContentCache; 
         [Bindable] 
         public static var imageCache:ContentCache = new ContentCache(); 

         override public function set data(value:Object):void { 
          super.data = value; 
          bitmapImage.source = data; 
         } 
        ]]> 
       </fx:Script> 
       <s:BitmapImage id="bitmapImage" contentLoader="{imageCache}" width="100%" height="100%" /> 
      </s:ItemRenderer> 
     </fx:Component> 
    </s:itemRenderer> 
</s:List> 

それはいくつかの簡単な最適化ルールを（http://flexponential.com/2011/04/20/flex-performance-tips-tricks/を参照）以下のため、このレンダラはかなりよく、それはMXMLで記述されていてもカントー実行する必要がありますが、あなたはそれがOKな感じを確認するために、アプリケーションでそれをテストしたいと思います。

一般に、Adobeは、最高のパフォーマンスを得るために、LabelItemRendererまたはIconItemRendererを拡張することにより、ActionScriptでアイテムレンダラーを記述することをお勧めします。上記のレンダラーが十分に高速でない場合は、https://bugs.adobe.com/jira/browse/SDK-30043をチェックして、現在の問題の説明と、IconItemRendererでこれを行う回避策を確認してください。