FGX Native использует отличную от VCL/FMX концепцию организации работы с ресурсами приложения.
Все ресурсы приложения хранятся централизованно и отдельно от исполняемых файлов приложения. Это позволяет добиться отложенной загрузки ресурсов, сократить время запуска приложения и сэкономить ресурсы мобильного устройства.

FGX Native поддерживает 4 типа ресурсов:

1. Цвет;
2. Набор изображений;
3. Пользовательский файл Шрифта;
4. Пользовательский файл (база данных, текстовый файл и т.д.);

В будущем количество типов ресурсов будет расширено.

Дизайнер ресурсов

Работа со всеми ресурсами осуществляется централизованно, через дизайнер ресурсов. Он открывается через главное меню IDE "Project -> FGX Assets Manager".

Ресурс

Ресурс TfgAsset - это именованная абстрактная сущность, которую можно сохранить, найти и использовать где вам угодно через менеджер ресурсов TfgAssetManager. Каждый ресурс содержит ряд настроек, отвечающих за его "принадлежность" целевому устройству (Platform - платформа Android/iOS, DeviceClass - класс устройства). FGX Native позволяет использовать разное содержимое в зависимости от целевого устройства.

Например, одна и та же иконка меню на iOS и Android выглядит немного по-разному. На iOS используются более тонкие линии в начертании, в отличии от Android. В этом случае вы можете указать разные варианты иконок для iOS и Android в рамках одного ресурса.

Цвет

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

Набор изображений

Это самый распространенный ресурс. Он позволяет хранить набор картинок, предназначенный для разных типов устройств и плотности экранов. Разные типы экранов могут иметь разную плотность точек на дюйм. Это в конечном итоге сводится к тому, нужно ли масштабировать изображение при выводе или нет. Например, устройства Apple поддерживают 1х, 2х и 3х масштабирование экранов. Это означает, что картинка, которая выводится на экране 1х размером 16х16, на экране с масштабированием 3x будет уже иметь размер 48х48. Чтобы при масштабировании картинка не теряла свое качество, в мобильных приложениях поставляют несколько версий одной и той же картинки в разных масштабах.

9-patch

Ассет изображения поддерживает упрощенные "9-patch" картинки. Этот прием используется для получения растягиваемого изображения любого размера из исходной растровой картинки. Исходное изображение нарезается на части. При отображении картинки, каждая часть выводится с определенными правилами масштабирования:

• Углы - выводятся как есть. 
• Левая и правая части - имеют фиксированную ширину и растягиваются по высоте.
• Верхняя и нижняя части - имеют фиксированную высоту и растягиваются по ширине.
• Центральная часть - растягивается во всех направлениях.

В результате справа вы можете видеть, как исходное изображение размером 48х46 отображается без искажений в разных размерах. Настройки "Left; Top; Right; Bottom" позволяют задать отступы от каждой стороны изображения, чтобы поделить ее на 9 частей.

Такой прием можно использовать и для генерации тени любого размера.

Импорт изображений

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

Для этого нужно:

1. Выбрать иконку на сайте.
2. В левой панели выбрать Android и белый цвет
3. Нажать кнопку "PNG и скачать архив с иконками.
4. Распаковать архив (в будущем это будет автоматизировано)
5. Перетащить папку в дерево ресурсов. Дизайнер автоматически распознает архив, извлечет все доступные размеры и предложит вам выбрать базовый размер (для 1х)
6. Выберите нужный размер и нажмите "Import". Дизайнер автоматически создаст новый ресурс и загрузит изображения соответствующих размеров.

Подкраска

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

Асинхронная загрузка изображений в runtime

Очень часто мобильное приложение выводит изображения, размещенные в сети Интернет. Будь то новостная лента, список товаров или облачная галерея изображений. Физически эти изображения находятся в сети. А значит вам необходимо писать код по закачке этих изображений из Интернета, локальному хранению и отображению. Мы решили снять с ваших плеч этот груз и реализовать это прямо в библиотеке.
Если вам необходимо загрузить изображение из интернета и отобразить его в TfgImage, достаточно написать всего две строчки кода:

  TfgAssetsManager.Current.AddBitmapFromUrlAsync('MyBitmap', 'https://1avatars.mds.yandex.net/get-pdb/69339/0ee6bec9-4740-4b31-9374-411abd7c1724/s1200');
  fgImage1.ImageName := 'MyBitmap';

Первая строчка кода создает новый ресурс сет-картинок с именем "MyBitmap" и загружает в него картинку по URL. Вторая строчка указывает, что нужно отобразить эту картинку в fgImage1.

Код полностью асинхронный, поэтому, как только изображение будет загружено, библиотека автоматически отобразит его в fgImage1.

Если вы хотите контролировать процесс загрузки изображения, то рассмотрите передачу лямбда функции вторым параметром в AddBitmapFromUrlAsync и сохраните IAsyncResult для возможности отмены загрузки.

Шрифт

