Важно (9.07.22)

Если картинки в постах не отображаются, зайдите в блог через прокси. РКН заблокировал поддомены blogger.com на которые загружались картинки.

понедельник, 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)