Панель навигации

extra_toc

Панель навигации - это многофункциональный компонент, позволяющий информировать пользователя о текущем экране и предлагающий контекстно зависимые операции.

Этот компонент обычно используется в большинстве мобильных приложений.

Панель состоит из следующих частей:

  1. Заголовок.
  2. Подзаголовок.
  3. Кнопка навигации. Обычно используемая для возврата на предыдущий экран или открытия бокового меню.
  4. Логотип.
  5. Блок с кнопками.

Заголовок/Подзаголовок

Заголовок задается через свойство Title, подзаголовок через - Subtitle.

Адаптация под разные высоты системного статус бара

TfgNavigationBar подстраивает свое содержимое под системный статус бар. Другими словами, он специально смещает свое содержимое на высоту системного статус бара, чтобы содержимое не перекрывалось статус баром. На разных устройствах высота статус бара может быть разной. По умолчанию высота для панели навигации учитывает "стандартную" высоты системного статус бара в 24px. Однако, при увеличении размера системного статус бара, содержимое TfgNavigationBar будет обрезаться.

Чтобы не допустить обрезания содержимого панели навигации, нужно рассчитывать высоту панели с учетом высоты статус бара:

procedure TfmMain.fgFormSafeAreaChanged(Sender: TObject; const AScreenInsets: TRectF);
const
  DefaultOneTitleHeight = 56;
begin
  fgNavigationBar.Height := DefaultOneTitleHeight + AScreenInsets.Top;
  fgNavigationBar.Realign;
end;

У формы есть специальное событие TfgForm.OnSafeAreaChanged, это событие информирует разработчика о том, что меняются отступы по краям экрана, в которых должен располагаться основной контент формы. Эти отступы гарантируют, что содержимое формы не будет ничем перекрываться. Отступы могут меняться, например, если у телефона есть "челка", то при повороте устройства, системный статус бар будет менять свою высоту.

Логотип

Изображение логотипа можно указать через свойство LogoImageName.

Кнопка навигации

Кнопка навигации отображается, как кнопка с иконкой и без текста. Чтобы кнопка появилась на панели необходимо указать ее иконку через ButtonOptions.NavigationImageName.

Кнопки действий

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

  1. Title - текст на кнопке;
  2. IconName - иконка;
  3. Enabled - Доступность для нажатий;
  4. Visible - видимость;
  5. Name - имя, которое можно использовать для идентификации кнопки на уровне кода.
  6. OnTap - Событие, срабатывает в момент нажатия на кнопку.

Поскольку настройки кнопок хранятся в коллекции "ActionButtons", то для удобства поиска кнопки среди остальных введено свойство Name. Указав любое имя для вашей кнопки, вы сможете легко получить ее через ActionButtons.ByName['<Name>'].

Схлопывание кнопок

Поскольку панель навигации имеет относительно малый занимаемый на экране размер, а контекстных операций может быть много, панель автоматически схлопывает большое количество кнопок-действий в контекстное меню. За то, нужно ли кнопку схлопывать в меню или нет, отвечает свойство VisibilityMode.

  1. AlwaysVisible - Не схлопывать. Всегда показывать на панели.
  2. VisibleIfRoam - Не схлопывать, если еще есть место.
  3. Collapsed - Всегда схлопывать.

Обратите внимание, что для мобильных телефонов, количество отображаемых кнопок на панели по умолчанию равно 2, а на планшете 3. Однако, вы всегда можете откорректировать это через задание значения VisibilityMode = AlwaysVisible.

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

Панель навигации поддерживает встраивание поля поиска, которое может использоваться для ввода данных поиска. Поле привязывается к кнопке-действия, по которому оно будет отображено в случае нажатия на соответствующую кнопку-действия. Для того, чтобы привязать поле поиска к кнопке действия, нужно указать у кнопки ActionControl = Search. Это приведет к автоматическому созданию экземпляра поля поиска, привязанного к кнопке-действия. Вы можете настроить поведение этого поля через доступные свойства.

Настройка внешнего вида

Панель навигации поддерживает два варианта отображения:

  1. Полностью прозрачный вариант
  2. Подкрашенный в однотонный цвет

Прозрачность

Полностью прозрачная панель задается при помощи задания Style = Translucent. По умолчанию панель использует режим отображения Opaque.

Однотонный цвет всех иконок

Вы можете загружать разноцветные иконки. Однако, в iOS и Android рекомендуется использовать однотонные иконки. При разработке мобильного приложения вы можете столкнуться с ситуацией, что одна и та же иконка вам будет нужна в темном и светлых оттенках (в зависимости от вашей темы). В этом случае панель навигации предлагает функционал для задания оттенка всем вашим иконкам, используемым на панели навигации. Задать оттенок иконкам вы можете через свойства ButtonsOptions.IconTintColor или ButtonsOptions.IconTintColorName.

Цвет заднего фона

Цвет заднего фона задается через свойство TintColorName или TintColor.

Настройки заголовка/подзаголовка

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

События

Панель навигации предлагает набор событий для отслеживания нажатия на кнопки:

  1. OnNavigationIconTap - срабатывает в момент нажатия на кнопку навигации.
  2. OnActionButtonTap - срабатывает в момент нажатия на кнопку-действия. В параметрах передает экземпляр нажатой кнопки.