Strong-stuff.ru

Образование Онлайн
22 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Xamarin forms уроки

Xamarin forms уроки

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

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

Приступаем: Необходимые условия

Что нужно установить?

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

Ознакомьтесь с этой сессией в Xamarin University под названием Приступаем к работе с Xamarin [XAM101].

Упрощенная разработка под iOS

Мы усердно работали над упрощением разработки под iOS, и в итоге предоставили Xamarin Live Player (в настоящее время доступен в Preview 2). Xamarin Live позволяет создавать код в Visual Studio 2017 и немедленно видеть результат этого в виде приложения на физическом устройстве с помощью соответствующего приложения Xamarin Live Player.

Когда Вы будете готовы компилировать и развертывать приложения для iOS или если Вы «перерастете» возможности Xamarin Live Player, тогда можно подключиться к Mac и использовать удаленный симулятор iOS для Windows.

Распространенные вопросы новичков

Как перейти от одного экрана к другому?

Экраны Xamarin.Forms называются Pages и используют базовый класс ContentPage. Xamarin.Forms следуют концепции стека, а Вы выталкиваете данные из этого стека. Для этого необходимо создать стек навигации. Самый простой способ вывести его — запустить приложение с NavigationPage.

Теперь в пределах ContentPage можно просто использовать службу Navigation для перемещения новой страницы в стек навигации:

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

Как размещать контент?

Xamarin.Forms поддерживают несколько шаблонов макета, включая Grid, StackLayout, AbsoluteLayout и RelativeLayout. Я рекомендую вам научиться использовать Grid, поскольку эта «сетка» в настоящее время является наиболее гибкой и эффективной.

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

Ознакомьтесь с нашим курсом Xamarin University для самостоятельного изучения, который посвящен Макету в Xamarin.Forms[XAM135].

Тревога! Некоторые авантюрные члены сообщества недавно пересмотрели свое убеждение, которого длительное время придерживались, в отношении того, что в Xamarin.Forms не получается создавать тщательно отполированные макеты:

Inspired by @adpedley and @devnl latests articles about beautiful UI in #Xamarin Forms, soon will write about recreate the Netflix UI. pic.twitter.com/6Sac0mKXqK

— Javier Suárez Ruiz (@jsuarezruiz) 11 сентября 2017 г.

Just blogged: Kickass UI in Xamarin Forms: Twitter — https://t.co/gpYdUy6DKc with thanks to @adpedley @xamarinhq #Xamarin

This is basically my stop saying you can’t have a polished app via Xamarin.Forms, post https://t.co/ZpyMe5Va5T

Как мне увидеть мой дизайн?

У вас есть несколько вариантов. Тогда как Xamarin Live Player становится все лучше и лучше, он уже сейчас является замечательным помощником в части редактирования XAML-кода в текстовом редакторе и просмотра мгновенной визуализации. Небольшой совет: используйте такое приложение, как, например, Reflector для зеркального отражения устройства на компьютере разработчика.

Наша дизайнерская группа также вносит усовершенствования в Xamarin.Forms Previewer.

Где найти тот или иной элемент управления?

Xamarin.Forms обеспечивают реализацию многих нативных элементов управления пользовательского интерфейса на каждой целевой платформе. Эта концепция абстракции становится более ясной при рассмотрении сопоставления средств визуализации Xamarin.Forms с нативными элементами управления.

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

Переходим к более сложным вопросам

Как по-своему настроить элемент управления?

По умолчанию Xamarin.Forms предоставляют основные возможности настройки элементов управления, а если Вы упретесь в тупик, тогда у Вас будет пространство для маневра. Возможные варианты:

Особенности платформы

Если требуется настроить элемент управления только для определенной платформы, можно реализовать Platform Specific. Хорошим примером является настройка размера шрифта Entry в соответствии с шириной элемента управления.

Эффекты

Эффекты хороши в том случае, когда необходимо добавить настройку элементу управления на каждой платформе, что может быть полезно в случае с различными элементами управления, а также при необходимости изменить одно свойство, которое в данный момент не предоставляется в абстракции элемента управления. Некоторые распространенные примеры этого — добавление теней или определенные вещи из Xamarin.Forms Community Toolkit, которые я часто использую для удаления границы у Entry.

Для получения дополнительных сведений зарегистрируйтесь в Xamarin University, чтобы в режиме live стать участником занятия, на котором будет рассматриваться Использование эффектов в Xamarin.Forms [XAM330].

Пользовательские визуализации

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

Настраиваемые средства визуализации также могут помочь в том случае, когда необходимо реализовать элемент управления, которого в настоящее время нет в Xamarin.Forms, как, например, Floating Action Button (плавающую активную кнопку). На занятиях Xamarin University также рассматривается эта тема для таких сценариев, как интерактивные графики, пользовательская поверхность изображения, а также многое другое в режиме live Xamarin.Forms Renderers [XAM335].

Как использовать настраиваемые шрифты?

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

Мы используем настраиваемый шрифт значка, названный WeatherIcons, в нашем демонстрационном приложении Weather. Если шрифт правильно настроен в проектах платформы, тогда использовать шрифт в XAML довольно просто.

Часть 1. Быстрый старт на Xamarin.Forms

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

Пример итогового приложения

И так, условимся, что мы начинаем новый проект в Visual Studio с Xamarin.Forms под названием Phoneword:

1). Сначала запускаем Visual Studio. На картинке начальное окно программы:

Начальное окно программы Visual Studio

2). В Visual Studio нажимаем на кнопку Create new project… :

Нажимаем на кнопку создания нового проекта

3). В диалоге New Project, жмем Cross-Platform, выбираем шаблон Mobile App (Xamarin.Forms), задаем имя Phoneword, выбираем расположение проекта и жмем кнопку OK:

Диалог создания проекта

4). В диалоге New Cross Platform App , нажимаем Blank App , выбираем .NET Standard как Code Sharing Strategy, и жмем кнопку OK :

Диалог выбора платформ и стратегии развития проекта

5). В разделе Solution Explorer, проекта Phoneword, делаем двойной щелчок на MainPage.xaml для открытия этого файла в редакторе:

Читать еще:  Финский язык за 7 уроков

Открытый файл MainPage.xaml в редакторе

6). В MainPage.xaml, удаляем весь код шаблона и заменяем кодом, который ниже. Этот код декларативно определяет интерфейс пользователя для страницы:

Сохраняем изменения в MainPage.xaml , нажав комбинацию CTRL+S, и закрываем файл.

7). В разделе Solution Explorer, распускаем MainPage.xaml и двойным щелчком открываем файл кода страницы MainPage.xaml.cs:

Файл кода страницы MainPage.xaml.cs

8). В коде MainPage.xaml.cs, удаляем весь код шаблона и заменяем его на следующий код. Методы OnTranslate и OnCall должны быть выполнены в ответ на нажатие кнопок Translate и Call со стороны пользовательского интерфейса соответственно:

Замечание. Теперь можно попробовать построить приложение и мы увидим сообщения об ошибках, которые мы исправим далее.

Сохраняем изменения в файле MainPage.xaml.cs нажатием комбинации CTRL+S, закрываем файл.

9). В Solution Explorer, кликаем правую кнопку мыши на проект Phoneword и выбираем Add > New Item…:

Добавляем новый элемент в проект

10). В диалоге Add New Item выбираем Visual C# > Code > Class, вводим название PhoneTranslator, и жмем кнопку Add:

Диалог добавления нового класса

11). В файле PhoneTranslator.cs, удаляем весь шаблон кода и заменяем на ниже указанный. Этот код транслирует буквы в телефонный номер:

Сохраняем файл PhoneTranslator.cs , нажатием CTRL+S, и закрываем файл.

12). В Solution Explorer, жмем правой кнопкой мыши на проект Phoneword и выбираем Add > New Item…:

Добавляем новый элемент в проект

13). В меню Add New Item открываем диалог добавления, выбираем Visual C# > Code > Interface, вводим имя интерфейса IDialer, жмем кнопку Add:

Добавление нового интерфейса

14). В файле IDialer.cs, удаляем шаблон кода по умолчанию и заменяем его кодом, указанным ниже. В этом коде определен метод Dial , который должен быть реализована каждой платформе для набора переведенного номера телефона:

Сохраняем изменения IDialer.cs нажатием CTRL+S, закрываем файл.

Замечание. Общий код для приложения сейчас закончен. На уровне определенной платформы код набора номера теперь будет реализован как DependencyService.

15). На вкладке Solution Explorer, жмем правую кнопку на проекте Phoneword.iOS и выбираем Add > New Item…:

Добавляем элемент к проекту Phoneword.iOS

16). В разделе диалога Add New Item, выбираемApple > Code > Class, вводим имя PhoneDialer, и жмем на кнопку Add:

Добавляем новый класс к проекту iOS

17). В файле PhoneDialer.cs, удаляем весь шаблон кода и заменяем его на ниже приведенный. Этот код содержит метод Dial который должен быть использован платформой iOS для набора транслированного телефонного номера:

Сохраняем файл PhoneDialer.cs , нажатием CTRL+S, и закрываем файл.

18). На вкладке Solution Explorer, жмем правую кнопку на проекте Phoneword.Android и выбираем Add > New Item…:

Добавляем элемент к проекту Phoneword.Android

19). В разделе диалога Add New Item, выбираем Android > Code > Class, вводим имя PhoneDialer, и жмем на кнопку Add:

Добавляем новый класс к проекту Android

20). В файле PhoneDialer.cs, удаляем весь шаблон кода и заменяем его на ниже приведенный. Этот код содержит метод Dial который должен быть использован платформой Android для набора транслированного телефонного номера:

Сохраняем файл PhoneDialer.cs , нажатием CTRL+S, и закрываем файл.

Замечание. Обратите внимание, что этот код предполагает, что вы используете новейший Android API.

21). Во вкладке Solution Explorer, в проекте Phoneword.Android, двумя щелчками открываем файл MainActivity.cs , удаляем весь шаблон кода и заменяем на следующий код:

Сохраняем файл MainActivity.cs , нажатием CTRL+S, и закрываем файл.

23). В секции Required permissions , разрешаем телефону выполнять звонок CALL_PHONE:

Разрешаем телефону звонить

Сохраняем файл манифеста, нажатием CTRL+S, и закрываем файл.

24). На вкладке Solution Explorer, жмем правую кнопку на проекте Phoneword.UWP и выбираем Add > New Item…:

Добавляем элемент к проекту Phoneword.UWP

25). В разделе диалога Add New Item, выбираем Visual C# > Code > Class, вводим имя PhoneDialer, и жмем на кнопку Add:

Добавляем новый класс к проекту UWP

26). В файле PhoneDialer.cs, удаляем весь шаблон кода и заменяем его на ниже приведенный. Этот код содержит метод Dial который должен быть использован платформой Universal Windows Platform для набора транслированного телефонного номера:

Сохраняем файл PphoneDialer.cs , нажатием CTRL+S, и закрываем файл.

27). На вкладке Solution Explorer, на проекте Phoneword.UWP , жмем правую кнопку на References, aи выбираем Add Reference…:

Добавляем новую ссылку к проекту UWP

28). В диалоге Reference Manager , выбираем Universal Windows > Extensions > Windows Mobile Extensions for UWP, и жмем на кнопку OK:

Диалог менеджера ссылок

Замечание. В v10.0.16299.0 Windows Mobile Extensions для UWP должен быть выбран класс PhoneLine .

29). Во вкладке Solution Explorer, в проекте Phoneword.UWP, делаем двойной щелчок и открываем файл Package.appxmanifest:

Настройка файла Package.appxmanifest

30). На странице Capabilities , разрешаем возможность звонить Phone Call:

Страница разрешений для UWP

Сохраняем изменения в файле нажатием CTRL+S, и закрываем файл.

31. В Visual Studio, выбираем пункт в меню Build > Build Solution (или нажимаем CTRL+SHIFT+B). Приложение будет построено и во вкладке статус бара Visual Studio должно появиться сообщение об удачном построении:

Сообщение об удачном построении

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

32). Во вкладке Solution Explorer, кликаем правую кнопку на проекте Phoneword.UWP и выбираем Set as StartUp Project:

Устанавливаем проект по умолчанию

33). В панели инструментов Visual Studio, жмем кнопку Start (треугольная кнопка, которая имитирует кнопку проигрывания) для запуска приложения:

Запущенное приложение UWP

34). Во вкладке Solution Explorer, жмем правой кнопкой на проект Phoneword.Android выбираем пункт Set as StartUp Project.

35). На панели инструментов Visual Studio, жмем на кнопку Start (треугольная кнопка, которая имитирует кнопку проигрывания) для запуска приложения Android в эмуляторе:

Как создать мобильное приложение с помощью Xamarin

Создавать кроссплатформенные приложения можно не только на Java, но и на .NET. Разбираемся, как написать простую программу на Xamarin.Forms.

Xamarin — это инструмент для создания приложений на языках семейства .NET (C#, F#, Visual Basic). Он позволяет написать единый код (Xamarin.Forms), который будет работать на Android, iOS и UWP (Universal Windows Platform — технология создания приложений для Windows 10), или нативные программы для этих платформ (Xamarin).

Разбираемся, как создавать приложения на Xamarin.Forms, на примере калькулятора для мобильных устройств.

Евгений Кучерявый

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

Подготовка к разработке мобильных приложений на C#

Сначала нужно скачать и установить модуль Mobile development with .NET. Для этого запустите Visual Studio Installer (скачать его можно на официальном сайте), выберите подходящую версию IDE и укажите компонент Mobile Development with .NET.

Когда Visual Studio установится, нужно создать Xamarin-проект.

Для этого можно выбрать проект Mobile App (Xamarin.Forms), работающий на всех платформах, либо отдельно Android App или iOS App.

Важно!

Разработка на Xamarin.Forms и Xamarin отличается. В Xamarin.Forms интерфейс создается с помощью XAML, а в Xamarin — с помощью нативных средств выбранной платформы.

Теперь укажите название и путь, а потом нажмите Create:

Затем нужно выбрать шаблон. В этой статье рассматривается создание мобильного приложения на примере пустого (Blank) проекта. Обратите внимание, что можно выбрать платформы Android, iOS и UWP. Для последнего нужно скачать дополнительный компонент в Visual Studio Installer — Universal Windows Platform development.

Читать еще:  Уроки английского ирина колосова

Visual Studio понадобится какое-то время, чтобы подготовить все файлы проекта, а потом стоит сразу установить средства для отладки приложений. Для этого понадобится либо устройство на iOS или Android, либо эмулятор.

Чтобы создать эмулятор, выберите пункт Create Android Emulator…, как показано на скриншоте:

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

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

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

Другой способ — использовать физическое устройство. Для этого закройте Visual Studio и возьмите смартфон. В настройках найдите Build Version (название и расположение зависит от производителя) и нажмите на него 7 раз подряд. После этого станут доступными настройки для разработчиков. В них нужно включить USB Debug и подключить устройство к компьютеру.

Откройте Visual Studio и запустите проект, выбрав подключенное устройство:

На устройстве откроется приложение, которое было создано по шаблону:

Поздравляю, первое приложение готово! Закройте его, чтобы вернуться к редактированию кода.

Создание приложения

Приложение разделено на несколько подпроектов. В основном проекте находятся все файлы, с которыми предстоит работать. А в XamarinApp1.Android и XamarinApp1.iOS находится код для этих операционных систем.

Основной проект компилируется в dll-библиотеки и подключается к подпроектам. Это позволяет писать код один раз и запускать его везде — .NET Framework сам всё скомпилирует, чтобы запустить на разных ОС.

Мобильные приложения на Xamarin создаются с помощью страниц (экранов). По умолчанию основная страница — MainPage. Она состоит из двух файлов:

  • MainPage.xaml (язык Xaml). Пользовательский интерфейс.
  • MainPage.xaml.cs (язык C#). Основная логика приложения, обработка событий.

Начать можно с файла разметки интерфейса. Например, можно написать вот такой простой калькулятор:

Здесь всё находится внутри элемента , который является аналогом из WPF. Внутри него содержится , который позволяет разместить элементы последовательно. С помощью атрибута Orientation указывается направление элементов — вертикальное (по умолчанию) или горизонтальное.

Текстовые блоки создаются с помощью элемента , а поля ввода — с помощью . Кнопка — . Полям ввода указывается атрибут x:Name, чтобы к ним можно было обратиться в коде C#. А для кнопки указывается обработчик события Clicked.

Xamarin: что это такое, кому стоит использовать и ответы на другие важные вопросы о фреймворке

Xamarin: что это такое, кому стоит использовать и ответы на другие важные вопросы о фреймворке

  • Статьи , 2 октября 2016 в 20:54
  • Антон Машков

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

Кто выигрывает с Xamarin?

Бизнес-логика приложения редко меняется при смене платформы. Ваш любимый интернет-банкинг проводит платежи и сообщает баланс вне зависимости от того, работаете вы на смартфоне или ноутбуке. Подобные приложения со сложной бизнес-логикой и стандартным интерфейсом — прерогатива Xamarin.

Алгоритмы, разработанные на C# для одной платформы, программисты используют и для всех остальных платформ. Например, при работе на Xamarin.Android и Xamarin.iOS, до 75% кода можно переиспользовать: приложение работает одинаково и на iPhone, и на Android-смартфоне.

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

Какие плюсы?

Экономия ресурсов, переиспользование кода и простота добавления версий для новых платформ. Код на C# доступен всей команде и при достаточной квалификации может быть использован на любой другой платформе: как мобильной, так и десктопной.

Ваша команда подходит?

Для программистов, уже работающих с несколькими платформами отдельно, переход на кроссплатформенные решения покажется рутиной. Разобраться в Xamarin легко, а вот изучить документацию, гайдлайны, SDK и API каждой платформы с нуля — гораздо сложнее.

28 марта – 14 апреля , онлайн, беcплатно

Для тех же Xamarin.Android и Xamarin.iOS требуется знание iOS Storyboards и синтаксис Android XML. Конечно, обучать сотрудников всегда полезно, но готовы ли вы делать эти вложения прямо сейчас? В любом случае, лучше иметь на проекте пару iOS-Android разработчиков, которые ускорят процесс обучения коллег. В команде одни десктоп-специалисты, а приложение должно работать и на смартфонах? Без дополнительной помощи мобильных разработчиков вы вряд ли почувствуете экономию от Xamarin.

Сколько это стоит?

Ещё в начале 2016 года разработчики тратили на лицензию Xamarin до $999 в год. Но после поглощения компанией Microsoft большая часть продуктов Xamarin стала доступна по лицензии Visual Studio 2013 или Visual Studio 2015. Скачивайте всё необходимое с официального сайта Xamarin или прямо в Visual Studio 2015 (Update 2) и начинайте работу.

Доплачивать надо, например, за Xamarin Test Cloud. Но будем честны: без этого сервиса может обойтись подавляющее большинство проектов.

Стоит учитывать стоимость оборудования. Вам понадобятся устройства с macOS для разработки на iOS SDK и Windows для Windows Phone SDK, а Android SDK работает и там, и там.

О чем стоит беспокоиться?

Xamarin сравнительно молодой — на специфические вопросы не всегда удаётся найти ответы в документации или на форуме. Но можно спросить у разработчиков на конкретных платформах. В Xamarin используются нативные SDK, даже название методов и классов в Xamarin наследуется, так что проблем с поиском возникнуть не должно.

Раздел для разработчиков на сайте Xamarin содержит детальную документацию, API и примеры всех методов и процедур — этого достаточно, чтобы начать разработку. Для всего остального есть Stackoverflow с ответами на любые вопросы по Xamarin, iOS, Android.

Первые Xamarin-специалисты жаловались на проблемы при работе со сторонними библиотеками. Сегодня SQLite.NET, loC фреймворки Autofac, MVVC фреймворки и другие популярные библиотеки поддерживают кроссплатформенную разработку. Если вы не собираетесь использовать на проекте исключительно редкие инструменты, то волноваться не о чем.

Xamarin.Forms или Xamarin.IOS + Xamarin.Android?

Зависит от возможностей и желаний. Xamarin.Forms — это инструмент для разработки единого интерфейса для всех платформ. Дизайн описывается в XML-файле, используя синтаксис XAML. Это оценят .NET-разработчики, которые обычно уверенно работают с XAML.

Проблема в том, что программисту будет доступен всего лишь небольшой набор стандартных элементов управления, внешняя оболочка, связанная с нативными кнопками, чекбоксами и прочим. Теоритически, в Xamarin.Forms используется до 100% общего кода, но только для приложений с совсем уж простым интерфейсом, вроде «Hello world». Если вам захочется что-то, чего нет в наборе, то придётся перерабатывать и сами элементы на каждой платформе по-отдельности. Выбирайте Xamarin.Forms для проектов, где вы готовы сэкономить на гибкости настройки интерфейса.

Чаще «схалявить» не получается и нужно использовать Xamarin.iOS и Xamarin.Android. Так у вас будет прямой доступ к API платформ и полный набор элементов управления, а каждая платформа будет представлена отдельным решением.

Так подойдет мне Xamarin или нет?

Ответьте на три вопроса и станет ясно, подходит ли вам Xamarin:

  • Интерфейс приложения без сложной логики взаимодействия и нестандартных элементов управления?
  • У вас в команде есть мобильные разработчики?
  • Вы планируете другие кроссплатформенные проекты (пусть даже не на Xamarin) в ближайшее время?

Если вы ответили «да» на все вопросы, тогда Xamarin — хорошее вложение для вашей команды и проекта в долгосрочной перспективе.

Автор: Мария Куликовская, веб-разработчик, Itransition

Мария работает в Itransition более трех лет, отвечая за планирование проектов, выбор технологий под бизнес-требования заказчика, управление развертыванием и пост-проектной поддержкой и т.п. Участвовала в разработке самых разных систем, как мобильных, так и десктопных. Сфера особого интереса — базы данных.

Xamarin: Повышаем эффективность работы в Xamarin.Forms

Третья статья в цикле “Рецепты для Xamarin-разработчиков”.

В прошлой статье мы рассмотрели, как можно повысить продуктивность при разработке мобильных приложений с использованием Xamarin, а также отметили базовые механизмы повышения производительности бизнес-приложений на базе Xamarin.Forms.

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

Что такое бизнес-приложения?

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

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

Для простоты, мы разделяем типы мобильных приложений по следующим критериям:

  • Сложность интерфейса (UI) — наличие и использование своих анимаций и спец. эффектов, своя концепция пользовательского интерфейс.
  • Использование возможностей ОС — оптимизация под различное железо, использование системных механизмов.
  • Частота использования — как часто пользователь будет запускать приложение.

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

  • игры (высокая сложность UI, высокое использование функциональности ОС, частое использование),
  • развлечения/мультимедиа (средняя сложноcть 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:

Объемно, не так ли?

А вот, как будет выглядеть та же самая ViewModel при использовании плагина PropertyChanged.Fody:

Заметное сокращение рутины 🙂 Для этого необходимо просто добавить данный плагин через Nuget.

В Xamarin Studio может потребоваться вручную задать у файла FodyWeavers.xml свойства Build Action -> Content, и Quick Properties -> Copy to Output Directory, плюс внести информацию о плагине в файл FodyWeavers.xml:

В нашей практике мы также используем следующие плагины Fody (другие пока не прижились):

Иконочные шрифты

В современной практике мобильной разработки приходится работать с большим количеством разрешений экранов, поэтому раньше в приложении приходилось иметь большое количество изображений разного размера, чтобы иконки отображались корректно, без артефактов и лишнего использования памяти. Несколько лет назад в мире веб-разработки стали активно использоваться иконочные шрифты Font Awesome, которые позволяли уйти от большого количества изображений и гибко адаптировать верстку под различные разрешения и плотность дисплеев. Со временем данный подход перекочевал и в сферу мобильной разработки.

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

Начнем мы с создания иконочного шрифта. Для этого нам понадобятся изображения в формате SVG и бесплатный сервис Glyphter, который из коробки позволяет использовать большое количество иконок.

Сами иконки мы рекомендуем создавать в стилистике целевой платформы или использовать готовые наборы (например, icons8).

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

  • AssetsFonts для Android
  • ResourcesFonts для 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#:

Но на наш взгляд лучше создать своего наследника от NControlView и использовать его в Xaml:

Еще NControl можно использовать для создания различных анимаций пользовательского интерфейса — пример реализации открытия диалога в духе Skype.

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

Заключение

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

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

Ссылка на основную публикацию
Adblock
detector