понедельник, 28 октября 2013 г.

Создаём выдвижное боковое меню в приложении


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








Запускаем Delphi XE5 и создаём мобильный проект.

Размещаем на форме компонент "TListBox" со свойством "Align: alClient", добавляем пункты меню (TListBoxGroupHeader и TListBoxItem) через "Items Editor".

Далее размещаем на форме компонент "TPanel", со свойством "Align: alClient". "TListBox" скроется под "TPanel".

После этого добавим на "TPanel" компонент "TToolBar" и на него кидаем кнопку "TSpeedButton" со свойствами:
  • Align: alLeft; 
  • StyleLookup: detailstoolbutton;
  • Margins Left: 10;
В дереве объектов (блок "Structure") выбираем "TPanel" и выставляем свойство "Position X: Create New TFloatAnimation".

Теперь создадим, обработчик для события "OnClick" кнопки "TSpeedButton" и впишем такой код:
procedure TForm1.SpeedButton1Click(Sender: TObject);
var
  targetX: single;
begin
  targetX:=Self.ClientWidth - 60;

  if (panel1.Position.X=targetX) then begin
    FloatAnimation1.StartValue:= targetX;
    FloatAnimation1.StopValue:= 0;
  end
  else begin
    FloatAnimation1.StartValue:= 0;
    FloatAnimation1.StopValue:= targetX;
  end;
  FloatAnimation1.Start;
end;

В принципе меню готово и можно запускать приложение.

Скриншот дерева объектов (блок "Structure").
Также можно добавить эффект тени, чтобы наша программа лучше смотрелась на устройствах.
Добавляем эффект тени "TShadowEffect" для "TPanel".

Запускаем приложение. (Скачать исходный код приложения)



p.s. Это вольный перевод статьи "RAD Studio XE5 – Creating a drawer" (Автор: José León)

4 комментария:

  1. Сделаю важное дополнение.
    В RADStudio XE7 появился компонент MultiView (вкладка Common Controls). Его поведение практически полностью повторяет нативный NavigationDrawer, который вытягивается сбоку. Выглядит намного приличнее, чем в этом примере.

    Особо интересные параметры: [DrawerOptions], Mode, MasterButton, [PopoverOptions]. Они влияют на отображение, расположение и поведение панели.

    ОтветитьУдалить
    Ответы
    1. Ах, да, упустил. Ещё пара нюансов:
      SplitViewOptions.Placement в связке с DrawerOptions.Placement аздают требуемое расположение. Оба параметра могут быть Left или Right (лево, право). Первый параметр задаёт физическое расположение панели, второй — если я верно понимаю после непродолжительного баловства — откуда её вытягивать. Но не понимаю одного нюанса: ведь если панель справа, то и вправо её не вытянешь, но настроить так можно.

      Т.о. можно поставить на форму две таких боковых панели и вытягивать их с разных сторон.

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

    ОтветитьУдалить
  3. Из-за чего может тормозить FloatAnimation1 при "скрытии" выдвижного меню? При анимации "открытия" всё нормально.

    ОтветитьУдалить