Xamarin android drawable что такое

Основы ресурсов Android

Почти все приложения Android будут иметь некоторые ресурсы. как минимум они часто имеют макеты пользовательского интерфейса в виде XML-файлов. При первом создании приложения Xamarin. Android ресурсы по умолчанию устанавливаются с помощью шаблона проекта Xamarin. Android:

В папке resources были созданы пять файлов, составляющих ресурсы по умолчанию:

Icon.png — значок по умолчанию для приложения

Main. axml — файл макета пользовательского интерфейса по умолчанию для приложения. Обратите внимание, что в Android используется расширение файла .xml , Xamarin. Android использует расширение файла axml .

Strings.xml — таблица строк для упрощения локализации приложения.

AboutResources.txt — это необязательно и может быть безопасно удалено. Он просто предоставляет общий обзор папки Resources и ее файлов.

Resource. Designer. CS — этот файл автоматически создается и обслуживается с помощью Xamarin. Android и содержит уникальный идентификатор, назначенный каждому ресурсу. Это очень похоже и идентично назначению файлу R. Java, который будет иметь приложение Android, написанное на Java. Оно автоматически создается средствами Xamarin. Android и будет повторно создано с течением времени.

Создание ресурсов и доступ к ним

Создание ресурсов — это просто добавление файлов в каталог для рассматриваемого типа ресурса. На снимке экрана ниже показаны строковые ресурсы для немецких языков, добавленных в проект. При добавлении Strings.xml в файл действие сборки автоматически задается AndroidResource инструментами Xamarin. Android:

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

Кроме того, важно отметить, что хотя Android поддерживает только имена файлов нижнего регистра для элементов ресурсов, Xamarin. Android немного более терпим отношению; Он будет поддерживать имена файлов в верхнем и нижнем регистре. Для имен образов используется строчная буква с символами подчеркивания в качестве разделителей (например, my_image_name.png). Обратите внимание, что имена ресурсов не могут быть обработаны, если в качестве разделителей используются дефисы или пробелы.

После добавления ресурсов в проект существует два способа их использования в приложении — программно (внутри кода) или из XML-файлов.

Программное создание ссылок на ресурсы

Для программного доступа к этим файлам им назначается уникальный идентификатор ресурса. Этот идентификатор ресурса представляет собой целое число, определенное в специальном классе с именем Resource , который находится в файле Resource , и выглядит примерно так:

Каждый идентификатор ресурса содержится внутри вложенного класса, соответствующего типу ресурса. Например, когда файл Icon.png был добавлен в проект, Xamarin. Android обновил класс, создавая вложенный класс Drawable с константой внутри именованного Icon . Это позволяет ссылаться на файл Icon.png в коде как . Resource Класс не следует изменять вручную, так как любые изменения, внесенные в него, будут перезаписаны Xamarin. Android.

При ссылке на ресурсы программным способом (в коде) доступ к ним можно получить с помощью иерархии классов Resources, которая использует следующий синтаксис:

PackageName — пакет, предоставляющий ресурс и необходимый только при использовании ресурсов из других пакетов.

ResourceType — это тип вложенного ресурса, который находится в классе ресурсов, описанном выше.

Имя ресурса — это имя файла ресурса (без расширения) или значение атрибута Android: Name для ресурсов, которые находятся в элементе XML.

Ссылки на ресурсы из XML

Доступ к ресурсам в XML-файле осуществляется с помощью специального синтаксиса:

PackageName — пакет, предоставляющий ресурс и необходимый только при использовании ресурсов из других пакетов.

ResourceType — это тип вложенного ресурса, который находится в пределах класса ресурсов.

Имя ресурса — это имя файла ресурса (без расширения типа файла) или значение атрибута для ресурсов, которые находятся в элементе XML.

Например, содержимое файла макета Main. axmlимеет следующий вид:

Источник

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

