Все предыдущие статьи из серии «FireMonkey. От простого к сложному» можно найти здесь.
Сегодня я решил вернуться к этой серии постов и рассмотреть, с одной стороны, один из самых интересных, а с другой — один из самых сложных моментов по работе с FireMonkey — работу со стилями. Сложнее и интереснее в FireMonkey, чем работа со стилями, может быть, наверное, только работа с 3D, но этой темы я пока не касаюсь, ограничиваясь исключительно 2D.
То что разработка собственного стиля — это довольно увлекательное занятие, я усвоил ещё когда рассказывал про редактор стилей в VCL. Но, в FireMonkey в понятие «стиль» — вкладывается на много больший смысл, чем просто «набор изображений и шрифтов».
В качестве небольшого введения к этой статье, я очень рекомендую Вам посмотреть запись вебинара «FireMonkey — Styles» (на русском языке). Просмотр этого вебинара даст нам с Вами основу для дальнейшей работы.
Итак, основные моменты относительно стилей в FireMonkey могут быть выражены следующим образом:
- Стиль FMX — это контейнер, содержащий набор объектов FireMonkey, которые могут быть скрыты от разработчика и определяют внешний вид и поведение компонента
- В качестве контейнера стиля обычно используется TLayout — компонент, который не имеет никакого внешнего вида, который удобно использовать не только при разработке стилей FMX, но и, например, для разработки макета формы приложения, группировки элементов управления и т.д.
- Стили могут храниться как в отдельных файлах с расширением *.style, так и не посредственно в приложении для чего используется невизуальный компонент TStyleBook.
Сейчас я не буду пересказывать весь вебинар, т.к. все равно, лучше, чем уже есть в видео я врядли расскажу. Перейду лучше сразу к рассмотрению различных инструментов для работы со стилями.
Концепция стилей в FireMonkey, конечно, интересна, нова и т.д., но, думаю, что не только у меня при работе со стилем FMX возникала мысль «Вот бы такую программу, чтобы можно было без труда менять стиль сразу всех контролов». И сейчас, когда выпущена RAD Studio XE3, мы можем воспользоваться для работы со стилями сразу несколькими инструментами, а именно:
- Bitmap Style Designer — утилита, входящая в состав XE3
- Firemonkey Style Equalizer
- MonkeyRecolor
- MonkeyStyler
Посмотрим, что это за инструменты и как с помощью них можно быстро изменять стили в FireMonkey. Для примера можно создать приложение FireMonkey HD Application на форме которого разместить несколько стандартных контролов. Например, я далее буду рассматривать работу со стилями, используя приложение вот такого вида:
Bitmap Style Designer
Ранее (в Delphi XE2) этот инструмент носил название «VCL Style Designer» и использовался исключительно для работы со стилями в VCL. В XE3 утилита была переработана и теперь с помощью Bitmap Style Designer мы можем редактировать также и стили для FireMonkey.
В Bitmap Style Designer мы можем создавать следующие проекты стилей:
- VCL or FireMonkey style
- Metropolis UI Style
Когда мы создаем новый стиль, то по умолчанию подгружается битмап вот такого вида:
Из которого впоследствии мы уже «нарезаем» внешний вид элементов управления. В качестве первого примера использования Bitmap Style Designer в качестве редактора стилей для FireMonkey я решил сохранить стиль, создаваемый по умолчанию, в файл *.style и загрузить его в свою программку. Выбрал в главном меню: File—>Save As и указал необходимый формат файла. В результате файл со стилем оказался таким:
object TLayout object TStyleDescription StyleName = 'Untitled' Version = '1.0' Author = 'Embarcadero Technologies Inc.' AuthorEMail = '' AuthorURL = 'www.embarcadero.com' MobilePlatform = False RetinaDisplay = False PlatformTarget = '' end object TImage StyleName = 'Untitled1style.png' Visible = False Bitmap.PNG = { 89504E470D0A1A0A0000000D49484452000001F4000002A8080600000081720D 9B0000FFFF4944415478DAEC9D076014D5D6C76F3A24D400D2124A0C98044890 8E2424B4088840E8790A167C083C1054BE8705117D58780F15040151518AD2A5 4813100209127A0F2811A583142190501292EFFC2F9975B23BB333BBD965279B FBD721BBB3B367EFDD99BDBF39F79E7BAE07131212121212122AF2F250DAF9EE {....} 5F6423EFB0D4E98F22F34EC7FAFAB4CC55A95275F74A2176A02A55AA54A952A5 AA2E5281AE4A952A55AA54DD055281AE4A952A55AA54DD05FA7F6FD0135B64FE BAA10000000049454E44AE426082 } end {...} object TLayout StyleName = 'speedbuttonstyle' object TSubImage DisableInterpolation = False BitmapScale = 1 StyleName = 'background' HitTest = False Align = alContents BitmapMargins.Rect = '(5,5,5,5)' SourceLookup = 'Untitled1style.png' SourceRect.Rect = '(77,164,104,191)' WrapMode = iwStretch MarginWrapMode = iwStretch object TRectAnimation Duration = 0.0001 Trigger = 'IsMouseOver=False;IsPressed=False;IsFocused=False' StopValue.Rect = '(77,164,104,191)' PropertyName = 'SourceRect' end object TRectAnimation Duration = 0.0001 Trigger = 'IsMouseOver=True;IsPressed=False' StopValue.Rect = '(77,191,104,218)' PropertyName = 'SourceRect' end object TRectAnimation Duration = 0.0001 Trigger = 'IsMouseOver=True;IsPressed=True' StopValue.Rect = '(77,218,104,245)' PropertyName = 'SourceRect' end end
В принципе, все вполне предсказуемо и укладывается в идею стилей FireMonkey: основной контейнер содержит в себе TImage в котором лежит изображение и каждый элемент стиля, использует его для отрисовки самого себя и анимации через TRectAnimation. Естественно, что такой стиль будет «весить» несколько больше за счёт того, что в нем «зашито» изображение, но особой разницы в работе программы быть не должно. Проверим как работает такой стиль в приложении. Для этого:
1. Кидаем на форму приложения компонент TStyleBook, дважды кликаем по нему мышкой и загружаем файл стиля:
2. Жмем «Apple and Close».
3. У главной формы приложения в свойстве StyleBook указываем наш StyleBook1:
Если все сделано верно, то Вы сразу увидите, что стиль применился и форма приложения приняла следующий вид:
На рисунке ниже слева показано работающее приложение со стилем по-умолчанию, а справа — с нашим стилем:
Используя Bitmap Style Designer мы можем теперь легко перенести любой стиль VCL (*.vsf) в FireMonkey. Для чего необходимо открыть в редакторе необходимый vcl-стиль и просто пересохранить его в формат FireMonkey. Например, я пересохранил в FMX стиль CyanDusk.vsf:
Что касается работы с объектами в Bitmap Style Designer, то в целом она осталась такой же как ранее, поэтому повторяться не буду, а перейду к следующему инструменту для работы со стилями FireMonkey.
Firemonkey Style Equalizer
Firemonkey Style Equalizer — это простенькая утилита от автора блога «The Road To Delphi«, предназначенная для изменения цветовой гаммы стиля FireMonkey. В отличие от всех представленных в этой статье инструментов, Firemonkey Style Equalizer распространяется вместе с исходным кодом.
Скачать FireMonkey Style Equalizer можно по этой ссылке.
Информацию по работе с программой можно почитать в блоге автора.
Ниже представлен небольшой видео-ролик, демонстрирующий работу с программой:
Следует только отметить, что Firemonkey Style Equalizer был написан в Delphi XE2 и, соответственно, после выхода Delphi XE3 с FireMonkey 2.0. некоторые методы FMX были перемещены в другие модули, да и LiveBindings значительно поменялся, поэтому, если Вы решите открыть исходник этой утилиты в XE3, то надо будет внести одну небольшую поправку в исходный код:
unit uFMEqualizer; {...} procedure TStyleEqualizer.ChangeHSL(dH, dS, dL: Single); var i : Integer; v : TFMStyleLine; begin for i := 0 to FLines.Count-1 do if FLines[i].IsColor and (FLines[i].Color<>claNull) then begin v:=FLines[i]; v.Color:=({FMX.Types}System.UIConsts.ChangeHSL(v.Color,dH,dS,dL)); if v.Color<>FMod[i].Color then FMod[i]:=v; end; end;
И подправить связи в LiveBindings — о чем Вы увидите сообщение при попытке открыть форму с эквалайзером (uFrmStyleEqualizer.pas). В остальном исходник Firemonkey Style Equalizer рабочий и позволяет понять как можно работать со стилями FireMonkey в Delphi.
MonkeyRecolor
MonkeyRecolor — это ещё одна бесплатная утилита для изменения цветовой гаммы стиля FireMonkey. В отличие от предыдущего инструмента, MonkeyRecolor обладает более продвинутыми функциями по работе с цветовой палитрой стиля.
Скачать MonkeyRecolor можно с сайта разработчика.
После установки в директории с общими документами появится поддиректория MonkeyRecolor, содержащая исходный код приложения.
Итак, запускаем приложение и видим демо-форму с различными элементами управления:
Теперь заходим в главном меню: File—>MonkeyRecolor
Здесь мы можем:
- загрузить/сохранить стиль и изменить его цветовую палитру
- сохранить созданную в MonkeyRecolor цветовую схему в отдельный файл, чтобы потом её можно было быстро применять к другим стилям.
MonkeyStyler
В отличие от двух предыдущих инструментов для работы со стилями FireMonkey, MonkeyStyler — это полноценный инструмент для работы со стилями, с помощью которого можно:
- Работать с несколькими файлами стилей одновременно
- Копировать различные элементы стиля
- Управлять свойствами элементов с помощью инспектора свойств (похожего на Object Inspector Delphi)
- Просматривать поведение элемента, не сохраняя при этом файл стиля
Самый простой способ создать свой стиль для какого-либо элемента управления или вообще для всего приложения — это скопировать какой-нибудь «родной» стиль, предоставляемый Embarcadero и внести в него какие-либо изменения. После чего создать новый файл *.style и использовать его в своей программе.
В MonkeyStyler это делается очень просто. К примеру, я захотел создать свой стиль для TButton, основываясь на стиле Light.Style. Запускаем MonkeyStyler, загружаем файл со стилем и в списке выбора элементов стиля ищем стиль кнопки:
Теперь мы можем тут же в окне просмотра включить/выключить различные компоненты стиля (например, эффекты) посмотреть как работает этот элемент управления:
Скопируем этот стиль в другой файл. Для этого просто жмем кнопку «Copy Element To…» и в открывшемся окне задаем параметры копирования:
Жмем «Ok» и элемент стиля переносится в новый файл <Untitled>:
Теперь мы можем работать с этим элементов как угодно, не боясь при этом испортить уже имеющийся файл и, в случае необходимости, возвращаясь к основному файлу стиля не перезагружая программу (файл Lite.Style все так же доступен в списке).
К примеру, я изменил внешний вид кнопки немного изменив заливку у TRectangle:
После этого я сохранил получившийся стиль в файл «MyButton.style» и загрузил его в StyleBook:
Одной из интересных возможностей MonkeyStyler является «живой» просмотр стиля в наших приложениях. Для этого вместе с MonkeyStyler поставляется несколько модулей, содержащих необходимые классы и методы для обеспечения связи между MonkeyStyler и приложением, а в Wiki на сайте разработчика подробно описано, что и как необходимо сделать, чтобы обеспечить «живой просмотр».
К информации с Wiki можно только добавить следующее:
- Чтобы живой просмотр заработал необходимо вначале запустить MonkeyStyler и только затем — тестовое приложение. Пробовал запускать наоборот — функция не заработала.
- Везде, где у объекта StylerComms используются имена файлов необходимо использовать полные имена, включающие путь
В целом, работа с MonkeyStyler мне показалась достаточно удобной и простой. Понравилась функция «живого просмотра» стиля. Думаю, что если FireMonkey наберет достаточную популярность у разработчиков, то MonkeyStyler также будет пользоваться успехом.
Если же говорить в целом про все рассмотренные выше инструменты, то:
- Bitmap Style Designer выгодно использовать там где необходимо перенести стиль в FireMonkey, например из VCL. При переносе стилей из VCL в FMX я не заметил каких-либо артефактов у элементов управления — всё переносится грамотно. Недостаток у стиля, созданного с Bitmap Style Designer, как я упоминал, размер. Но с этим ничего не поделаешь — надо ведь где-то png-хранить.
- Firemonkey Style Equalizer и MonkeyRecolor — удобно использовать в том случае, если нам нет необходимости изменять состав элементов в стиле и добавлять в стиль что-либо свое, но необходимо откорректировать цветовую палитру. Лучшего решения, чем эти два инструмента, пока не встретил.
- MonkeyStyler — удобно использовать для создания собственных стилей. От стандартного редактора стиля в Delphi MonkeyStyler отличает удобная работа с группой файлов — быстрое копирование элементов из одного файла в другой, переименование и т.д. и, конечно же, «живой просмотр» стилей.
Если Вы знаете ещё какие-либо инструменты для работы со стилями FireMonkey, то отписывайтесь в комментариях — добавлю их к статье.
Влад, а рисунок — это сейчас так выглядит дефолтный стиль (в XE3)? Просто в XE2 я такого не наблюдаю — новый похож больше. И вопрос в догонку — можно ли его взять из XE3 и перенести в XE2?
Keeper, да это дефолтный стиль. По переносу сказать точно не могу, но судя по тому, что те же утилиты, которые я рассматриваю в посте писались и собирались под XE2 и нормально пашут со стилями в XE3 — видимо можно перетягивать стили FMX из XE3 в XE2.
Громадная работа, Влад, респект! Я вообще не понимаю, КАК ты можешь так быстро и качественно писать! Немного уточнить хочу. В XE2 стили FM были только векторные, что не позволяло сделать «pixel perfect». В ХЕ3 стили FM стали растровые (+к тому что было). Утилита — одна для создания растровых стилей Bitmap Style Designer, а стиль можно сохранить как vsf, но можно экспортировать в формат FM. Еще раз (для всех) — есть «растровый стиль» и его редактор Bitmap Style Designer, который основан на следующем принципе. Есть Style.png, а элементы управления (TButton, например) имеет часть области этого растра в качестве своей «морды». Можно… Подробнее »
Всеволод, спасибо. Ведь ещё когда писал пост не мог вспомнить, что упускаю что-то по стилям FM 2.0. А оно вон оно где — «pixel perfect» :)
Не-не, ты написал очень хорошо. Я просто постарался, чтобы часто встречающийся акроним «pixel-perfect», переведённый как «с-точностью-до-пикселя» или «пиксель-в-пиксель» привязывался мысленно (например) к твоему великолепному изложению.
Дай пошутить.
>>2. Жмем «Apple and Close».
Оговорка? :)
В смысле — «оговорка по джобсу»?
Всеволод Леонов, да, иногда, понимаешь, заносит — начинаю оговариваться :)
Простите, что не в тему статьи. Сейчас пытаюсь разобраться с FM, и в один прекрасный момент стандартный редактор стилей «глюкнул». Пропала правая панель (на этом рисунке), хотя в дереве «структуры» (у Вас в левом верхнем углу) объекты-контейнеры отображаются. Не подскажете, как можно это поправить?
Влад, проверь мобильную версию блога — не могу читать комментарии вообще (Opera Mobile, Mini, Dolphin), да и статью наверное лучше целиком — а то минуту читаешь, минуту ждешь.
Keeper, ок. Я просто сам мобильной версией не пользуюсь — воткнул плагин и забыл =) Гляну что там можно настроить и можно ли вообще что-то настроить.
MonkeyStyler кривая программа и своих денег не стоит, к тому же она делает тоже самое что и стандартные средства в StyleBook, а если нужно изменить дизайн отдельного элемента например только кнопки, то можно просто по элементу нажать правой кнопкой и выбрать Edit custom Style… Причем так можно делать стиль для каждого элемента отдельно.
Виталя, в XE2 я бы с вами согласился, в XE3, извините, но нет :) После того как в XE3 редактор «влился» волшебным образом в окно Structure на него без слез смотреть не возможно — попробуйте хотя бы без лишних телодвижений удалить элемент стиля. В MonkeyStyler (при всех его недостатков, которые, не спорю — есть) я могу выполнить эту операцию легко :)
@slh
Не, не глюканул. В Delphi XE3 с правой панели редактор стилей переехал в левую (выше инспектора объектов). Там, где «structure». Это не бага, это — фича :)
Вот редактор стилей который я разрабатываю, поддерживает стили XE2 и XE3 и множество различных функций, помогите улучшить продукт своими предложениями или замечаниями.
http://www.vr-online.ru/forum/programma-style-editor-dlja-firemonkey-styles-6429
Добрый день
Хотел уточнить такую мелочь: а как использовать один StyleBook для всего приложения? Положил на главную форму, настроил. Для других форм не могу выбрать StyleBook от главной формы в свойствах ?
Спасибо
Nick N., помниться была какая-то проблемка со StyleBook и решалась она следующим образом:
1. В uses подключаем модуль главной формы на которой лежит StyleBook
2. В OnCreate ручками задаем:
StyleBook:=Form1.StyleBook
Спасибо! Так и сделаю!
[…] работа с компонентами, по другому работают стили, по другому реализован механизм Drag&Drop. И даже имея […]
Если кто будет искать: C:\Program Files\Embarcadero\Studio\18.0\bin\BitmapStyleDesigner.exe
А то поиск в проводнике почему-то в упор не находит…
Кстати в 10.1 дефолтный скин слегка отличается, то что в нижнем правом углу убрано, а ниже добавлены стрелки для панели управления плеером.
Embarcadero® Delphi 10.1 Berlin Version 24.0.25048.9432 уже не компилирует :(