Форум Flasher.ru

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)
-   ActionScript 3.0 (http://www.flasher.ru/forum/forumdisplay.php?f=83)
-   -   как сделать список плиткой? (http://www.flasher.ru/forum/showthread.php?t=214146)

b000ris 23.04.2017 14:58

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

undefined 23.04.2017 16:32

Код AS3:

//items - массив итемов
var curX:Number=0;//начальная позиция
var curY:Number=0;
var maxX:Number=0;//ширина контейнера итемов
for(var i:uint=0;i<items.length;i++) {
    curX+=(i>0)?items[i].width:0;
    if(curX+items[i].width>maxX) {
        curX=0;
        curY+=items[i].height;
    }
    items[i].x=curX;
    items[i].y=curY;
}


b000ris 24.04.2017 14:19

Не совсем то. Нужен динамический список, содержимое которого перестраивается при масштабировании списка. Нужно что то наподобие, как если бы использовать mx:Box для размещения там изображений. Проблема в том, что в mx:Box элементы распределяются по горизонтали/вертикали без перераспределения на следующую строку/столбец.

undefined 24.04.2017 15:09

ну так и обновляй координаты при изменении размеров контейнера.

b000ris 24.04.2017 16:33

так если довести до абсурда количество элементов в контейнере, то насколько все это оптимально в плане быстродействия?

undefined 24.04.2017 16:47

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

Добавлено через 3 минуты
либо лучше так: начинаешь обновлять координаты и проверяешь не вылез ли текущий итем за пределы вьюпорта, как вылез - останавливаемся.

Добавлено через 11 минут
как-то так:
Код AS3:

//items - массив итемов
var curX:Number=0;//начальная позиция
var curY:Number=0;
var maxX:Number=0;//ширина контейнера итемов
var maxY:Number=0;//высота контейнера итемов
var i:uint=0;
while (curY+items[i].height<maxY && i<items.length) {
    curX+=(i>0)?items[i].width:0;
    if(curX+items[i].width>maxX) {
        curX=0;
        curY+=items[i].height;
    }
    items[i].x=curX;
    items[i].y=curY;
    i++;
}


caseyryan 24.04.2017 19:16

Цитата:

так если довести до абсурда количество элементов в контейнере, то насколько все это оптимально в плане быстродействия?
Тут как бы ответ вытекает из вопроса) Доведешь до абсурда, и у тебя получится дико тормозной велосипед

undefined 24.04.2017 19:51

да не, мой велосипед вполне справится с абсурдно большим списком ибо не зависит от его размера.Только если размер контейнера до абсурда доводить никто не будет.

caseyryan 25.04.2017 06:16

Твой велосипед то справится, а вот флеш плеер нет)

undefined 25.04.2017 09:00

С чем конкретно не справится? С отрисовкой небольшого кол-ва видимых итемов?

dark256 25.04.2017 10:05

Кто-то на форуме тут ваял создание такой плитки.
Поищите по ключеому слову "метро-стайл"
Вроде так это называется. Не помню только - по английски это было или как.

b000ris 01.05.2017 13:56

Цитата:

Поищите по ключеому слову "метро-стайл"
К сожалению, ничего не нашел. Неужели нельзя преобразовать как то tilelayout, чтобы распределение итемов было как в фото галерее гугла...

undefined 01.05.2017 14:34

b000ris, чем не устраивает мое решение?

b000ris 01.05.2017 19:17

При достаточно большом количестве элементов слишком сильно грузит флеш. Это неприемлемо.

undefined 01.05.2017 21:01

Цитата:

Сообщение от b000ris (Сообщение 1200456)
При достаточно большом количестве элементов слишком сильно грузит флеш. Это неприемлемо.

Ты читал что я дальше написал?Сложность не зависит от размера списка.

Добавлено через 2 минуты
Если ты хоть одним глазом посмотришь на код, то увидишь что в цикле только ифы и сложения.Скорее флэш ляжет на отрисовке такого числа элементов, чем на рассчете их координат.

b000ris 01.05.2017 21:37

Вот то что сделал (оно реально работает):
Надо использовать в качестве layout для контейнера класс следующего кода:

package
{
import mx.core.ILayoutElement;
import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;

public class FlowLayout extends LayoutBase
{
override public function updateDisplayList(containerWidth:Number, containerHeight:Number):void
{
var x:Number = 0;
var y:Number = 0;
var layoutTarget:GroupBase = target;
var count:int = layoutTarget.numElements;
for (var i:int = 0; i < count; i++)
{
var element:ILayoutElement = layoutTarget.getElementAt(i);
element.setLayoutBoundsSize(NaN, NaN);
var elementWidth:Number = element.getLayoutBoundsWidth();
var elementHeight:Number = element.getLayoutBoundsHeight();
if (x + elementWidth > containerWidth)
{
x = 0;
y += elementHeight;
}
element.setLayoutBoundsPosition(x, y);
x += elementWidth + 10;
}
}
}
}


Часовой пояс GMT +4, время: 13:34.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.