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

Я пишу приложение для просмотра изображений для планшетов с помощью 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>

air tablet adobe actionscript apache-flex
person peacey    schedule 23.06.2011    source источник
comment
Здесь так много всего выглядит не так. Зачем нужен скроллер в рендерере? Почему вы указываете явную высоту и ширину в рендерере (и в списке)? Скорее всего, это не будет наименьшим кросс-девайсом. Adobe не рекомендует использовать средства визуализации MXML для мобильных устройств. А привязка в рендерере ужасна для производительности; что важно на мобильном устройстве. Почему вы используете список, если планируете отображать только один элемент одновременно? Просто используйте одно изображение и меняйте источник, пока пользователи прокручивают список.   -  person JeffryHouser    schedule 24.06.2011
comment
Что касается вашего вопроса, возможно, вам просто нужно поддерживать соотношение сторон изображения и изменять значения высоты и ширины при изменении ориентации.   -  person JeffryHouser    schedule 24.06.2011
comment
@ www.Flextras.com Я использую скроллер, потому что хочу использовать жест масштабирования для увеличения изображения и возможности его прокручивать. Я тоже поменяю его на изображение, а не на сложный список. В документации я прочитал, что список не отображает другие компоненты, которые не показаны, поэтому я подумал, что проблем с производительностью не будет. Я знаю, что жесткое кодирование ширины / высоты - плохой дизайн, мне следовало использовать проценты. Кроме того, что вы предлагаете лучше вместо средств визуализации и как мне избежать привязки?   -  person peacey    schedule 24.06.2011
comment
Верно, список не отображает компоненты, которые не отображаются. Но если вы показываете только по одному; Я не уверен, что буду использовать список. Избегайте привязки в средствах визуализации, прослушивая событие dataChange и вручную внося изменения в прослушиватель событий.   -  person JeffryHouser    schedule 24.06.2011

Ответы (1)


arrow_upward
2
arrow_downward

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

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

person sshongru    schedule 25.06.2011