Перейти к содержанию
Fire Monkey от А до Я
  • 0

Меню в стиле Accordion


Dmitry Sobko

Вопрос

Друзья, подскажите пожалуйста, каким образом можно реализовать меню в стиле аккордеон как тут https://jqueryui.com/accordion/. Требования к компоненту:

1) На форму бросается этот компонент, у него есть ширина и высота.

2) В этом компоненте должны добавляться итемы, хоть в дизайнтайме, хоть в рантайме, высота которых так же задается в свойствах компонента, которая будет для всех одна

3) Должна быть свойство у компонента, которое имеет значение истина или ложь, которое означает развернуть первый элемент при запуске, или все элементы свернуты

4) Развернутым должен быть только один элемент, если кликаем (тапаем) на свернутый и при этом есть развернутый элемент, то развернутый должен свернуться, а выбранный - развернуться

5) У каждого элемента есть заголовок и изображение в виде треугольника, означающее развернут элемент или нет.\

6) Элементы разворачиваются на всю свободную область сдвигая свернутые ниже вниз, за пределы видимой области.

7) Если элементы находятся за пределами видимой области - появляется скролл.

 

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

 

При необходимости предоставлю свой г...код, но лучше не стоит))

 

За основу я взял TVertScrollBox, в рамках которого все и происходит. В него я пока программно создаю столько TExpander'ов, сколько мне нужно - это итемы.

 

Вот г...код:

 


procedure TMainForm.AccordionAddItem(IdItem, CountItems: integer; IdRubricGood,
  CaptionText: string);
var
  AccordionNewItem : TExpander;
begin
  if AccordionItems[IdItem] <> nil then AccordionItems[IdItem].Destroy;
  AccordionNewItem := TExpander.Create(VertScrollBox_RubricsGood);
  With AccordionNewItem do
    begin
      Parent      := VertScrollBox_RubricsGood;
      Align       := TAlignLayout.Top;
      Text        := CaptionText;
      StyleLookup := 'Expanderstyle';
      Name        := 'AccordionItem'+IntToStr(IdItem);
      Height      := MainForm.Height-170; //(CountItems * 150)+29;
      IsExpanded  := False;
      TagString   := IdRubricGood;
      StylesData['text.OnClick'] := TValue.From<TNotifyEvent>(OnMaxMinPanelItems);
    end;
 AccordionItems[IdItem] := AccordionNewItem;end;

Потом еще куча кода на отловить развернутые и свернутые итемы и вставку ListBox'внутрь открытого с нужным мне контеном:

 


procedure TMainForm.OnMaxMinPanelItems(Sender: TObject);
var
  AccordeonSelectedItem: TExpander;
  I:integer;
begin
  AccordeonSelectedItem := TExpander(FindItemParent(Sender as TFmxObject,TExpander));


  ListBoxGoods.Items.Clear;


  for I := 1 to RubricGoodsSize do
  begin
    if (AccordionItems[I].TagString = AccordeonSelectedItem.TagString) AND (AccordionItems[I].IsExpanded = False) then
      begin
        AccordionItems[I].BeginUpdate;
        RectangleRestourantHeader.Visible := False;
        AnimationAniIndicator(True);
        AccordionItems[I].IsExpanded := True;
        GoodList(AccordeonSelectedItem.TagString, Sender);
        AccordionItems[I].EndUpdate;
        AnimationAniIndicator(False);
      end
    else
      if (AccordionItems[I].TagString = AccordeonSelectedItem.TagString) AND (AccordionItems[I].IsExpanded = True) then
        begin
          AccordionItems[I].IsExpanded := False;
          RectangleRestourantHeader.Visible := True;
        end
      else
        begin
          AccordionItems[I].IsExpanded := False;
        end;


  end;
end;
Я в отчаянии, помогите чем можете, очень нужно. Спасибо!

 

 

Изменено пользователем DimeDron
Ссылка на комментарий

Рекомендуемые сообщения

  • 0

Добрый день!

 

Подход имеет право на жизнь, как быстрая реализация.

 

Со своей стороны я бы рассмотрел в качестве основы TListBox, нарисовал стили элемента и в наследнике TListBox реализовал управление сверткой разверткой.

Ссылка на комментарий
  • 0

А нельзя сделать ListBox, К нему ListItem'ы. Потом создать дочерние Layout'ы, а на Layout'ы дочерними какие-нибудь текстовые строки. Потом на OnItemClick менять Visible этих Layout'ов? Будет такое работать? И можно ли прицепить анимацию, чтобы когда Visible = false, этот layout не просто исчезал, а сворачивался?

Ссылка на комментарий

Присоединяйтесь к обсуждению

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

Гость
Ответить на вопрос...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...