Создание прозрачных кнопок с графическими изображениями в FireMonkey

Delphi , Компоненты и Классы , Кнопки

Создание прозрачных кнопок с графическими изображениями в FireMonkey

FireMonkey (FMX) — это кросс-платформенный фреймворк для разработки приложений, поддерживающий широкий спектр операционных систем и устройств. Одной из особенностей FMX является возможность создания интерфейсов с использованием современных графических эффектов и анимаций. В данной статье мы рассмотрим, как создать прозрачную кнопку с графическим изображением, используя компонент TImage внутри TButton, а также как сделать этот стиль по умолчанию для всего приложения.

Проблема

Разработчики, которые только начинают работу с FireMonkey, могут столкнуться с трудностями при выполнении базовых операций, таких как добавление изображений на кнопки. При использовании компонента TImageControl внутри TButton для отображения изображения, может возникнуть проблема с отображением границы и белого фона, что не позволяет отобразить изображение с прозрачностью.

Решение

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

Если же вы хотите использовать TImageControl, вам необходимо отредактировать его стиль. Для этого кликните правой кнопкой мыши по компоненту, выберите "Edit Custom Style..." и в свойствах фона TRectangle установите цвет заполнения (Fill) из claWhite в claNull. После этого нажмите "Apply and Close". Для других TImageControl установите свойство StyleLookup в значение того же стиля.

Также не забудьте отключить свойство HitTest у компонента изображения, чтобы клики по прозрачным участкам изображения считались кликами по самой кнопке.

Альтернативный способ

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

Пример кода

unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, FMX.Helpers, System.Types, FMX.Graphics,
  FMX.Controls, FMX.Forms, FMX.Components, FMX.Layout, System.Math;

type
  TForm1 = class(TForm)
    Button1: TButton;
    Image1: TImage;
    procedure Button1Click(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

procedure TForm1.Button1Click(Sender: TObject);
begin
  // Здесь ваш код обработчика нажатия кнопки
end;

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Установка изображения для TImage с поддержкой прозрачности
  Image1.Picture.Graphic.LoadFromFile('path_to_your_transparent_image.png');
  Image1.Align = TAlignLayout.Client;
  Image1.HitTest = False;
end;

initialization
  Form1.FormCreate(Form1);
end.

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

Подтвержденный ответ

Используйте компонент TImage вместо TImageControl, чтобы обеспечить прозрачность по умолчанию. Убедитесь, что используете изображения с поддержкой канала альфа, например, PNG.

Если вы все же хотите использовать TImageControl, отредактируйте его стиль, убрав фон (claNull), и отключите свойство HitTest. Это позволит вам создать прозрачную кнопку с изображением для использования в вашем приложении на базе FireMonkey.

Заключение

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

Создано по материалам из источника по ссылке.

Описание: Создание прозрачных кнопок с графическими изображениями в FireMonkey для улучшения интерфейса приложений.

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: Кнопки ::