При разработке мобильного приложения есть масса моментов, на которые необходимо обращать внимание. Это и выбор технологии, на которой оно будет написано, и разработка архитектуры приложения, и, собственно, написание кода. Рано или поздно наступает момент, когда костяк приложения есть, вся логика прописана и приложение , в общем-то, работает, но… нет внешнего вида. Тут стоит задуматься о графических ресурсах, которые будут использованы, поскольку графика составляет львиную долю размера итоговой сборки, будь то .apk на Android или .ipa на iOS. Сборки огромных размеров в принципе ожидаемы для мобильных игр, уже сейчас из PlayMarket порой приходится загружать объемы данных вплоть до 2 Гб и хорошо, если во время загрузки есть возможность подключиться к Wi-Fi или мобильный оператор предоставляет скоростное безлимитное подключение. Но для игр это ожидаемо, а бизнес-приложение, обладающее таким размером, невольно вызывает вопрос “Откуда столько?”. Одной из причин большого размера сборки бизнес-приложения может стать значительное количество иконок и картинок, которые в нем приходится отображать. А также не следует забывать о том, что большое количество графики пропорционально влияет на быстродействие приложения.

При создании графической составляющей приложения часто возникает серьезная проблема. Мобильных устройств существует великое множество начиная с часов и заканчивая планшетами, и разрешения их экранов очень разнятся. Из-за этого зачастую приходится включать в сборку графические ресурсы отдельными файлами для каждого из существующих типов. По 5 копий для Android и по 3 для iOS. Это существенно влияет на размер итоговой сборки, которую Вы будете выкладывать в сторы.

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

Сравнение форматов PNG и SVG

Основное различие между форматами PNG и SVG заключается в том, что PNG — формат растровой графики, а SVG — векторной.

Растровое изображение представляет собой сетку пикселей на мониторе и используется повсеместно, будь то небольшие иконки или огромные баннеры. Среди преимуществ этого типа графики также следует отметить следующее:

1. Растровая графика позволяет создавать рисунки практически любой сложности, без ощутимых потерь в размере файла;
2. Если не требуется масштабирование изображения, то скорость обработки сложных изображений весьма высока;
3. Растровое представление изображений естественно для большинства устройств ввода-вывода.

Однако, есть и минусы.

Например, растровое изображение невозможно идеально масштабировать. При увеличении небольшой картинки изображение «мылится» и видно пиксели из которых оно состоит.

Формат SVG, в свою очередь, является не совсем изображением. Согласно статье на википедии SVG является языком разметки масштабируемой векторной графики, что позволяет читать и при необходимости редактировать файл.

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

Помимо перечисленного, формат SVG имеет еще ряд преимуществ:

1. Будучи векторным форматом, SVG позволяет масштабировать любую часть изображения без потерь в качестве;
2. В SVG-документ можно вставлять растровую графику;
3. Легко интегрируется с HTML- и XHTML-документами.

Однако, есть и недостатки данного формата:

1. Чем больше в изображении мелких деталей, тем быстрее растет размер SVG-данных. В ряде случаев, SVG не только не дает преимуществ, но и проигрывает растру;
2. Сложность использования в картографических приложениях, поскольку для корректного отображения малой части изображения, требуется прочитать документ целиком.

В случае с разработкой мобильных приложений на платформе Xamarin есть еще один недостаток.

Для корректной работы с этим форматом необходимо подключать дополнительные библиотеки, либо искать обходные пути.

Работа с форматом SVG в Xamarin.Android

Как уже было сказано выше, Xamarin “из коробки” не поддерживает работу с форматом SVG. Чтобы решить эту проблему – можно использовать сторонние библиотеки или VectorDrawable. В последнее время разработчики все чаще отдают предпочтение последним, так как большая часть библиотек для Xamarin ориентирована на кроссплатформенное использование в Xamarin.Forms, а решения для нативного андроида либо больше не поддерживаются их разработчиками и устарели, либо возникают серьезные проблемы при попытке создать на их основе библиотеку для Xamarin. В связи с этим здесь рассмотрим использование VectorDrawable.

