TileLayout с динамическими строками и столбцами для подкачки - PullRequest
Новая
       19

TileLayout с динамическими строками и столбцами для подкачки

3 голосов
/ 07 июля 2011

Я реализую галерею изображений, которая представляет активы в виде блоков одинакового размера, которые образуют сетку. Я думал, что могу легко добиться этого, используя spark.layouts.TileLayout, но, к сожалению, у меня есть некоторые дополнительные требования, которые я не могу выполнить с ним.

Общий принцип должен состоять в том, чтобы представить как можно больше блоков в пределах данного пространства. Весь макет приложения составляет liquid и зависит от разрешения экрана пользователя.

Я начал с базового DataGroup с TileLayout: 

<s:DataGroup id="dgpImages" width="100%" height="100%" top="12" dataProvider="{ list }" 
    minHeight="0" minWidth="0" clipAndEnableScrolling="true" itemRenderer="LibraryImageRenderer">
    <s:layout>
        <s:TileLayout orientation="rows" clipAndEnableScrolling="true"
            requestedColumnCount="-1" requestedRowCount="-1"
            verticalGap="12" horizontalGap="12" useVirtualLayout="true" />
    </s:layout>
</s:DataGroup>

Я не знаю заранее RequestedColumnCount или RequestedRowCount , поскольку они зависят от доступного пространства, поэтому приведенный выше код размещает все элементы из left-to-right, а затем из top-to-bottom - как можно ближе к тому, чего я действительно хочу достичь.

Проблема

Этот список ящиков должен быть кабелем рендеринга fake paging. На самом деле это означает, что если последняя видимая строка не полностью соответствует доступному пространству, ее следует переместить на следующую страницу.

Чтобы дать вам пример, давайте представим, что у нас есть список из 10 изображений. Каждый из них имеет размер 10x10 пикселей, но мое разрешение экрана позволяет мне уместить сетку размером 35x35 пикселей. Это означает, что одна страница способна представить только 9 изображений в виде сетки 3х3 (поскольку 5 пикселей недостаточно для представления полного изображения). Затем 10-е изображение должно быть перенесено на вторую страницу.

Вопрос

Это, очевидно, не происходит автоматически с кодом, который я вставил выше, так как TileLayout позволяет отображать частично видимые строки (в форме списка с вертикальной прокруткой). Мне было интересно, как мне достичь поведения, описанного выше.

Если приведенное выше описание не звучит логично, пожалуйста, дайте мне знать, чтобы я мог его адаптировать (или включить более подробную информацию).

Любая помощь в этом будет высоко оценена!

1 Ответ

4 голосов
/ 08 июля 2011

Вам необходимо создать пользовательский макет для такого рода функций. Хорошей новостью является то, что я нашел учебник, который делает почти то, что вы хотите сделать для вас здесь:

http://www.adobe.com/devnet/flex/articles/spark_layouts.html

Так что реализуй это первым. в методе updateDisplayList () найдите эту строку: 

if (x + elementWidth > containerWidth)

при проверке на удар по следующей строке вы будете проверять общую высоту по сравнению с текущей высотой строки и прекратите добавлять элементы, если она превышает границы. (просто break вне цикла for)

Затем все, что вам нужно сделать, это просмотреть страницу dataProvider для группы на основе текущей страницы.

...