Данный тип ресурса предназначен для использования своих файлов шрифтов в вашем приложении. Для этого нужно создать новый ресурс шрифта в дизайнере и загрузить в него "ttf" или "otf" файл шрифта. Затем укажите имя ресурса в качестве названия шрифта в TfgFont.FamilyName.

Пример, демонстрирующий использование шрифта "Awesome" для отображения векторных иконок можно найти в комплекте с библиотекой.

Пользовательский файл

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

Файл распаковывается на устройство пользователя согласно правилу "Extraction Rule" в указанной локации, при первом обращении к нему. Таким образом, пока вы не запросили файл, он остается не тронутым и не влияет на скорость запуска приложения.

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

1. TfgFileLocation.DocumentsPath - Внутренняя защищенная область (не доступная другим приложениям) для хранения файлов приложения TPath.GetDocumentsPath.
2. TfgFileLocation.PublicPath - Публичная область для хранения общих файлов (доступна другим приложениям) TPath.GetPublicPath.

И три вида правил распаковки:

1. TfgExtractionRule.Overwrite - Независимо от того, был ли файл распакован ранее, файл будет распаковываться при каждом запуске приложения.
2. TfgExtractionRule.SkipIfFileExists - Если файл уже был распакован, то повторная распаковка не происходит.
3. TfgExtractionRule.RaiseIfFileExists - Если файл уже был распакован, то библиотека поднимет исключение.

Получение доступа к файлу

Чтобы получить имя файла на устройстве, вам нужно:

1. Найти ресурс по имени, заданном в дизайнере ресурсов.
2. У найденного ресурса запросить имя файла Asset.FileName.

var
  Asset: TfgAssetFile;
  Message: string;
begin
  if TfgAssetsManager.Current.Find(R.Files.FILES_HELLOWORLD_TXT, Asset) then
  begin
    Message := TFile.ReadAllText(Asset.FileName);
    TfgDialogs.ShowMessage(Message);
  end;

Использование ресурса

Использование ресурса приложения сводится к указанию его полного имени (Можно получить в дизайнере через контекстное меню "Copy full name") в соответствующих свойствах компонента. Когда вы закрываете дизайнер ресурсов среда автоматически генерирует файл Assets.Consts с константами названий ресурсов, которые можно использовать для задания ресурса во время работы приложения.

type

  /// <summary>Константы с идентификаторами ресурсов приложения.</summary>
  TfgAssetsConstants = record
  private type

    TfgThemeColors = record
    const
      BACKGROUND = 'Theme\Background';
      ERROR = 'Theme\Error';
      ON_ERROR = 'Theme\On Error';
      ON_PRIMARY_DISABLED_TEXT = 'Theme\On Primary\Disabled Text';
      ON_PRIMARY_DIVIDERS = 'Theme\On Primary\Dividers';
      ON_PRIMARY_HINT_TEXT = 'Theme\On Primary\Hint Text';
      ON_PRIMARY_ICON = 'Theme\On Primary\Icon';
      ON_PRIMARY_SECONDARY_TEXT = 'Theme\On Primary\Secondary Text';
      ON_PRIMARY_TEXT = 'Theme\On Primary\Text';
      ON_SECONDARY_DISABLED_TEXT = 'Theme\On Secondary\Disabled Text';
      ON_SECONDARY_DIVIDERS = 'Theme\On Secondary\Dividers';
      ON_SECONDARY_HINT_TEXT = 'Theme\On Secondary\Hint Text';
      ON_SECONDARY_ICON = 'Theme\On Secondary\Icon';
      ON_SECONDARY_SECONDARY_TEXT = 'Theme\On Secondary\Secondary Text';
      ON_SECONDARY_TEXT = 'Theme\On Secondary\Text';
      PRIMARY_COLOR = 'Theme\Primary\Color';
      PRIMARY_DARK_PRIMARY = 'Theme\Primary\Dark Primary';
      PRIMARY_LIGHT_PRIMARY = 'Theme\Primary\Light Primary';
      SECONDARY_COLOR = 'Theme\Secondary\Color';
      SECONDARY_DARK_COLOR = 'Theme\Secondary\Dark Color';
      SECONDARY_LIGHT_COLOR = 'Theme\Secondary\Light Color';
      SURFACE = 'Theme\Surface';
      TEXT_DISABLED_TEXT = 'Theme\Text\Disabled Text';
      TEXT_DIVIDERS = 'Theme\Text\Dividers';
      TEXT_HINT_TEXT = 'Theme\Text\Hint Text';
      TEXT_ICON = 'Theme\Text\Icon';
      TEXT_SECONDARY_TEXT = 'Theme\Text\Secondary Text';
      TEXT_TEXT = 'Theme\Text\Text';
    end;

    TfgTheme = record
      /// <summary>Идентификаторы ресурсов с цветами темы.</summary>
      class var Color: TfgThemeColors;
    end;
  public
    /// <summary>Идентификаторы ресурсов темы.</summary>
    class var Theme: TfgTheme;
  end;

var
  R: TfgAssetsConstants;