XFGloss: Визуальная стилизация для Xamarin.Forms

04 Ноябрь

XFGloss: Визуальная стилизация для Xamarin.Forms

Перевод Android, Forms, iOS Leave a Comment

После того как весной этого года я прошёл в университете Xamarin переаттестацию в области кроссплатформенной разработки, я решил, в свою очередь, помочь сообществу, создав свой первый проект с открытым исходным кодом и пакет NuGet.

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

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

Был полезным для максимально большого количества проектов основных на Xamarin
Располагал потенциалом для дальнейшего развития с перспективой приобретать всё возрастающие число расширений в будущем
Являлся таким проектом, доступ к которому можно было бы открыть для всех без каких-либо ограничений

В поисках вдохновения

Пока я занимался поиском подходящих идеи для своего проекта, моё внимание привлёк ряд вопросов, размещенных на Stack Overflow и форумах Xamarin, которые касались того, как применять основные стили к таким компонентам Xamarin.Forms, как цвет фона для таблицы/списка view-ячеек или градиентные заливки для контентных страниц. Xamarin.Forms не обеспечивает эти свойства по умолчанию, поэтому типичный ответ на подобные запросы был примерно следующим: «Вам придется написать собственный пользовательский XF-компонент и визуализатор или эффект, если вы хотите реализовать что-то подобное».

Кроме того, я просматривал сессии видеоконференций и читал посты в блогах, дабы узнать о том, как другие разработчики развивают Xamarin. В частности, одна из статей под названием «Освещение особенностей нативных платформ в Xamarin Forms» подбросила мне идею для моего проекта и снабдила отправной точкой для начала работы по нему, что, собственно, мне и требовалось. В этом посте объяснялась концепция механизма прикрепляемых свойств в классе BindableObject. Там же были проведены примеры стандартных Xamarin.Forms классов Cell, расширенных с помощью прикрепляемых свойств.

Прикрепляемые свойства

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

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
    <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
    <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
    <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

Вы видите параметры Grid.Row и Grid.Column в Label-тегах в нижней части Xaml-деклараций? Вы не найдете ни одного упоминания о них, если обратитесь к Xamarin.Forms документации API-интерфейсов класса Label. Эти параметры в действительности являются наиболее распространенными примерами прикрепляемых свойств в действии у фреймворка Xamarin.Forms.

Прикрепляемые свойства, как представляется, являются частью класса, к которому они применяются, особенно если Вы объявляете их в Xaml-декларации. Тем не менее они могут быть полностью реализованы за пределами целевого класса, к которому они приписаны. Никаких изменений кода целевого класса при этом не требуется. Этот метод даёт возможность добавлять новые свойства к управляющим классам Xamarin.Forms без каких-либо изменений исходного кода XF.

Введение в XFGloss

Я чётко понимал, что многие из этих недостающих свойств, включения которых часто запрашивают, могут быть добавлены с помощью прикрепляемых свойств. Поэтому я решил взять дело в свои руки, и добавил несколько свойств нового стиля к стандартным классам. В результате получился XFGloss — приятное и неожиданное расширение стиля пользовательского интерфейса для Ваших Xamarin.Forms-проектов.

XFGloss в действии

Добавить расширение XFGloss к стоковым элементам контроля XF очень легко, и убедительно тому доказательство — продемонстрированные ранее Grid-свойства. Вы по-прежнему будете создавать пользовательский интерфейс в Вашем PCL или проекте с открытым исходным кодом, попутно применяя новые XFGloss-свойства по мере необходимости. Интеграция исключительно для конкретной платформы требуют вызовов Init-методов XFGloss, ровно так же, как это делайте с Init-методами Xamarin.Forms.

Вот пример того, когда XFGloss используется для задания цвета фона Cell в декларации Xaml:

<TextCell Text="Red" TextColor="White" xfg:CellGloss.BackgroundColor="Red"

1	<TextCell Text="Red" TextColor="White" xfg:CellGloss.BackgroundColor="Red"

Для установки такого же XFGloss-свойства в коде C# требуется лишь немного больше усилий:

var cell = new TextCell
{
    Text = "Red",
    TextColor = "White"
};
CellGloss.SetBackgroundColor(cell, Color.Red);

var cell = new TextCell

{

Text = "Red",

TextColor = "White"

};

CellGloss.SetBackgroundColor(cell, Color.Red);

Если вам необходимо установить в коде несколько свойств XFGloss на одном экземпляре управления XF, то будет легче (и более схоже с синтаксисом Xaml) создать экземпляр gloss и присвоить значения его свойствам, вот так:

var switchCtrl = new Switch();
var gloss = new SwitchGloss(switchCtrl);
gloss.TintColor = Color.Red;
gloss.ThumbTintColor = Color.Maroon;
gloss.OnTintColor = Color.Green;
gloss.ThumbOnTintColor = Color.Lime;

var switchCtrl = new Switch();

var gloss = new SwitchGloss(switchCtrl);

gloss.TintColor = Color.Red;

gloss.ThumbTintColor = Color.Maroon;

gloss.OnTintColor = Color.Green;

gloss.ThumbOnTintColor = Color.Lime;

Экземпляр gloss вызывает за сценой статические методы getters и setters, которые управляют переключением, так что всё будет в порядке, если он окажется вне диапазона и освободится из памяти, как только вы закончите присваивать свойствам все необходимые значения.

Настоящее отображение на Ваших Android и iOS устройствах

Все новые свойства XFGloss поддерживаются на платформах Android и iOS, за исключением свойства AccessoryType, в котором действует специфический для iOS элемент пользовательского интерфейса. Те свойства, которые добавят поддержку любых других из поддерживаемых XF платформ, приветствуются и будут оценены по достоинству!

На платформе Android свойства XFGloss были протестированы на Android API начиная с версии 16 (Jellybean) и заканчивая 23 (Marshmallow). API-интерфейсы до 23 версии требуют Android-библиотеки AppCompat, которая уже реализовывается для Вас, когда Вы создаёте новый проект в Xamarin.Forms. На этих старых API, в том случае, если библиотека AppCompat не используется, данные новые расширения будут падать.

В представленной ниже галереи размещены скриншоты новых свойств в действии. Кроме того, Вы можете просмотреть примеры кода, инструкции по интеграции пакета NuGet с Вашим собственным проектом, полный пример приложения, а также многое другое в разделе проекта на GitHub repo.

Я надеюсь, мой первый проект с открытым исходным кодом окажется полезным в Вашей работе!

Автор: Tommy Baggett
Источник: Статья в блоге автора