Jump to content

[Новости] Анонс 1.7.0.0 и новый компонент TfgBottomSheetLayout


Recommended Posts

  • Administrators

В ближайшее время выйдет новый релиз 1.7.0.0, главной новинкой которого станет новый компонент TfgBottomSheetLayout. Это специальный компонент для организации отображения дочернего содержимого через выдвигаемую панель с нижней части экрана. 

Обо всех деталях использования компонента ниже.

Структура

Новый компонент доступен на вкладке "FGX: Layouts" -> "TfgBottomSheetLayout" и представляет собой композицию из трех частей, аналогичную структуре компонента TfgDrawerLayout:

image.png

  1. TfgBottomSheet - выдвигаемая снизу страница.
  2. TfgBottomSheetContent - контейнер для основного содержимого экрана. 
  3. TfgBottomSheetLayout - координатор, отвечающий за управление отображением страницы.

Состояния и управление TfgBottomSheet

Страница может находиться в одном из трех конечных состояний:

  1. Страница полностью открыта - TfgBottomSheetState.Expanded;
  2. Страница свернута, но видна ее часть - TfgBottomSheetState.Collapsed
  3. Страница полностью скрыта - TfgBottomSheetState.Hidden.

Expanded.jpg  Collapsed.jpg  Hidden.jpg

В любой момент времени текущее состояние страницы можно получить через TfgBottomSheet.State. А чтобы программно управлять страницей, можно воспользоваться следующими методами TfgBottomSheet:

    /// <summary>
    ///   Полностью модально разворачивает панель с анимацией. Основное содержимое <c>TfgBottomSheetLayout.Content</c>
    ///   недоступно.</summary>
    /// <remarks>Если панель открыта, то ничего не делает.</remarks>
    procedure ShowModal;

    /// <summary>Полностью разворачивает панель с анимацией.</summary>
    /// <remarks>Если панель открыта, то ничего не делает.</remarks>
    procedure Expand;

    /// <summary>Сворачивает панель до заголовка с анимацией. </summary>
    /// <remarks>
    ///   Если у панели нет заголовка, то полностью скрывает панель с экрана. Если панель закрыта, то ничего не делает.
    /// </remarks>
    procedure Collapse;

    /// <summary>Полностью скрывает панель с экрана с анимацией.</summary>
    /// <remarks>Если панель уже полностью скрыта, то ничего не делает.</remarks>
    procedure Hide;

Настройка скрытия

Если вы хотите запретить полное скрытие страницы с экрана, вы можете это сделать при помощи свойства TfgBottomSheet.IsHideable

    /// <summary>Может ли пользователь полностью скрыть панель?</summary>
    property IsHideable: Boolean read FIsHideable write SetIsHideable default DefaultIsHideable;

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

За высоту видимой части страницы в свернутом режиме отвечает свойство TfgBottomSheet.PeekHeight:

    /// <summary>Высота части панели, которая не задвигается целиком.</summary>
    /// <remarks>Работает в связке со свойством<c>Hideable</c>.</remarks>
    property PeekHeight: Single read FPeekHeight write SetPeekHeight stored IsPeekHeightStored nodefault;

По умолчанию страница имеет непрозрачный фон. Однако, в определенных случаях, удобно использовать прозрачный фон. Таким образом можно добиться любой разметки вашего содержимого и добавить любые вложенные контейнеры. За прозрачный режим отвечает свойство TfgBottomSheet.IsTransparent.

image.png

 

Модальный режим

По умолчанию панель открывается и не блокирует основное содержимое. Вы можете продолжать взаимодействовать с контентом TfgBottomSheetContent. Таким способом обычно делают панели для отображения сопутствующей детальной информации https://material.io/components/sheets-bottom. Например:

image.png  image.png

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

image.png

В этом случае, вам необходимо открыть страницу используя метод TfgBottomSheet.ShowModal.

Демонстрационные проекты

В 1.7.0.0 включены два демо-проекты, которые показывают использование модального и обычного режимов использования. Их вы можете найти в ветке "Компоненты" -> "TfgBottomSheetLayout".

  • Like 15
  • Thanks 1
