- PVSM.RU - https://www.pvsm.ru -
Друзья! Очередная статья на тему разработки мобильных приложений на Xamarin. Мы не прекращаем рассмотривать особенности использования Xamarin.Forms при разработке бизнес-приложений для iOS и Android. Все статьи из колонки можно найти и прочитать по ссылке #xamarincolumn [1]
В прошлой статье [2] мы рассмотрели, как можно повысить продуктивность при разработке мобильных приложений с использованием Xamarin, а также отметили базовые механизмы повышения производительности бизнес-приложений на базе Xamarin.Forms.
В сегодняшнем материале мы продолжим выбранный курс и расскажем об использовании Fody для сокращения необходимого программного кода, а также узнаем об использовании иконочных шрифтов и библиотеки NControlView для ручной отрисовки интерфейсных элементов.
Для того, чтобы мы с вами находились на одной странице и использовали одинаковые понятия, давайте для начала определимся с тем, чем же бизнес-приложения отличаются от игр и других типов программ.
Мобильные приложения, как и любые другие программные продукты, создаются для определенных целей, исходя из которых уже и можно определиться с выбором подходящего инструментария для разработки.
Для простоты, мы разделяем типы мобильных приложений по следующим критериям:
На основе данных критериев мы условно (всегда есть исключения!) разделяем все приложения на следующие основные сегменты:
В прошлом нам доводилось участвовать в создании всех перечисленных видов приложений, поэтому знаем особенности разработки каждого из них. Если рассматривать игры, то здесь мы бы рекомендовали использовать Unity3D или аналогичный зрелый фреймворк. Для мультимедиа и общения лучше выбрать классические Xamarin.iOS и Xamarin.Android. А вот для бизнес-приложений отлично подходит Xamarin.Forms, особенно с учетом сокращения трудозатрат на разработку и сопровождение в среднем на 60% относительно создания отдельных версий на iOS и Android.
Итак, с тем, что такое бизнес-приложения мы определились.
Одна из причин, по которой мы пришли к Xamarin, а затем и к Xamarin.Forms для разработки бизнес-приложений, это высокая продуктивность разработки (“тот же результат при меньших трудозатратах”). Поэтому сегодня мы хотим рассказать о небольшом твике, который позволяет заметно сократить объем кода при описании ViewModel. В этом нам поможет замечательный инструмент Fody [3] (полезная статья на Хабре [4]).
Напомним, что для реализации паттерна MVVM и биндинга свойств, ViewModel должна вызывать событие PropertyChanged, после которого и происходит фактическая передача данных для отображения во View.
Классический подход подразумевает создание private-переменных и ручной вызов PropertyChanged, что ведет к созданию довольно объемных ViewModel:
using System.Runtime.CompilerServices;
using System.ComponentModel;
public class LoginViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _login;
public string Login {
get {
return _login;
}
set {
if (value != _login) {
_login = value;
NotifyPropertyChanged ();
}
}
}
private string _password;
public string Password {
get {
return _password;
}
set {
if (value != _password) {
_password = value;
NotifyPropertyChanged ();
}
}
}
private void NotifyPropertyChanged ([CallerMemberName] string propertyName = "")
{
if (PropertyChanged != null) {
PropertyChanged (this, new PropertyChangedEventArgs (propertyName));
}
}
}
Объемно, не так ли?
А вот, как будет выглядеть та же самая ViewModel при использовании плагина PropertyChanged.Fody [5]:
using PropertyChanged;
[ImplementPropertyChanged]
public class LoginViewModel
{
public string Login { get; set; }
public string Password { get; set; }
}
Заметное сокращение рутины :) Для этого необходимо просто добавить данный плагин через Nuget.
В Xamarin Studio может потребоваться вручную задать у файла FodyWeavers.xml свойства Build Action -> Content, и Quick Properties -> Copy to Output Directory, плюс внести информацию о плагине в файл FodyWeavers.xml:
<?xml version="1.0" encoding="utf-8" ?>
<Weavers>
<PropertyChanged />
</Weavers>
В нашей практике мы также используем следующие плагины Fody (другие пока не прижились):
В современной практике мобильной разработки приходится работать с большим количеством разрешений экранов, поэтому раньше в приложении приходилось иметь большое количество изображений разного размера, чтобы иконки отображались корректно, без артефактов и лишнего использования памяти. Несколько лет назад в мире веб-разработки стали активно использоваться иконочные шрифты Font Awesome [8], которые позволяли уйти от большого количества изображений и гибко адаптировать верстку под различные разрешения и плотность дисплеев. Со временем данный подход перекочевал и в сферу мобильной разработки.
Сейчас существует большое количество бесплатных и открытых иконочных шрифтов, однако наиболее целесообразным будет создание своих иконочных шрифтов, содержащих нужные наборы изображений для каждой платформы.
Начнем мы с создания иконочного шрифта. Для этого нам понадобятся изображения в формате SVG и бесплатный сервис Glyphter [9], который из коробки позволяет использовать большое количество иконок.
Сами иконки мы рекомендуем создавать в стилистике целевой платформы или использовать готовые наборы (например, icons8 [10]).
Далее нам необходимо эти шрифты скачать в формате TTF и поместить в корректные папки:
Для того, чтобы их использовать иконочный шрифт потребуется создать свой простой наследник Label с рендерарами для каждой платформы. Подробнее — в документации Xamarin [11].
И, наконец, для тех, кому будет достаточно готовых шрифтов (уже есть все рендереры и добавлены нужные ресурсы), могут использовать готовую библиотеку Iconize для Xamarin.Forms [12] (доступны сборки в Nuget [13]).
Иногда, хотя и не так часто, при разработке приложений возникает необходимость реализовать ручную отрисовку какого-либо интерфейсного элемента. Да, можно вместо него использовать готовые изображений (для всех разрешений, с сохранением пропорций и прочие мелкие сложно) или использовать 9-patch SVG [14]. Однако часто можно обойтись простой ручной отрисовкой нужного элемента. Для этих целей и был создан компонент NControl [15]. Если коротко, то это механизм виртуализации отрисовки поверх стандартных механизмов iOS, Android и Windows.
Для начала (как и многие другие кастомные контролы и библиотеки) необходимо инициализировать компонент: добавить строку NControlViewRenderer.Init() после Forms.Init() в классах AppDelegate для iOS и MainActivity для Android.
Далее можно напрямую добавить нужный компонент в коде на C#:
var myView = new NControlView {
DrawingFunction = (canvas, rect) => {
canvas.DrawLine(rect.Left, rect.Top, rect.Width, rect.Height, NGraphics.Colors.Red);
canvas.DrawLine(rect.Width, rect.Top, rect.Left, rect.Height, NGraphics.Colors.Yellow);
}
};
Но на наш взгляд лучше создать своего наследника от NControlView и использовать его в Xaml:
public class MyControl: NControlView
{
public override void Draw(NGraphics.ICanvas canvas, NGraphics.Rect rect)
{
canvas.DrawLine(rect.Left, rect.Top, rect.Width, rect.Height, NGraphics.Colors.Red);
canvas.DrawLine(rect.Width, rect.Top, rect.Left, rect.Height, NGraphics.Colors.Yellow);
}
}
Еще NControl можно использовать для создания различных анимаций пользовательского интерфейса — пример реализации открытия диалога в духе Skype [16].
Больше примеров мы можете на странице описания компонента: github.com/chrfalch/NControl [15]
Итак, сегодня мы определили класс приложений, для которых хорошо подходит Xamarin.Forms, познакомились с Fody, иконочными шрифтами и библиотекой NControl, которые позволяют упростить и ускорить создание бизнес-приложений.
В следующей статье мы более детально рассмотрим работу с экранами и состояниями, а также небольшие твики для придания приложениям законченного вида.
Оставайтесь на связи и добавляйте свои комментарии и вопросы!
Вячеслав Черников — руководитель отдела разработки компании Binwell [17]. В прошлом — один из Nokia Champion и Qt Certified Specialist, в настоящее время — специалист по платформам Xamarin и Azure. В сферу mobile пришел в 2005 году, с 2008 года занимается разработкой мобильных приложений: начинал с Symbian, Maemo, Meego, Windows Mobile, потом перешел на iOS, Android и Windows Phone.
Автор: Microsoft
Источник [22]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/c-2/150836
Ссылки в тексте:
[1] #xamarincolumn: https://habrahabr.ru/search/?target_type=posts&q=%5Bxamarincolumn%5D&order_by=date
[2] прошлой статье: https://habrahabr.ru/company/microsoft/blog/303630/
[3] Fody: https://github.com/Fody/Fody
[4] полезная статья на Хабре: https://habrahabr.ru/post/220701/
[5] PropertyChanged.Fody: https://github.com/Fody/PropertyChanged
[6] AsyncErrorHandler: https://github.com/Fody/AsyncErrorHandler
[7] MethodTimer: https://github.com/Fody/MethodTimer
[8] Font Awesome: http://fontawesome.io/
[9] Glyphter: https://glyphter.com/
[10] icons8: https://icons8.com/
[11] Xamarin: https://developer.xamarin.com/guides/xamarin-forms/user-interface/text/fonts/
[12] Iconize для Xamarin.Forms: https://github.com/jsmarcus/Xamarin.Plugins/tree/master/Iconize
[13] Nuget: https://www.nuget.org/profiles/jmarcus
[14] 9-patch SVG: http://blog.twintechs.com/explorations-in-cross-platform-assets-xamarin-forms
[15] NControl: https://github.com/chrfalch/NControl
[16] пример реализации открытия диалога в духе Skype: http://jmillerdev.net/skype-style-animations-with-xamarin-forms/
[17] Binwell: http://www.binwell.com/
[18] по ссылке: https://habrahabr.ru/company/microsoft/blog/281142/
[19] бесплатные предложения для разработчиков: https://www.visualstudio.com/ru-ru/products/free-developer-offers-vs.aspx
[20] Visual Studio Dev Essentials: https://www.visualstudio.com/ru-ru/products/visual-studio-dev-essentials-vs.aspx
[21] Лабораторные работы: https://msdn.microsoft.com/ru-ru/mt627843.aspx
[22] Источник: https://habrahabr.ru/post/304678/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.