Согласованный вид одного изображения в списке изображений в Flex для книжной и альбомной ориентации - PullRequest
Новая
       31

Согласованный вид одного изображения в списке изображений в Flex для книжной и альбомной ориентации

0 голосов
/ 24 июня 2011

Я пишу приложение для просмотра изображений для планшетов, используя Adobe Flex 4.5. По сути, у меня есть список с пользовательским средством визуализации элементов, которое отображает изображения в списке. Я установил размер изображения, чтобы он был шириной / высотой планшетного устройства в портретной ориентации (600x1024). Таким образом, только одно изображение можно увидеть одновременно. Проблема в том, что когда устройство ориентировано на ландшафт, этот дизайн явно облажается. Мой вопрос: как я могу заставить его автоматически изменять ширину / высоту моих изображений, когда ориентация изменяется таким образом, что одновременно отображается только одно изображение? Или есть лучший способ приблизиться к этому?

Это мой список: 

<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>

1 Ответ

2 голосов
/ 26 июня 2011

Вот пример того, как создать средство рендеринга только изображения, которое автоматически обрабатывает изменения ориентации: 

<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>

Этот рендерер должен работать довольно хорошо, даже если он написан на MXML, потому что он следует некоторым простым правилам оптимизации (см. http://flexponential.com/2011/04/20/flex-performance-tips-tricks/),, но вы захотите протестировать его в своем приложении, чтобы убедиться, что оно в порядке.

Как правило, Adobe рекомендует писать средства визуализации элементов в ActionScript, расширяя LabelItemRenderer или IconItemRenderer для лучшей производительности. Если приведенное выше средство рендеринга недостаточно быстрое для вас, возможно, вы захотите проверить https://bugs.adobe.com/jira/browse/SDK-30043 для обсуждения текущей проблемы и обходного пути для решения этой проблемы с IconItemRenderer.

...