— 0
— 0
— 0
— Создание интерфейса с использованием PNG-графики
Автор: LanKasper
Нам понадобятся: Photoshop (или подобные редакторы), Delphi.
Кроме того: некоторые навыки работы в графических программах.
Также, для правильной работы приложения, необходим плагин «Прямые руки»,
который Вы можете скачать с этого сайта в виде исходников :-)
На рынке программного обеспечения все больше и больше стало появляться программ с использованием своего стильного интерфейса. WinAMP, Windows Media Player, Nero Smart Start и многие другие. Отличительной особенностью перечисленных мной программ является их способность изменять цвет интерфейса, именно цвет, а не само оформление.
Совсем недавно передо мной встала задача создать в Delphi 7 интерфейс программы в стиле Windows Media Player (WMP), предоставив пользователю выбирать цвет панелей (совсем как в WMP). Проведя несколько часов в Интернете, я нашел лишь готовые скины и компоненты для их использования в приложениях, написанных в Delphi. Использование смены цветовой палитры всех изображений в программе происходило медленно и не очень подходило под мои нужды. Таким образом, я решил подумать своими мозгами :-)
После некоторых размышлений и экспериментов я решил использовать png-графику. Решение было вынесено в пользу png потому, что этот формат поддерживает прозрачность и полупрозрачность. Создав в фотошопе несколько образцов с различными эффектами типа градиентов, прозрачности, слияния прозрачных градиентов и прочего, я начал экспериментировать в Delphi. На радость вся интеграция png-графики сводилась к размещению на форме компонента TImage и загрузке в него png -изображения :-)
Теперь о том, как это сделать самому.
Photoshop
Создайте новое изображение, затем для самого простого примера сделайте заливку белым градиентом.
Залейте фоновый слой черным цветом (или любым другим темным цветом).
Затем создайте новый слой, залейте его белым градиентом. По окончании работы с градиентами и перед сохранением в png, удалите или отключите фоновый слой.
Сохраните изображение как png-файл.
На этом создание простейшего примера в фотошопе закончено, приступаем к работе в Delphi.
Добавление поддержки PNG в Delphi
Для того, чтобы научить программы понимать png-изображения, заходим на сайт http://pngdelphi.sourceforge.net/ и загружаем архив. Достаточно подключить модуль из архива к проекту и Delphi начнёт понимать формат png!
Delphi
Создайте новый проект, поместите на форму компоненты: TColorBox и TPanel, на TPanel установите TShape (он будет являться фоном нашего png-изображения) установите свойство TShape Align равное alClient.
Дальше на ту же панель помещаем TImage, также ставим ему свойство Align равное alClient.
Затем загружаем в TImage наше png-изображение, и, если вы все правильно сделали в фотошопе, то после загрузки изображения Вы ничего не должны увидеть – только белый фон (белый градиент на белом TShape – теперь вам понятно, почему нельзя сделать оформление WMP полностью белым :-) ). Теперь напишем процедуру на изменение TColorBox - OnChange. Совсем просто (в нашем примере):
procedure TForm1.ColorBox1Change(Sender: TObject);
begin
Shape1.Brush.Color:=ColorBox1.Selected;
end;
Теперь запускаем приложение и пробуем изменить цвет в TColorBox1. Теперь Вам все должно стать понятно. Использование панелей дает возможность изменять цвет интерфейса по частям или создать более темные или более светлые зоны в вашем приложении.
Данная статья дает пример работы png в приложениях. Вы можете создавать интерфейс целиком на png-изображениях (например, Style XP - его главное окно). Если немного подумать, то можно обеспечить плавное изменение цвета с использованием TTrackBar или подобных регуляторов также как это реализовано в Nero и WMP.
Пример png-изображения и исходники программы, описанной в статье »
Примеры интерфейсов с изменяемыми цветами:
 |
 |
Основное окно Windows Media Player (в синем оттенке) ... |
... и это же окно через пару секунд ... |
 |
 |
Окно Nero Smart Start ... |
И уже в других цветах ... |
 |
 |
Окно проигрывателя Winamp (цветовая схема Blood) |
А это цветовая схема Night Vision |
А вот эти самые диалоги и элементы для выбора цвета:
 |
 |
 |
Автор: Косарев Антон Сергеевич
Статья добавлена: 14 февраля 2008
Следующая статья: О формах »
Зарегистрируйтесь/авторизируйтесь,
чтобы оценивать статьи.
Статьи, похожие по тематике
Для вставки ссылки на данную статью на другом сайте используйте следующий HTML-код:
Ссылка для форумов (BBCode):
Быстрая вставка ссылки на статью в сообщениях на сайте:
{{a:44}} (буква a — латинская) — только адрес статьи (URL);
{{статья:44}} — полноценная HTML-ссылка на статью (текст ссылки — название статьи).
Поделитесь ссылкой в социальных сетях:
Комментарии читателей к данной статье
Пока нет комментариев к данной статье. Оставьте свой и он будет первым.
Оставлять комментарии к статьям могут только зарегистрированные пользователи.