Link to post
Share on other sites

Превосходные новости! Спасибо большое! Ждём как обновки!))
А правильно ли я понял, что можно будет сделать его прозрачным, кинуть Rectangle закруглить края и получиться что верхняя часть будет на прям прямоугольник, а с закруглением? Так получится?

  • Like 1
Link to post
Share on other sites
  • Administrators
4 minutes ago, k0de said:

А правильно ли я понял, что можно будет сделать его прозрачным, кинуть Rectangle закруглить края и получиться что верхняя часть будет на прям прямоугольник, а с закруглением? Так получится?

Да, собственно для этого и сделан прозрачный режим.

  • Thanks 1
Link to post
Share on other sites
  • Yaroslav Brovin changed the title to [Новости] Анонс 1.7.0.0 и новый компонент TfgBottomSheetLayout

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.

  • Similar Content

    • By Yaroslav Brovin
      В ближайшие дни мы выпустим новый релиз FGX Native 1.9.0.0, в который будет включено большое количество разнообразных улучшений, новых возможностей и исправлений ошибок.
      TfgBottomSheetLayout
      Новый компонент, добавленный в 1.8.0.0, имел среди своих возможностей модальный режим отображения страницы.
      У текущей реализации модального режима есть одно ограничение, которое делает его не очень удобным для использования, а именно: у модального режима нет промежуточной стадии Collapsed (когда панель свернута в корешок, но при этом еще не блокирует основное содержимое).
      Мы решили разбить модальный режим на группу новых настроек:
      Настройки затемнения основной области содержимого TfgBottomSheetContent (TfgBottomSheetLayout.ContentShadingSettings). Теперь вы можете включать или отключать затемнение в любой момент времени, а также указать цвет, используемый для затемнения. Эта настройка особенно нужна при поддержке темной темы в вашем приложении. Настройка блокирования взаимодействия с основным содержимым компонента TfgBottomSheetLayout.BlockContentMode. /// <summary> /// <para> /// Режим блокирования получения любых событий основного содержимого <с>TfgBottomSheetContent</c>: /// </para> /// <list> /// <item><b>Never</b> - Никогда.</item> /// <item><b>WhenCollapsedOrExpanded</b> - Когда страница свернута или развернута.</item> /// <item><b>WhenExpanded</b> - Только когда страница разворачивается или развернута.</item> /// </list> /// </summary> TfgBlockContentMode = (Never, WhenCollapsedOrExpanded, WhenExpanded); Теперь при помощи этих двух настроек вы сможете гибко настроить модальный режим. Мы удалили старый метод ShowModal. Чтобы сделать его в 1.9.0.0 достаточно в дизайнере указать две настройки TfgBottomSheetLayout:
      BlockContentMode = WhenCollapsedOrExpanded ContentShadingSettings.Enabled = True. Буфер обмена
      Реализован новый кроссплатформенный сервис по работе с системным буфером обмена FGX.Clipboard.TfgClipboardService для Android и iOS. На текущий момент сервис позволяет работать только с текстом. Для ознакомления с работой сервиса доступен пример "Системные сервисы" -> "Текстовый буфер обмена".
      Темы
      Несмотря на то, что темы поддерживаются уже давно, с ними был ряд сложностей, связанных с использованием своих названий ресурсов. Смена темы автоматически работала отлично для всех компонентов, у которых разработчик не указывал свой ресурс. Однако, как только указывался любой ресурс (не по умолчанию), то такой ресурс считался независимым от темы и при переключении темы не менялся. Мы исправили эту ситуацию, и теперь ресурс привязывается к текущей теме формы, если ресурс указывается из текущей формы. Это позволяет сделать полноценное переключение темы для всех свойств. Если же ресурс не привязан к теме, то такой ресурс не будет меняться при смене темы у формы.
      Например, мы хотим кастомизировать оттенок панели навигации и хотим использовать "Dark Primary" цвет вместо "Light Primary". На скриншоте снизу мы указываем ресурс из текущей темы "Theme Light":

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

      Дополнительно, мы решили слега помочь разработчику понять, какие ресурсы компонент использует по умолчанию. Теперь мы всегда отображаем название ресурса, используемого по умолчанию у свойства, даже если ресурса нет (если другое не указано). В старом подходе название ресурса по умолчанию отображалось только, когда в приложении есть тема. Однако, это не очень удобно, так как не дает возможности быстро узнать, какие ресурсы использует компонент по умолчанию и немного усложняет жизнь разработчиков. 

      TfgListMenu
      Это один из самых старых компонентов и в связи с разными идеями по его улучшению и развитию мы его не трогали. С одной стороны, это довольно удобный компонент для быстрого прототипирования меню, однако, с другой, он был ограничен в ряде настроек, которые позволили его бы слегка подстроить. Поэтому разработчики часто использовали TfgCollectionView вместо TfgListMenu. Мы решили ввести ряд базовых настроек, которые позволяют изменить базовую цветовую схему компонента, для полной совместимости с темами библиотеки.
       Добавлено новое свойство TfgListMenu.Appearance, которое предназначено для настройки цветовой схемы элементов пунктов меню.

      Данная группа настроек не позволяет раскрасить в разные цвета все пункты меню. Это связано с тем, что компонент следует концепции Material Design, где используется общая цветовая схема. Однако теперь, вы можете указать базовые цвета схемы и цвета для разделителя для обычного режима отображения пункта меню и выделенного, чего нельзя было делать ранее.
      Помимо этого, довольно часто, используемые иконки в пунктах меню, необходимо перекрашивать. Это можно было решить на уровне дизайнера ресурсов, просто указав для иконки нужный оттенок. Однако, используемые в меню иконки могут быть использованы в других местах на практике. В такой ситуации приходилось иметь два дубликата одной и той же иконки, но с разными оттенками, что безусловно увеличивает размер приложения и усложняет дальнейшую правку ресурсов. Ситуация осложняется, когда цвет иконки при выделении отличается от цвета иконки без выделения.
      Решение данной проблемы теперь лаконично сделано через новую группу настроек Appearance.Icon, работающей по такому же принципу, как и аналогичное свойство у TfgButton. Здесь вы можете указать цвет иконки без и с выделением. В результате вам достаточно иметь всего лишь одну иконку в ресурсах данного базового размера для всех остальных мест.

      Замер размера текста
      Еще одной из самых часто запрашиваемых возможностей с вашей стороны был функционал по программному замеру размера текста. В 1.9.0.0 появится набор методов у TfgCanvas предназначенных для получения размера текста:
      function MeasureText(const AText: string; const AMaxWidth: Single; const AIsWordWrap: Boolean): TSizeF; И многое другое...
      В релиз 1.9.0.0 включено большое количество правок iOS части в части управления формами, выравниванием и тд. 
    • By Yaroslav Brovin
      На этой неделе всех нас ждет большой релиз библиотеки FGX Native 1.6.0.0, в который войдет много новых вещей и самое главное - Альфа версия iOS! 
      Вкратце обо всех нововведениях по порядку:
      FGX Native for iOS (Alpha)
      Это свершилось! Релиз 1.6.0.0 будет содержать Альфа версию FGX Native for iOS.
      Важно. Поскольку это альфа версия, то не стоит ожидать от нее полноценной работоспособности. Данный релиз содержит частично реализованный функционал: часть компонентов пока не реализованы, часть функционала компонентов может не работать. Однако, при этом, часть компонентов уже полностью готова.
      Теперь все проекты автоматически получают новый таргет iOS Device 64-bit. При открытии старого проекта, происходит автоматическая миграция проекта, в ходе которой:
      Добавляется платформа iOS Device 64-bit для сборки Добавляется конфигурация для деплоя iOS приложения. Добавляются настройки проекта, связанные с iOS (иконки, название пакетов и тд) Добавляются ассеты для iOS.  
      В дизайнере пока нет возможности переключиться на стиль iOS. Это будет добавлено уже ближе к полноценному релизу iOS части. 
      На текущий момент:
      Минимальная поддерживая версия iOS 11.  Не реализованы следующие компоненты : TfgCalendar, TfgAutoCompleteEdit, TfgSearchBox, TfgWebBrowser, TfgVideoControl, TfgCamera, TfgCameraPreview, TfgBarcodeScanner. Не реализована анимация. Не реализованы жесты. и тд Важно. Для сборки проекта необходимо использовать SDK не выше 13.5. С более старшими версиями SDK вы получите ошибку при линковке приложения. Мы уже занимаемся этим вопросом.
      За время разработки iOS версии у нас накопилось большое количество изменений, которые затрагивают не только iOS реализацию, но и некоторые аспекты работы библиотеки в целом.

      В процессе приходят новые идеи по улучшению уже существующего API компонентов.  Чтобы не копить все изменения отдельно от текущей версии библиотеки, мы решили соединить все изменения по iOS с текущим релизом. Так что теперь вы всегда будете в курсе текущего состояния iOS части.
      Мы ценим терпение и поддержку наших клиентов. Поэтому, поскольку релиз FGX Native for iOS немного задерживается, мы приняли решения, что не будем увеличивать цену за продление подписки в момент релиза полноценной iOS для клиентов, которые на момент релиза будут иметь активную подписку.  
      Т.е. если на момент полноценного релиза iOS у вас есть активная подписка, то стоимость продления для вас останется прежней. Для всех остальных стоимость первоначальной подписки и продления будет увеличена.
      Начиная с 1.6.0.0 мы будем включать в каждый релиз список доработок по iOS, чтобы вы всегда были в курсе.
      Обо всех найденных ошибках вы сможете сообщить нам в новой ветке форума https://forum.fgx-native.com/forum/102-ios-alpha-тестирование/. Так же в ней вы можете высказать свои пожелания по приоритету разработки того или иного функционала. Это поможет нам составить список первоочередных задач и сфокусироваться на действительно важных для вас задачах.
      Полностью переработанная кнопка TfgButton
      В дополнение к статье необходимо упомянуть, что у кнопки есть еще один важный стиль, о котором не говорилось ранее - Default. В этом стиле кнопка выглядит так, как это принято на целевой платформе. На Android - это закрашенная кнопка, в iOS - это текст без фона. Используйте этот стиль, если хотите придерживаться системного стиля отображения кнопки.  
        
      Ранее у кнопки вы могли наблюдать внутренние отступы между ее границей и фоном. Это в свою очередь немного усложняло позиционирование кнопки по отношению к другим компонентам. Поэтому в этом релизе мы убрали у Android кнопки все отступы между границей компонента и фоном. Если вы использовали эти отступы при выравнивании компонентов вашей формы, вам следует задать эти отступы напрямую через TfgButton.Margins.
      Небольшие улучшения в дизайнере
      В дизайнер добавлен ряд косметических улучшений, чтобы нашим пользователям было приятнее работать и ничто не отвлекало их от решения задач. Среди улучшений темная тема для дизайнера форм.

      А так же вспомогательная подсказка, отображающая имя выделенного компонента. Подсказка появляется при нажатии на компонент.

      Правила обрезки текста (TfgTextTrimming)
      В первоначальной версии библиотеки мы закладывали несколько способов обрезки текста: по символам, по словам и без обрезания. Однако, в результате реализации iOS и Android оказалось, что обрезка текста по словам не используется и не поддерживается ни на одной из платформ. Поэтому в данном релизе мы решили убрать значение TfgTextTrimming.Word, так как оно не работало и не имеет смысла. Если вы использовали в своих проектах TfgTextTrimming.Word, то вам необходимо переоткрыть формы, проигнорировав ошибку, и сохранить формы заново. 
      Канва TfgCanvas
      Мы добавили два важных метода, которые теперь НЕОБХОДИМО использовать при выполнении любой отрисовки на TfgBitmap - это TfgCanvas.BeginPaint и TfgCanvas.EndPaint. При вызове этих методов происходят определенные действия по переносу данных битмапа между буферами для ускорения работы с изображениями в целом. Если в уже существующем коде вы не расставите эти методы, то на iOS платформе вы не увидите результат отрисовки.
      Небольшой пример по использованию новых методов BeginPaint/EndPaint для отрисовки иконки: 
      Scale := TfgScreenManager.Main.Scale; IconSize := Ceil(DefaultIconSize * Scale); FMoreIcon := TfgBitmap.Create(IconSize, IconSize); FMoreIcon.Scale := Scale; with FMoreIcon.Canvas do begin BeginPaint; try Fill.Kind := TfgBrushKind.Solid; Fill.Color := TAlphaColorRec.Black; FillCircle(TPointF.Create(6, 12), 2); FillCircle(TPointF.Create(12, 12), 2); FillCircle(TPointF.Create(18, 12), 2); finally EndPaint; end; end; Помимо этого, добавлены упрощенные методы для отрисовки скругленных прямоугольников:  TfgCanvas.DrawRoundRect/FillRoundRect.
      Basic Аутентификация в TfgWebBrowser
      Для браузера по запросу добавлена поддержка Basic аутентификация. Чтобы выполнить аутентификация, достаточно задать свой обработчик на новое событие OnBasicAuthentificationRequest, в которое передается специальный AHandler, отвечающий за процесс аутентификации. Процесс аутентификация может выглядеть так:
      procedure TFormMain.fgWebBrowser1BasicAuthentificationRequest(Sender: TObject; const AUrl: string; const AHandler: IFGXBasicAuthentificationHandler); begin TfgDialogs.InputQuery('Input credentional data', ['User name', 'Password'], ['', ''], procedure (const AResult: TModalResult; const AValues: TArray<string>) begin if AResult = mrOk then AHandler.Proceed(AValues[0], AValues[1]) else AHandler.Cancel; end); end; Если аутентификация не прошла, то браузер будет пытаться пройти ее повторно, повторно вызывая OnBasicAuthentificationRequest. 
      Новые параметры экрана TfgScreen
      Для TfgScreen добавлен новый параметр SafeAreaPadding, который позволяет узнать, какие области на экране заняты системными элементами. Если раньше эти отступы можно было получить только в событии формы TfgForm.OnSafeAreaChanged, то теперь их можно получить в любой момент с помощью TfgScreenManager.Main.SafeAreaPadding.
      Tip: Не забывайте, что коэффициент масштабирования экрана всегда можно получить кроссплатформенным способом через TfgScreenManager.Main.Scale.
      Другие улучшения
      В этом релизе также содержится большое количество исправлений ошибок. 
      Всем спасибо за внимание!
    • By Yaroslav Brovin
      В ближайшем релизе 1.5.0.0 мы добавили пару небольших улучшений, которые немного помогут вам проще разрабатывать ваши мобильные приложения.
      1. Отступы для TfgLabel
      В разработке пользовательского интерфейса довольно часто встречается задача визуального выделения текстовых меток/тегов. Обычно для визуального выделения используется фон в виде скругленного прямоугольника.
        
      Раньше такая задача решалась при помощи двух компонентов:
      Контейнер TfgLayout с требуемыми отступами для текста и с фоном BackgroundName в виде 9-path изображения. Метка TfgLabel, куда непосредственно выводится текст. Теперь же у TfgLabel есть специальное свойство ContentPadding, позволяющее добавить внутренние отступы, используемые при отображении текста. В результате метка легко получается на базе одного компонента TfgLabel с фоном BackgroundName  и требуемыми отступами.

      2. Оттенок для кнопки TfgButton
      Теперь для кнопки TfgButton добавлены новые свойства TintColor и TintColorName, позволяющие перекрасить системный цвет кнопки.

      3. Android AlarmManager
      Мы добавили небольшой пример по использованию Java кода из  FGX Native приложения. Новый демонстрационный пример показывает, как сделать на языке Java свой BroadcastReceiver и использовать его в связке с FGX Native приложением. Данный пример пригодится разработчикам, которым необходимо более тесная интеграция с Android API.
      4. Автосайз
      iOS
      Так же мы с нуля реализовали TfgDrawerLayout для iOS.
      drawer-iOS.mp4
    • By Yaroslav Brovin
      Всем доброго дня,
      При разработке кросс-платформенного приложения важной базовой составляющей является определение размеров компонентов. С одной стороны нет ничего проще, чем задать желаемый размер любому компоненту библиотеки FGX Native или задать правило выравнивания компонентов при помощи FlexBox. Однако, кросс-платформенная разработка накладывает определенные трудности в этом подходе. А именно зачастую размер компонентов зависит не только от других компонентов, но и от содержимого. И если с первым отлично справляется FlexBox, то со вторым в FGX Native нужно использовать метод для расчета размеров компонентов TfgControl.MeasureSize, и будем честны, это было временное решение.
      Мы всегда стараемся сделать библиотеку FGX Native удобной для использования, чтобы разработчик мог концентрироваться в коде на бизнес логике своего приложения, а не программной "настройке" UI. Одним из грядущих улучшений будет поддержка автоматического расчета размеров компонентов. Мы внедрили на нижнем уровне поддержку Autosize. Теперь на уровне появится новое свойство TfgControl.Autosize, которое отвечает за то, что именно нужно автоматически посчитать: ширину, высоту или обе величины. Если в ходе выравнивания компонента система понимает, что компонент имеет фиксированный размер, то в этом случае компонент может автоматически его рассчитать. Так например задание Autosize = [Height] для TfgTraсkBar автоматически посчитает нужную высоту компонента, а вот указание Autosize = [Width] для этого компонента ни на что не повлияет. 

      Не смотря на то, что сам механизм внедрен на нижнем уровне, реально это свойство в ближайшем релизе будет доступно только для нескольких компонентов: TfgSwitch, TfgTrackBar, TfgNavigationBar и возможно TfgLabel. Если с TfgSwitch и TfgTrackBar в целом понятно,  то вот на счет TfgNavigationBar  стоит отдельно отметить, что теперь этот компонент умеет в автоматическом режиме расчета высоты учитывать отступы у формы SafeArea и наличие заголовка и подзаголовка. И если раньше необходимо было программно отслеживать изменения отступов области SafeArea в TfgForm.OnSafeAreaChanged и на основании значений отступов вычислять руками высоту панели навигации, то сейчас все это будет происходить автоматически.



      Данное нововведение особенно актуально в свете предстоящего появления iOS. Так как в iOS используются другие шрифты, размеры текста и размеры компонентов. И чтобы сделать действительно универсальное приложение без этой функциональности будет очень сложно.
      Всем хорошей рабочей недели!
    • By Yaroslav Brovin
      Всем доброго дня!
      У нас есть много хороших новостей на конец уходящего лета ?.
      Во-первых. Мы практически полностью разработали новые компоненты под iOS TfgNavigationBar, TfgListMenu, TfgDatePicker, TfgTimePicker, TfgTimeEdit, TfgDateEdit, TfgCheckBox, TfgRadioButton, TfgPageControl, TfgTrackBar, TfgRectangle, TfgLine, TfgSvgPath и тд. Закончили с TfgCollectionView и реализовали полноценную поддержку стилей, "Drag & Drop" и "Pull To Refresh".
      reordering.mp4 pull-to-refresh.mp4
      Во-вторых. Мы реализовали полноценную TfgCanvas для iOS с поддержкой градиентов, разных кистей и отрисовкой на битмапах.
      В-третьих. Мы улучшили поддержку TfgPath. И теперь мы полностью поддерживаем весь стандарт доступных path команд w3c.
      В-четвертых. Реализовали диалоги и пикеры для выбора даты и времени.
      В-пятых. Реализовали TfgForm.OnSafeAreaChanged и добавили возможность получать состояние приложение напрямую у TfgApplication.State.
      В-шестых. Запустили FGX Native Global Demo и большая часть экранов уже открывается и успешно работает.
                    
      Всем хорошего окончания этих выходных!
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...