Для реализации данного подхода потребуется использовать Vector Asset Studio. Найти ее достаточно просто для этого всего лишь нужна Android Studio. Итак, начнем:

1. Создаем новый проект в Android Studio с помощью File -> New -> New Project;
   Поскольку все, для чего нам понадобится этот проект — это использование Vector Asset Studio, то его можно создать пустым.
2. Правый клик на папке drawable -> New -> Vector Asset;

Достаточно емкая подготовительная работа, требующая наличия установленной Android Studio. К сожалению, на момент написания статьи нам не удалось найти корректно работающих онлайн-конвертеров. Некоторые при попытке конвертации представленного файла SVG выдавали ошибку, некоторые указывали, что лучше воспользоваться Vector Asset Studio.

Как бы то ни было, мы получили требуемый файл и теперь можем использовать его в своем проекте. Не будем описывать процесс создания проекта Xamarin.Android, перейдем сразу к сути.
Первым делом мы поместили полученный файл в папку drawable проекта, затем в качестве демонстрации работы с этим файлом, создали 3 ImageView на экране.

В первом ImageView мы попытались присвоить оригинальный файл SVG в свойстве android:src, во втором — конвертированный XML-файл в том же свойстве, а в третьем — в свойстве app:srcCompat (обратите внимание, что это пространство имен необходимо прописать как указано в коде).
Результаты были заметны уже в дизайнере, до запуска приложения — единственно верный способ корректно отобразить наш файл, приведен в третьем ImageView.

Теперь необходимо убедиться, что изображение отображается корректно на разных устройствах. Для сравнения мы выбрали Huawei Honor 20 Pro и Nexus 5. А также, вместо некорректных способов отображения указали нужный и изменили размеры ImageView на 150х150 dp, 200×200 dp и 300х300 dp.

Huawei Honor 20 Pro

Nexus 5

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

Полученный файл используется из кода так же, как и обычно
image.SetImageResource(Resource.Drawable. );

Работа с форматом SVG в Xamarin.iOS

В случае с Xamarin.iOS дело обстоит так же, как и с Xamarin.Android, в том смысле, что “из коробки” работа с SVG-файлами не поддерживается. Однако, для ее реализации не требуется особых усилий. В случае нативной iOS-разработки для использования SVG требуется подключить SVGKit. Он позволяет обрабатывать такие файлы, не прибегая к сторонним решениям. В случае с Xamarin.iOS мы можем использовать библиотеку SVGKit.Binding. Это С# обертка над оригинальной SVGKit.

Все, что нам потребуется это подключить NuGet-пакет в наш проект. На момент написания статьи последняя версия — 1.0.4.

Здесь реализован класс SVGKImage (собственно SVG-изображение) и SVGKFastImageView (контрол для отображения таких изображений).

Для создания SVGKImage в библиотеке реализовано два варианта в зависимости от BuildAction файла — BundleResource (в коде обозначен image_bundle_resource) и Content (в коде обозначен image_content).
К сожалению, в библиотеке есть ряд недостатков:

1. У SVGKFastImageView не поддерживается инициализация без предоставления SVGKImage — выдается ошибка, указывающая на необходимость использования приведенного в коде конструктора;
2. Нет возможности использования SVG-файлов в других контролах. Однако, если в этом нет необходимости, то использовать ее можно.

В случае если для приложения критично использование SVG-файлов не только в ImageView, можно воспользоваться другими библиотеками. Например, FFImageLoading. Это мощная библиотека, позволяющая не только выгружать SVG-изображения в родной для Xamarin.iOS UIImage, но и делать это напрямую в нужный контрол, экономя время на разработку. Также имеется функционал для загрузки изображений из интернета, но рассматривать его в этой статье мы не будем.

