Рекомендуем!
Если Вы видите здесь эту рекламу, значит увидят и Вашу рекламу...

Нестандартный интерфейс - просто! Часть третья

Данила Лепихин

Несмотря на все богатство возможностей элементов, описанных ранее, эти кнопки все же остаются плоскими. Поэтому сейчас мы переходим к самым интересным кнопкам - с неограниченными возможностями в оформлении внешнего вида и эффектов.

Вариант третий - кнопки на основе визуального компонента Image. Прежде всего, необходимо подготовить три изображения кнопок: "режим ожидания", "под мышкой" и "нажатая". Изображения могут быть как прямоугольной, так и любой другой формы. Если кнопка не прямоугольная, то незанятое ей пространство необходимо закрасить цветом, который не присутствует на самой кнопке (это будет цвет прозрачности). Изображения должны быть в формате BMP. Теперь разместим на форме четыре компонента Image: один из них (Image1) будет кнопкой, три других будут невидимы (свойство Visible = False), поэтому разместить их можно в любом удобном месте. Если ваша кнопка не прямоугольной формы, то для Image1 необходимо изменить свойство Transparent на True. Выбираем изображения: сама кнопка (Image1) и Image2 должны содержать рисунки "режима ожидания", два других компонента (Image3 и Image4) , соответственно, "под мышкой" и "нажатой".

Переходим к коду. Используются те, что и ранее, события. Итак, в обработчике события Image1 OnMouseMove пишем следующие строки:

if (Image1->Tag==0) {
Image1->Picture=Image3->Picture;
Image1->Tag=1;
}

Теперь при появлении мышки над кнопкой, изображение кнопки изменится на изображение, содержащееся в Image3. К сожалению, даже в шестом Билдере для компонента Image не существует события MouseLeave, поэтому и в шестой, и в более ранней версии необходимо использовать обработку события формы MouseMove для того чтобы отследить момент, когда мышка "покинет" кнопку:

if (Image1->Tag==1) {
Image1->Picture=Image2->Picture;
Image1->Tag=0;
}

Из этого отрывка кода видно, для чего нам понадобился компонент Image2, с таким же изображением, как и сама кнопка. Далее аналогично обрабатывается нажатие кнопки в событии OnMouseDown:

Image1->Picture=Image4->Picture;

и ее отпускание в событии OnMoudeUp:

Image1->Picture=Image3->Picture;

Эту кнопку, как и приведенные ранее, при необходимости можно использовать и как кнопку с фиксацией (первое нажатие - нажимает кнопку, второе - отпускает). В таком случае рисуем еще одно изображение - "нажатая кнопка без мышки" и помещаем его в новый компонент Image5. Этот вариант несколько сложнее и здесь следует заранее определиться со значениями свойства Tag нашей кнопки.

Есть четыре состояния такой кнопки:

  • Не нажатая кнопка "без мышки"
  • Не нажатая кнопка "под мышкой"
  • Нажатая кнопка "под мышкой"
  • Нажатая кнопка "без мышки"

Им будут соответствовать значения свойства Tag: 0, 1, 2, 3. Процедуру обработки события OnMouseMove дополняем строками:

if (Image1->Tag==3) {
Image1->Picture=Image4->Picture;
Image1->Tag=2;
}

Процедуру обработки события формы OnMouseMove дополняем строками:

if (Image1->Tag==2) {
Image1->Picture=Image5->Picture;
Image1->Tag=3;
}

И, наконец, в обработчик события OnClick вносим строки:

if (Image1->Tag==1) Image1->Tag=2;
else Image1->Tag=1;

Конечно, можно не вставлять все картинки непосредственно в исполнимый файл, а считывать их каждый раз с диска, но, во-первых: чтение с диска занимает гораздо больше времени чем из памяти, и изменение рисунка будет происходить с некоторой задержкой, а во-вторых, если вы пишете небольшую программу, то будет не очень удобно, если она будет состоять из нескольких файлов вместо одного.

Надеюсь, приведенные выше примеры дадут достаточно информации для разработки собственных видов кнопок, визуальные среды разработки имеют еще много компонентов, преобразовать которые под свои нужды не составит особого труда, нужно только как следует к ним присмотреться.

Cайт автора: http://www.ldbsoft.nm.ru/

 


Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com