Перейти к содержанию
  • Регистрация
  • 0
antarey

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

Вопрос

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

 

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

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


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

Рекомендуемые сообщения

  • 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
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 коэффициента масштабирования в исходное изображение (дважды щелкните элемент в списке «Sources of Image» в ImageList,  там выберите "Add new Item"), в итоге одно изображение в TImageList будет иметь 3 scale. Чтобы понять какой 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
В 29.08.2018 в 19:50, ENERGY сказал:

Через SpeedButton даже проще, согласен..

SpeedButton вы не расположите поверх всех элементов, например ListBoxa с прокруткой. То есть кнопка на основе SpeedButton не будет  "floating".

Ваш же метод прекрасно работает.

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


Ссылка на сообщение
Поделиться на другие сайты
  • 0
2 часа назад, Hangar-18 сказал:

SpeedButton вы не расположите поверх всех элементов, например ListBoxa с прокруткой. То есть кнопка на основе SpeedButton не будет  "floating".

Ваш же метод прекрасно работает.

Почему это не расположу? Кликаем правой кнопкой в Design Time по контролу, и выбираем Control > BringToFront. Также метод BringToFront и SendToBack есть в runtime у каждого контрола.

Кнопка должна находится на форме (ее Parent).  

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

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


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

Почему это не расположу? Кликаем правой кнопкой в Design Time по контролу, и выбираем Control > BringToFront. Также метод BringToFront и SendToBack есть в runtime у каждого контрола.

Кнопка должна находится на форме (ее Parent).  

Да. Виноват. Просто думал, что с SpeedButton так не пройдет.

Подскажите, расположение картинок png по размерам и scale правильно как на скрине? 

 

2.jpg

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


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

Правильно. Фреймворк будет смотреть на значение в Scale - если оно будет около системного значения, то загрузит нужную картинку. Иногда, чтобы убедиться что картинка загружается, я раскрашиваю их в разные цвета.

Offtop: 

Иногда я беру картинку с разрешением scale 3 и оставляю только одну картинку указывая Scale 1 (т.е. на деле у нее разрешение scale 3).  TImage или TGlyph сделает авторесайз под размер компонента, но не всегда качественный авторесайз получается, нужно смотреть на результаты. Вообще (не только в Delphi), растровую картинку можно уменьшить почти без потери качества, а вот если ее увеличить - то тогда будет плохое качество - появятся растровые квадраты и картинка не будет выглядеть сглаженной. Поэтому не увеличивайте картинки малых разрешение, до более высокого. 

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

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


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

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить на вопрос...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.


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

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

×
×
  • Создать...