Для использования библиотеки понадобится подключить в проект два NuGet-пакета — Xamarin.FFImageLoading и Xamarin.FFImageLoading.SVG.

В тестовом приложении мы использовали метод, загружающий SVG-изображение в UIImageView напрямую и выгружающий изображение в родной UIImage.

Также в этой библиотеке имеется метод, позволяющий перегнать строковое представление SVG в UIImage, но он имеет смысл исключительно для небольших файлов.

В библиотеке также имеется еще ряд функционала, однако рассматривать его здесь мы не будем. Единственное, о чем действительно стоит упомянуть, данная библиотека может быть использована и в Xamarin.Android проектах. Для использования в проектах Xamarin.Forms есть аналоги этой библиотеки, о работе с которыми мы расскажем далее.

Работа с форматом SVG в Xamarin.Forms

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

Это уже описанные библиотеки Xamarin.FFImageLoading и Xamarin.FFImageLoading.SVG, точнее их вариант для Xamarin.Forms (Xamarin.FFImageLoading.Forms и Xamarin.FFImageLoading.SVG.Forms). Как при работе с большинством библиотек в Xamarin.Forms перед тем, как ее использовать, необходима небольшая стартовая настройка проекта:

1. Во все проекты (PCL и проекты платформ) необходимо добавить два NuGet-пакета — Xamarin.FFImageLoading.Forms и Xamarin.FFImageLoading.SVG.Forms;
2. Прописать в AppDelegate.cs iOS-проекта:
3. Прописать в MainActivity.cs Android-проекта:

После этого библиотекой можно пользоваться.
В библиотеке реализованы обращения к SVG-ресурсам, находящимся как в платформенных проектах, так и EmbeddedResouce PCL проекта. Для отображения SVG-картинок используется SvgCachedImage. В отличие от оригинального контрола Image, использующегося в Xamarin.Forms и принимающего в себя ImageSource, SvgCachedImage работает с SvgImageSource.

Перед использованием пространства имен svg, показанного далее, необходимо его объявить:

Предоставить его можно несколькими способами:

1. Указать в XAML-файле имя SVG-файла, находящегося в ресурсах проектов платформ:
2. Указать в XAML-файле полный путь к файлу SVG, являющегося встроенным ресурсом PCL-проекта:

При загрузке из встроенных ресурсов можно указать имя другой сборки:

При работе из кода сначала даем контролы имя:

Затем, в зависимости от того какой ресурс используется, выбираем один из вариантов:

для использования встроенных ресурсов

для использования платформенных ресурсов

С помощью Binding есть 2 варианта:

хранить в переменной модели, на которую осуществлена привязка самого SvgImageSource. В этом случае со стороны кода ничего не изменяется, а в XAML-файле остается стандартная привязка:

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

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

В переменную модели можно передавать строку с именем файла для ресурса платформы:

или путь к данным встроенного ресурса:

Однако, при предоставлении пути к файлу встроенного ресурса в качестве строки конвертер не срабатывает и изображение не загружается. Разумеется, можно создать свой конвертер, наследовать его от предоставленного библиотекой и обработать этот случай.

Недостатки и исключения

Недостатки использования SVG-ресурсов в проектах, прямо вытекают из недостатков самого формата. К примеру, если графическая составляющая вашего приложения очень сложна и в ней должны использоваться изображения с множеством мелких деталей, градиентом, большим количеством цветовых переходов, и таких изображений не одно и не два, то использовать их, как SVG-ресурсы может быть невыгодно. Кроме того, PNG-файлы готовы к отображению быстрее, чем SVG, поэтому для использования на экране загрузки приложения подходят больше.

Еще у SVG-ресурсов есть незначительный минус. Их нельзя предоставить в качестве иконки приложения, так как в соответствии с гайд-лайнами Google и Apple в качестве иконки могут использоваться только PNG и JPEG файлы.

Источник