Підвищуємо ефективність роботи в Xamarin.Forms



Друзі! Чергова стаття на тему розробки мобільних додатків на Xamarin. Ми не припиняємо розглядати особливості використання Xamarin.Forms при розробці бізнес-додатків для iOS і Android. Всі статті з колонки можна знайти і прочитати за посиланням #xamarincolumn
минулій статті ми розглянули, як можна підвищити продуктивність при розробці мобільних додатків з використанням Xamarin, а також відзначили базові механізми підвищення продуктивності бізнес-додатків на базі Xamarin.Forms.

У сьогоднішньому матеріалі ми продовжимо обраний курс і розповімо про використання Fody для скорочення необхідного програмного коду, а також дізнаємося про використання иконочных шрифтів і бібліотеки NControlView для ручної відтворення інтерфейсних елементів.

Що таке бізнес-програми?

Для того, щоб ми з вами перебували на одній сторінці і використовували однакові поняття, давайте для початку визначимося з тим, що бізнес-додатки відрізняються від ігор та інших типів програм.

Мобільні додатки, як і будь-які інші програмні продукти створюються для певних цілей, виходячи з яких вже і можна визначитися з вибором відповідного інструментарію для розробки.

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

  • Складність користувача (UI) — наявність і використання своїх анімацій і спец. ефектів, своя концепція інтерфейсу користувача.
  • Використання можливостей ОС — оптимізація під різне залізо, використання системних механізмів.
  • Частота використання — як часто користувач буде запускати додаток.
На основі даних критеріїв ми умовно (завжди є винятки!) поділяємо всі програми на наступні основні сегменти:

  • ігри (висока складність UI, високе використання функціональності ОС, часте використання),
  • розваги/мультимедіа (середня складність UI, високе використання функціональності ОС, часте використання),
  • бізнес-додатки (середня і низька складність UI, невисоке використання можливостей ОС, середня і низька частота використання),
  • спілкування (середня і низька складність UI, невисоке використання можливостей ОС, висока частота використання).
В минулому нам доводилося брати участь у створенні всіх перерахованих видів додатків, тому знаємо особливості розробки кожного з них. Якщо розглядати гри, то тут ми б рекомендували використовувати Unity3D або аналогічний зрілий фреймворк. Для мультимедіа і спілкування краще вибрати класичні Xamarin.iOS і Xamarin.Android. А ось для бізнес-додатків відмінно підходить Xamarin.Forms, особливо з урахуванням скорочення трудовитрат на розробку і супровід в середньому на 60% щодо створення окремих версій на iOS і Android.

Отже, з тим, що таке бізнес-програми ми визначилися.

Скорочуємо обсяг коду з допомогою Fody

Одна з причин, по якій ми прийшли до Xamarin, а потім і до Xamarin.Forms для розробки бізнес-додатків, це висока продуктивність розробки («той же результат при менших трудовитрат»). Тому сьогодні ми хочемо розповісти про невеликому твике, який дозволяє помітно скоротити обсяг коду при описі ViewModel. В цьому нам допоможе чудовий інструмент Fody корисна стаття на Хабре).

Нагадаємо, що для реалізації патерну 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:

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, які дозволяли піти від великої кількості зображень і гнучко адаптувати верстку під різні дозволи і щільність дисплеїв. З часом даний підхід перекочував і в сферу мобільного розробки.

Зараз існує велика кількість безкоштовних і відкритих иконочных шрифтів, проте найбільш доцільним буде створення своїх иконочных шрифтів, що містять потрібні набори зображень для кожної платформи.

Почнемо ми з створення иконочного шрифту. Для цього нам знадобляться зображення у форматі SVG і безкоштовний сервіс Glyphter, який з коробки дозволяє використовувати велику кількість ікон.



Самі іконки ми рекомендуємо створювати в стилістиці цільової платформи чи використовувати готові набори (наприклад,icons8).

Далі нам необхідно ці шрифти скачати в форматі TTF і помістити в коректні папки:

  • Assets\Fonts для Android
  • Resources\Fonts для iOS (плюс їх треба прописати в Info.plist)
Для того, щоб їх використовувати иконочный шрифт потрібно створити свій простий спадкоємець Label з рендерарами для кожної платформи. Докладніше — у документації Xamarin.
І, нарешті, для тих, кому буде достатньо готових шрифтів (вже є всі рендерер і додані потрібні ресурси), можуть використовувати готову бібліотеку Iconize для Xamarin.Forms (доступні збірки Nuget).

Малюємо за допомогою NControl

Іноді, хоча і не так часто, при розробці додатків виникає необхідність реалізувати ручну обробку будь-якого інтерфейсного елемента. Так, можна замість нього використовувати готові зображень (для всіх дозволів, з збереженням пропорцій та інші дрібні складно) або 9-patch SVG. Проте часто можна обійтися простий ручний відображенням потрібного елемента. Для цих цілей був створений компонент NControl. Якщо коротко, то це механізм віртуалізації відтворення поверх стандартних механізмів 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.

Більше прикладів ми можете на сторінці опису компонента: github.com/chrfalch/NControl

Висновок

Отже, сьогодні ми визначили клас додатків, для яких добре підходить Xamarin.Forms, познайомилися з Fody, иконочными шрифтами і бібліотекою NControl, які дозволяють спростити і прискорити створення бізнес-додатків.

У наступній статті ми більш детально розглянемо роботу з екранами і станами, а також невеликі твіки для додання додатками закінченого виду.

Залишайтеся на зв'язку і додавайте свої коментарі та запитання!

Про авторів


В'ячеслав Черніков — керівник відділу розробки компанії Binwell. В минулому — один з Nokia Champion і Qt Certified Specialist, в даний час — спеціаліст по платформах Xamarin і Azure. У сферу mobile прийшов в 2005 році, з 2008 року займається розробкою мобільних додатків: починав з Symbian, Maemo, Meego, Windows Mobile, потім перейшов на iOS, Android і Windows Phone.

Корисні посилання

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.