Как вставить красивую кнопку в программу
В этой статье, я хочу показать вам, как сделать вашу программу более красивой и отойти от серого фона и серых кнопок. Вы наверно подумали, что сейчас мы будем устанавливать какой-нибудь дополнительный компонент. Нет, нет и еще раз нет, я предлагаю вам другое решение этой проблемы, ну а делать так или нет решать вам.
Итак, решение довольно простое — это использование вместо компонента button (кнопка) компонент Image, у него есть все основные свойства, которые есть у кнопки. Сразу возникает резонный вопрос, почему не кинуть на форму компонент bitbtn и просто не наложить на него изображение? Конечно, можно сделать и так, но изображение, которое можно наложить на bitbtn может быть только формата bmp что в некоторых случаях не нам не подходит.
Итак, качаем из раздела графика нужный архив, в котором вы найдете 2 файла. Первый имеет формат jpg, а второй psd (фотошоповский формат). Если изображение, является большим или просто не подходит под дизайн вашей программы, открываем второй файл фотошопом и вносим нужные коррективы.
изменение размера изображения
Изменяем размер изображения.
Выбираем инструмент Правка текста (горизонтальный текст), кликаем по надписи текст и меняем текст на свой.
После чего сохраняем картинку в jpg. Так изменения внесены, давайте теперь разберемся со вставкой графики. Я буду рассказывать на примере кнопки. Кидаем на форму компонент Image с закладки Additional, в свойстве Picture задаем путь к картинке с кнопкой. Вот и все если теперь создать событие OnClick по компоненту Image то мы получим вполне красивую кнопку.
Пример использования кнопок в программе Delphi
Сравните теперь обычные серые кнопки и те которые мы только что вставили. Разница очевидна!
Вот и все довольно просто и со вкусом. На последок хочу сказать, что если вы хотя бы чуть-чуть владеете фотошопом то для вас не составит труда создать графику для вашей программы своими силами. А я в свою очередь буду очень рад, если вы поделитесь ею со мной. Лучшие проекты я обязательно представлю на сайте.
P.S. Вы можете перепечатывать данную статью при условии сохранения авторского блока и ссылки на http://delphiexpert.ru как на сайт — источник.
Дата создания: 2008-05-25
Автор: Владимир Любаев
Просмотров: 27719
Коментарии:
Коментарий добавил(а): Валера
Дата: 2008-09-14 22
Если вставить такую кнопку надо будет каждый элемент программы разукрашивать.
Коментарий добавил(а): Рустам
Дата: 2008-09-28 41
А ещё бы добавить возможность, чтобы кнопка реагировала на нажатие. Так думаю будет смотреться прикольнее… procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin Image1.Left := Image1.Left + 1; Image1.Top := Image1.Top + 1; end; procedure TForm1.Image1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin Image1.Left := Image1.Left — 1; Image1.Top := Image1.Top — 1; end;
Коментарий добавил(а): Рустам
Дата: 2008-09-28 -15
А ещё бы добавить возможность, чтобы кнопка реагировала на нажатие. Так думаю будет смотреться прикольнее… procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin Image1.Left := Image1.Left + 1; Image1.Top := Image1.Top + 1; end; procedure TForm1.Image1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin Image1.Left := Image1.Left — 1; Image1.Top := Image1.Top — 1; end;
Коментарий добавил(а): Рустам
Дата: 2008-09-28 -21
А ещё бы добавить возможность, чтобы кнопка реагировала на нажатие. Так думаю будет смотреться прикольнее… procedure TForm1.Image1MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin Image1.Left := Image1.Left + 1; Image1.Top := Image1.Top + 1; end; procedure TForm1.Image1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer); begin Image1.Left := Image1.Left — 1; Image1.Top := Image1.Top — 1; end;
Коментарий добавил(а): Cool_prime
Дата: 2008-10-07 -5
Но мне игтересно как сделать свой власний стиль некоторих компонентах например в Memo?
Коментарий добавил(а): Ленинградская обезьяна
Дата: 2008-10-31 -11
хыхыхы
Коментарий добавил(а): Вадим
Дата: 2008-11-01 1
Ещё можно скачать с сайта http://crystalbutton.com программу Crystal Button. Создавать с её помощью изображения кнопок и использовать их в BitBtn. Получается очень даже не плохо
Коментарий добавил(а): Павел
Дата: 2008-11-22 3
Используйте OnMouseMove по форме и по кнопке, для смены картинок при наведении.
Коментарий добавил(а): Яковченко Сергей
Дата: 2008-12-03 2
onMouseMove слишком уж часто будет вызываться это событие, что потребуется постоянной прорисовки компонента т.е вызовет мерцания. onMouseLeave и onMouseEnter лучшее решенее в данной ситуации
Коментарий добавил(а): Дмитрий
Дата: 2009-01-07 4
Два Image на форму, один на другой. В верхнем: Image1.onMouseDown: Image1.visible:=False; В нижнем: Image2.onMouseUp: Image1.visible:=True; Будет переключатель 🙂
Коментарий добавил(а): ;)-GR(#)L;)!
Дата: 2009-05-15 -1
Спс большое за уроки!
Коментарий добавил(а): jotem(a la france)
Дата: 2009-05-25 -1
хорош урок спас за совет…
Коментарий добавил(а): Sh0n
Дата: 2009-06-03 -1
спс большое !!!кул!!!
Коментарий добавил(а): Vov4ik
Дата: 2009-05-06 -1
Последнее решение, мне кажется более оптимальным. Обязательно выложу свои кнопки…
Коментарий добавил(а): Николай
Дата: 2009-07-23 3
кул, ты предлагаешь вместо одного компонента положить на форму 3 (обычное состояни, нажатое и отпущенное) ты учео что для каждого Image нужно описать процедуры? а если ты хочешь разместить штук 5 кнопок? и того 15 Image только на кнопки.
Коментарий добавил(а): Crouch
Дата: 2009-09-07 -2
большое человеческое спасибо за статью, очень помогла
Коментарий добавил(а): sts
Дата: 2009-09-29 1
А нафига велосипед изобретать. Имхо такие извращения только отвлекают и тормозят разработку. Хочется картинок? возьми скинкомпоненты и радуйся. Вон AlphaSkins — бесплатные и поддержка русскоговорящая.
Коментарий добавил(а): Mihailicus
Дата: 2009-10-10 -3
Интересно, а как форму кнопки можно поменять?
Коментарий добавил(а): верноника
Дата: 2009-10-13 -1
А как через IMAGE вставить картинку с расширением GIF? Я сделела классные кнопки, и у них должен быть прозрачный фон, а прозрачность можно сохранить только в GIF формате, и теперь фот не могу эту кнопку вставить в делфи.Помогите плиззз
Коментарий добавил(а): Мартин
Дата: 2009-10-28 -2
Всё можно присвоить к имэйджу. Это будет тормозить программу.
Коментарий добавил(а): Gluminator
Дата: 2009-12-02 0
Давненько это было… даже не помню когда. Я в одном своём приложении уже использовал такое, только я маленько изменил сам компонент TImage. Добавил OnMouseEnter и OnMouseLeave. На каждое событие мыши загружал отдельное изображение. Конечно всё прикольно… Но я использовал Bitmap, чтобы загружать их из ресурса программы.
Коментарий добавил(а): кнопка
Дата: 2009-12-07 -8
<form action=»http://www.delphiexpert.ru/index/0-1″ target=»_blank» method=»get»><input value=»English» type=»submit»></form> все просто. кнопка реагирует на нажате )))
Коментарий добавил(а): Аполлон
Дата: 2009-12-08 -3
Спасибо! Очень интересно!
Коментарий добавил(а): кот
Дата: 2010-01-29 -4
как сделать так, чтоб картинка на форме исчезала при наведении, а под ней появлялась другая???
Коментарий добавил(а): Саша
Дата: 2010-01-09 -4
Ребята я полный полный 0 в Дельфи, но очень хочу научиться програмированию!!! Книги не помогают!!! Но я не тупой, а совсем даже наоборот, просто люди лучше объясняют, чем книги, хотя людей учат книги. У кого есть свободное время и кому его не жалко за бесплатно меня учить, то пожалуйста помогите, вот мой ICQ 378 4444 61
Коментарий добавил(а): Fred
Дата: 2010-01-14 -7
кто можед дать коды для delphi. код закрыть свернуть восстановить? чтоб при нажати на картинку креста она закрывалась
Коментарий добавил(а): макс
Дата: 2010-01-27 -5
научите меня делфть проги на делфи стукните сюда 588723490 если надо заплачу
Коментарий добавил(а): lexx
Дата: 2010-02-01 0
а вот кто знает как можно сделать кнопи так, что бы при наведении она постепенно меняла цвет??? я имею ввиду например стиль висты. как в delphi можно такое реализовать?
Коментарий добавил(а): fedr
Дата: 2010-02-02 -1
забыл сказать…чтобы в Image отображать gif (хоть анимацию) нужно подключить модуль GIFImage от Андерса Меландера, качайте устанавливайте и все будет чикичики)))
Коментарий добавил(а): Дамский угодник
Дата: 2010-06-12 0
Что вы так боитесь лишних действий ? Вы на Pascale не работали ни разу ? там чтобы высети картинку на экран, а потом делать обработку нажатия на нее нужна уйма времени, мозгов и памяти! так что райдуйтесь мелочам и делайте одну процедуру, которая будет принимать Sendera и метять местами 2 image , которые будут друг на друге =)
Коментарий добавил(а): Вячеслав
Дата: 2010-02-12 -3
а вот кто знает как можно сделать кнопи так, что бы при наведении она постепенно меняла цвет??? я имею ввиду например стиль висты. как в delphi можно такое реализовать? —————————— Также…Только при наведении должен срабатывать таймер, который будет постепенно менять цвет)
Коментарий добавил(а): slavyan
Дата: 2010-04-03 -2
для Fred в обработчике OnClick для своих картинок-кнопок пишешь следующее application.terminate- закрыть прогу application.minimize- свернуть окно
Коментарий добавил(а): LeonSoft
Дата: 2010-05-28 0
Не очень удобно но на крайняк!!! 1)Качайте компоннты нестандартных кнопок… 2)Не всегда получится ровно отабразить такую конструкцию бес огромного кол. условий 3)Писать свой компонент!!! Безумие для меня по крайней мере
Коментарий добавил(а): LeonSoft
Дата: 2010-05-28 0
Не очень удобно но на крайняк!!! 1)Качайте компоннты нестандартных кнопок… 2)Не всегда получится ровно отабразить такую конструкцию бес огромного кол. условий 3)Писать свой компонент!!! Безумие для меня по крайней мере
Коментарий добавил(а): -vitas-
Дата: 2010-05-30 0
А не проще поставить ThemeEngine?
Коментарий добавил(а): имя
Дата: 2010-05-11 3
кометирую Дмитрий Дата: 2009-01-07 ето полная херня..извращение!!…таким способом ты только потратиш оперативную память на значений свйоств второго Image2..в borland сидят умные люди а не таких бахури как ты..и нет смысла ипользовать разные обработчики событий в разных елеметах.. если их можно ипользовать в одном елементе!
Коментарий добавил(а): Ylia
Дата: 2010-05-20 1
Да, конечно можно использовать Image1, но придется работать с графикой. Да и к тому же необходимо создавать несколько событий (при нажатии, при отпускании левой кнопки). Проще поработать с компонентом. Изменить на свой вкус и готово!
Коментарий добавил(а): Flyrk
Дата: 2010-06-05 0
Это не самый лучший вариант. У меня гораздо лучше и проще. Создайте новый компонент типа TGraphicControl. И в процедуре Paint — выставляйте свои настройки. А также выставляйте и обработчики типа MouseDown, MouseUp. По желанию можно добавить и MouseEnter и MouseLeave. Это лучше, в том что не приходится каждый раз копировать настройки для кнопок созданных в TImage. Вы можете оформить сваю программу таким образом, создав нужные вам компоненты. Я делал так интерфейс типа Adobe Media Player.
Коментарий добавил(а): Димон
Дата: 2010-07-09 3
Можно использовать OnMouseMove, чтобы убрать мерцания пишем procedure TForm1.FormCreate(Sender: TObject); begin form1.DoubleBuffered:=true; end; Мерцаний не будет:)