Jump to content

[Новости] Полностью обновленный компонент TfgButton


Recommended Posts

  • Administrators

В процессе реализации уже существующих компонентов библиотеки FGX Native для iOS мы иногда сталкиваемся с тем, что для полноценной кроссплатформенной разработки приложений текущего функционала компонентов уже не хватает. Например, в панели TfgNavigationBar (iOS) для кнопки навигации часто иконку дополняют текстом, в то время, как в андроиде текст никто не добавляет. Однако, речь в этой новости пойдет не об этом компоненте, а об обычной кнопке TfgButton.

С виду кнопка - один из самых простых компонентов. Однако, на практике, это довольно сложный компонент, если брать во внимание большое разнообразие в мире кнопок разных стилей и видов. Было много причин, почему кнопка TfgButton в библиотеке довольно ограничена в своих возможностях. Главная из них - это как сделать действительно удобный набор настроек, который угодил бы большинству и при этом был бы прост и гибок в настройке. 

Рад поделиться, что в процессе реализации iOS и изучения Material Design,  мы пришли к удобному на наш взгляд набору настроек кнопки. 

Стили

Теперь кнопка может иметь один из трёх базовых стилей:

image.png

  • Text - обычная текстовая кнопка, без рамки, с возможностью привязать иконку. Этот тип предназначен для третьестепенных действий.
  • Outlined - это плоская Text кнопка с окантовкой. Этот же тип используется для второстепенных действий.
  • Contained - это Outlined кнопка + заливка области.

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

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

image.png

При изменении стиля будут доступны разные наборы настроек внешнего вида:

image.png  image.pngimage.png

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

image.png

Настройки элементов

Стоит отметить, что теперь можно отдельно управлять отображением каждого элемента кнопки:

  1. Текст
  2. Иконка
  3. Рамка
  4. Наполнение

Таким образом, теперь для иконки можно отдельно указать оттенок прямо на уровне компонента. Это особенно удобно в случаях, когда вы используете одну и ту же иконку в разных местах с разными оттенками. Если ранее для решения подобной задачи было необходимо делать копии одной и той же иконки и менять ей оттенок в дизайнере ресурсов, то сейчас достаточно установить свойство Appearance.Icon.TintColorName равным "Theme\Text\Icon" (к примеру).

image.png

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

image.png

При этом, кнопка с Contained стилем умеет автоматически подбирать цвета текста и иконки на основании цвета фона (если вы не указали свои цветовые предпочтения явно😞

image.png

Помимо этого, если вы хотите отобразить цветную иконку, вы можете отключить автоматическую перекраску через свойство Appearance.Icon.RenderMode.

image.png

Для рамки кнопки мы предусмотрели возможность изменить значение радиуса скругления и толщину рамки.

image.png

Изменения API

  1. Переименованы свойства ImageName -> IconName, ImageLocation -> Appearnace.Icon.Location, так как на наш взгляд иконка - это небольшой графический элемент, который преимущественно отображается на кнопке. При этом мы оставили обратную совместимость, так что при запуске старого проекта, старое значение из свойства ImageName и ImageLocation будет автоматически прочитано.
  2. Свойства TextSettings и TextShadow теперь находятся в группе настроек Appearance.Text. Они так же будут успешно восстановлены для старых проектов.
  3. Старые типы кнопок TfgButonKind.Raised и Flat теперь не будут поддерживаться и при открытии проекта автоматически будут сконвертированы в Contained и Text стили.

P.S. Всем хороших выходных и успешного кодирования 🙂

  • Like 14
Link to post
Share on other sites

Как бы еще добавить события OnEnter и OnExit для кнопок? У меня есть обязательные поля для заполнения, которые сейчас выглядят как TfgLabel с наложенной на неё TfgButton (по тапу на кнопку выбирается из списка нужное значение и оно помещается на Label). Если поле не заполнено, то я не закрываю фрейм и ставлю фокус на кнопку, но визуально, увы, это не видно. Было бы хорошо, чтобы при этом кнопка как-то сразу выделялась ярким цветом, чтобы было понятно, что не заполнено. Кстати, моя конструкция как раз хорошо заменится новым видом кнопок )))

Link to post
Share on other sites
  • Administrators
13 часов назад, maximus-78 сказал:

и хотя бы ориентировочно, в каком релизе библиотеки будет это обновление?

В следующем мажорном обновлении 1.6.0.0.

  • Like 1
Link to post
Share on other sites
В 19.10.2020 в 23:52, Yaroslav Brovin сказал:

В следующем мажорном обновлении 1.6.0.0.

Ярослав, надеюсь, подсветка кнопки при нажатии будет соответствовать ее скруглению (как на рисунках)?

1.png

2.png

Link to post
Share on other sites
9 часов назад, Roman сказал:

Ярослав, надеюсь, подсветка кнопки при нажатии будет соответствовать ее скруглению (как на рисунках)?

Соответствует

Link to post
Share on other sites
  • 3 weeks later...

Не нашел возможности максимально сдвинуть иконку к краю кнопки. Возможно ли это в принципе?

Чтобы было как-то так: 960879104_.PNG.4831d1b3fc03259183a259f3433af5ef.PNG

Edited by dervish00
Link to post
Share on other sites
  • Administrators
2 часа назад, dervish00 сказал:

Не нашел возможности максимально сдвинуть иконку к краю кнопки. Возможно ли это в принципе?

Чтобы было как-то так: 960879104_.PNG.4831d1b3fc03259183a259f3433af5ef.PNG

Нет. Пока такой возможности нет. У кнопки есть еще внутренние отступы, которые зависят от стиля. Попозже мы выведем это свойство по типу TfgEdit.ContentPadding.

  • Thanks 1
Link to post
Share on other sites
1 час назад, Yaroslav Brovin сказал:

Нет. Пока такой возможности нет. У кнопки есть еще внутренние отступы, которые зависят от стиля. Попозже мы выведем это свойство по типу TfgEdit.ContentPadding.

Может тогда заодно и возможность задавать положение текста по вертикали и горизонтали добавить, если это возможно?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   1 member

×
×
  • Create New...