Важно (9.07.22)

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

четверг, 21 ноября 2013 г.

Изменение FireMonkey стиля во время выполнения приложения

В блоге уже был перевод статьи "Как загрузить пользовательские стили во время выполнения приложения" (Sarina DuPont). Эта статья от другого автора и содержит в себе достаточно полезной информации, чтобы опубликовать её здесь.

При установке RAD Studio или Delphi XE5, также устанавливаются кастомные стили, которые вы можете использовать в своих проектах. По умолчанию все эти стили лежат в папке "C:\Users\Public\Documents\RAD Studio\12.0\Styles". Помимо этих стилей, пользователи имеющие лицензию Delphi XE5 могут загрузить и использовать "премиум" стили(ID: 29598, Premium Style Pack for RAD Studio XE5 (v4 Oct 2013)). Копируем все "премиум" стили в папку "C:\Users\Public\Documents\RAD Studio\12.0\Styles", чтобы все стили были в одном месте. Теперь вместо того чтобы начинать разработку проекта с нуля воспользуемся уже существующими проектами, которые устанавливаются вместе с Delphi XE5. В папке "C:\Users\Public\Documents\RAD Studio\12.0\Samples\FireMonkeyMobile\Controls\" выберем проект "MobileControls".

Первое, что нужно сделать, это добавить все стили к этому проекту как ресурсы.



Очень важно, чтобы при добавлении стилей, идентификатор каждого ресурса точно совпадал с именем файла стиля, т.к. в коде обращение к ресурсам будет на основе их идентификаторов. Демонстрационный проект "MobileControlds" содержит основной компонент "TabControl" с несколькими вкладками. Добавляем ещё одну вкладку (правый щелчок мышкой по "TabControl1" -> Add Item -> TTabItem). Меняем свойство "Text" для новой вкладки на "style" и добавляем на неё компонент "TComboBox", который назовём "ComboBoxStyles".


Теперь код.
Для формы создаем обработчик события "OnCreate" и пишем код для заполнения "ComboBoxStyles" стилями в зависимости от платформы, под которую был скомпилирован проект. В проекте есть стили как для Android, так и для iOS.
Для "ComboBoxStyles" создаём обработчик события "OnChange", в котором загружается выбранный стиль.
Незабываем добавить "FMX.Styles" в "Uses".
Добавляем небольшую вспомогательную функцию "AddComboItem", которая добавляет элемент в "ComboBoxStyles" с заданным текстом.

uses FMX.Styles;

procedure TForm1.AddComboItem(AText: string);
var lbi: TListBoxItem;
begin
  lbi := TListBoxItem.Create(ComboBoxStyle);
  lbi.Parent := ComboBoxStyle;
  lbi.Text := AText;
  ComboBoxStyle.AddObject(lbi);
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  AddComboItem('Default');

  if TOSVersion.Platform = pfAndroid then
  begin
    AddComboItem('Diamond');
    AddComboItem('Jet');
    AddComboItem('Dark');
  end
  else if TOSVersion.Platform = pfiOS then
  begin
    AddComboItem('Diamond');
    AddComboItem('Jet');
    AddComboItem('Black');
    AddComboItem('Transparent');
  end;

  ComboBoxStyle.ItemIndex := 0; // make sure "default" style is selected at start-up
end;

procedure TForm1.ComboBoxStyleChange(Sender: TObject);
var resname: string; style: TFMXObject;
begin
  if ComboBoxStyle.ItemIndex > 0 then  // first item is "default" style
  begin
    if TOSVersion.Platform = pfAndroid then
      resname := 'Android'
    else if TOSVersion.Platform = pfiOS then
      resname := 'iOS';

    resname := resname + ComboBoxStyle.Selected.Text;

    style := TStyleManager.LoadFromResource(HInstance, resname, RT_RCDATA);

    if style <> nil then
      TStyleManager.SetStyle(style);
  end
  else
    TStyleManager.SetStyle(nil);  // set the "default" style
end;

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

Android Default style:


Android Diamond style:


Android Jet style:


Android Dark style:



p.s. Это вольный перевод статьи Changing FireMonkey style at runtime (Автор: Paweł Głowacki)