• 0
antarey

Плавающая кнопка

Вопросы

Как создать Floating Action Button - аналог кнопок в сервисах гугла, к примеру в Inbox большая кнопка Плюс?
Нужна уневерсальная реализация и для Вин и Андроид платформ

 

Изменено пользователем antarey

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

12 ответов на этот вопрос

  • 0

А что, просто кинуть на форму обычную кнопку - это будет не то?

  sbAddObjectFloating.Position.X := lvObjects.Width  - sbAddObjectFloating.Width - 5;
  sbAddObjectFloating.Position.Y := lvObjects.Height - sbAddObjectFloating.Height - 5;

Ну и задать ей якоря:

Screenshot_53.png

Изменено пользователем x11

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
В 07.01.2018 в 15:15, x11 сказал:

А что, просто кинуть на форму обычную кнопку - это будет не то?

Может и то , но с региона , как в примере Равиля, проще реализовать круглую кнопку

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Я использую обычную TSpeedButton с прозрачной png картинкой с круглой кнопкой.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
В 13.01.2018 в 17:14, x11 сказал:

Я использую обычную TSpeedButton с прозрачной png картинкой с круглой кнопкой.

В компонентах используется нативный рендеринг, из-за чего у круглых кнопок нету лесенок, как в ФМХ

И еще не нужно деплоить картинки (делать скейлы) захотел поменял цвет, или текст на кнопке.

ну вообщем дело ваше)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

нет никаких лесенок

Screenshot_53.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
16 часов назад, x11 сказал:

нет никаких лесенок

Screenshot_53.png

так у вас картинка, сделайте тоже самое на TCircle и увидите

на счет картинок я написал

В 15.01.2018 в 01:06, Равиль Зарипов (ZuBy) сказал:

И еще не нужно деплоить картинки (делать скейлы) захотел поменял цвет, или текст на кнопке.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Так в том-то и дело - зачем мне TCircle?

И картинку я не добавляю в Deployment.

Изменено пользователем x11

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
В 13.01.2018 в 13:14, x11 сказал:

Я использую обычную TSpeedButton с прозрачной png картинкой с круглой кнопкой.

В этом варианте при нажатии будет появляться сервый прямоугольник. Не идет. Вариант Равиля медленный, кнопка будет часто перерисовыватся, круг + картинка + тень. 

Поэтому лучший вариант это сделать кнопку в виде обычной картинки. TImage или TGlyph. Я делал на TGlyph чтобы все картинки были в ImageList. 

Подготовьте 3 пнг картинки с полностью готовой кнопкой, с тремя масштабами.

Scale 1 = 56x56
Scale 2 = 112x112
Scale 3 = 168x168

Поместите его в TImageList (обычно в глобальном Datamodule), добавьте свое изображение в список и добавьте 3 коэффициента масштабирования в исходное изображение (дважды щелкните элемент в списке «Источник изображений» в ImageList), в итоге одно изображение в TImageList будет иметь 3 scale. Поместите TGlyph на форму и выберите свой список изображений.

Установите событие OnClick в Form OnCreate (поскольку Glyph1 не имеет OnClick по умолчанию в Object Inspector):

Glyph1.OnClick := Click;
Glyph1.HitTest := true; 

В OnClick добавьте этот код для анимации:

procedure TForm2.TestClick(Sender: TObject);
begin
  TAnimator.AnimateFloatWait(Glyph1, 'Opacity', 0.5, 0.2);
  TAnimator.AnimateFloat(Glyph1, 'Opacity', 1, 0.2);
end;

Или вы можете использовать TImage - это еще проще и меньше кода, чем выше.

 

 

Изменено пользователем ENERGY

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
В 24.08.2018 в 21:49, ENERGY сказал:

В этом варианте при нажатии будет появляться сервый прямоугольник.

У меня не появляется.

ЧЯДНТ?

Может ты используешь неправильные PNG? Альфаканал и прозрачность есть?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

Да это в стилях убирается. Через SpeedButton даже проще, согласен..

Изменено пользователем ENERGY

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу