вторник, 29 октября 2013 г.

Создание выпадающего меню в приложении на Android

Во время выступления автора статьи на CodeRage 8, говорилось о создании Action Bar(TToolbar) с выпадающим меню, позже была написана эта коротенькая статья.
Выпадающее меню обычно используется для дополнительных пунктов меню на Android и доступно через кнопку "TSpeedButton" на Action Bar. Подобное меню создают, чтобы дать пользователю приложения возможность быстрого доступа к дополнительным /редко используемым функциям, которые обычно не доступны в основном меню.
В FireMonkey, вы можете легко реализовать выпадающее меню  с помощью "TListBox".






В этом примере используется 4 компонента с определёнными свойствами:

TToolbar 
  • Alignment: alTop 
TSpeedButton 
  • Alignment: alRight 
  • StyleLookUp: detailstoolbutton 
  • Margin, Right: 5
TListBox with several items 
  • Каждый из 4-х пунктов имеет картинку и текст, добавленные через ItemData 
  • Visibility: False 
  • Height:176px 
  • Anchors: akTop, akRight 
TShadowEffect
  • Parented to TListBox
Скриншот дерева объектов (блок "Structure").

Свойства ListBoxItem:

Свойства TSpeedButton:

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

Для кнопки был создан обработчик события OnClick:

procedure TForm10.OverflowButtonClick(Sender: TObject);
begin
   OverflowMenu.Visible := not OverflowMenu.Visible;
   if OverflowMenu.Visible then
   begin
     OverflowMenu.ApplyStyleLookup;
     OverflowMenu.RealignContent;
   end;
end;

Ниже вы можете увидеть пример работы меню.


p.s. Это вольный перевод статьи Creating an Overflow Menu on Android (Автор: Sarina DuPont, Product Manager RAD Studio)

9 комментариев:

  1. Меню не пропадает после нажатия на Item (((

    ОтветитьУдалить
    Ответы
    1. так надо в обработчике итема вставить код
      OverflowMenu.Visible := False;

      Удалить
  2. Можно как нибудь прикрутить Popup покрасивее, чтоб отображался в нужном месте всегда?
    Он и исчезает сам.

    ОтветитьУдалить
  3. Сделал попап меню следующим образом.
    1. Создал Form2->TLayout (Align: Client; Visible: False)->ListBoxMyPopupMenu
    2. При нажатии кнопки (вызове моего меню) TLayout.Visible:=True;
    3. При нажатии любого пункта меню указываю TLayout.Visible:=False;
    4. У TLayout стоит обработчик OnClick => TLayout.Visible:=False;

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

    ОтветитьУдалить
  4. Привет!
    Отличнейший блог, много чего пригодилось.
    Благодарю за блог и успехов в дальнейшем развитии.

    И вопрос по IDE XE7 + TListBox + Bitmap.
    Все строго по статье а потом эксперименты,
    в дизайн и в рантайме присваивание битмапа без проблем,
    но вот только картинка не отображается.

    Не могу понять, все вроде просто, баг ХЕ7 или кривые ручки?

    ОтветитьУдалить
    Ответы
    1. Предлагаемый в статье способ, подходит для XE5.

      В XE7 появился новый компонент, которые позволяет создавать любые менюшки, называется MultiView (
      Подробнее тут: http://docwiki.embarcadero.com/RADStudio/XE7/en/Mobile_Tutorial:_Using_a_MultiView_Component_to_Display_Alternate_Views_of_Information_(iOS_and_Android),

      пример лежит тут: C:\Users\UserName\Documents\Embarcadero\Studio\15.0\Samples\Object Pascal\Mobile Samples\User Interface\MultiView).

      Если хотите использовать отдельно листбокс, то попробуйте сделать всё, вот по этой инструкции: http://docwiki.embarcadero.com/RADStudio/XE7/en/Mobile_Tutorial:_Using_ListBox_Components_to_Display_a_Table_View_(iOS_and_Android)#Create_an_Overflow_Menu

      Удалить
    2. Этот комментарий был удален автором.

      Удалить
    3. Спасибо!
      Кстати разобрался и с TLisBox'ом в XE7.
      TListBox.DefaultItemStyles.ItemStyles :=listboxitembottomdetail

      P.S. "Вместе мы сила" - Кобзон в 70-е собирая с миру по 10 копеек
      :)

      Удалить