В помощь мобильному разработчику

Xamarin и Universal Windows Platform

Александр Алексеев

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

А вот о чём Вы, возможно, и не подозреваете — так это о том, что эти же самые инструменты можно использовать для разработки под универсальную платформу Windows (UWP), достигая при этом охвата более чем 400 миллионов устройств, на которых потенциально может обосноваться Ваш проект, причём база его пользователей на iOS и Android в то же самое время также будет расширяться благодаря взаимной интеграции приложений.

 

Зачем ориентировать проект на UWP?

В чём состоят выгоды от разработки версии приложения под UWP? В расширении взаимодействия с приложением — вот правильный ответ. Обычно, разработчики стремятся достичь именно этого. Для нас важно, чтобы предлагаемый нами контент постоянно находился в центре внимания. Нам хочется, чтобы наши приложения активно использовались. И притом использовались регулярно. Чтобы мы извлекали максимум прибыли от внутренних покупок, рекламы и контрибуции контента, получая в результате развитую экосистему из связанных друг с другом приложений и прочие бонусы от этого подхода.

UWP позволяет писать приложения, которые работают на настольных компьютерах, планшетах, смартфонах, игровой приставке Xbox one, HoloLens и умных устройствах с поддержкой «Интернета вещей» (IoT). А это более 400 миллионов потенциальных сокетов для Вашего приложения. Но ведь речь идет не только о количестве устройств на базе Windows. Важным аспектом также является и повышение взаимодействия между всеми устройствами, на которых поддерживается Ваше приложение. Возьмем для примера приложение от NPR под названием NPR One (one.npr.org).

NPR One обеспечивает пользователей специально подобранными общественными новостями, историями и подкастами. Приход на платформу Windows позволил радиостанции NPR весьма существенно расширить свою аудиторию. В блоге Microsoft (bit.ly/2e30plQ) цитируют Бена Шайна, продакт-менеджера NPR, который отмечает, что «70% слушателей NPR используют устройства Windows, и мы уже были свидетелями 50-процентного увеличения времени, которое они тратят на прослушивание радиоэфира, с момента выхода Windows 10. И это наблюдалось ещё до обновления приложения». Неожиданным следствием этого также стал всплеск загрузок приложения NPR на устройствах iOS и Android.

Получается, мы живём в мире, в котором у пользователей имеется целый ряд устройств. Однозначно, многие люди являются владельцами устройств на базе iOS и Android, но можно также не сомневаться и в том, что на работе или дома у них стоит ПК. И можно с полной уверенностью предложить, что люди регулярно пользуются как теми, так и другими устройствами в зависимости от того, где они находятся и что они делают. Сделав приложение доступным на всех устройствах, Вы добьетесь того, что заинтересованные в Вашем продукте люди с большой долей вероятности продолжат использовать его на каждом устройстве, с которым они контактируют, равно как и синхронизировать между ними контент.

Рассмотрим чей-то типичный день: допустим, некто едет в автобусе на работу. Ещё в автобусе он начинает трудиться над такой задачей, как, например, чтение отчета. После того как он придёт на работу, он может захотеть вновь обратиться к этому отчёту, чтобы более глубоко его проанализировать, и он достанет его путём экспорта в Microsoft Excel. А по дороге домой он может увлечься просмотром видео. И оказавшись дома, продолжить просмотр на большом экране с того места, на котором он остановился при помощи ПК или Xbox.

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

 

Что такое UWP?

Система UWP представляет собой общую платформу приложений, которая доступна на каждом устройстве, работающим с Windows 10.

В дополнение к общему набору API, доступных на всех базирующихся на Windows 10 устройствах, здесь имеется специально созданный для устройств с этой операционной системой API, позволяющий добиваться максимальных результатов. Итак, сейчас я постараюсь предельно доходчиво объяснить, в чём же заключаются главные преимущества UWP для разработчиков.

 

Красивые и адаптивные пользовательские интерфейсы

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

На рисунке 1 показан пример адаптивного интерфейса. Обратите внимание на расположение кнопки вызова и элемента управления картинкой в картинке на мобильном устройстве. Когда приложение запущено на смартфоне, размер кнопки вызова и её положение адаптируется, делая пользовательский интерфейс более удобным в использование одной рукой. Расположение «картинки в картинке» на смартфоне корректируется, приспосабливаясь к меньшему экрану.

Skype UWP

Рисунок 1 Адаптивный интерфейс

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

С новыми элементами API можно разрабатывать красивые приложения. Можно создавать анимацию — в том числе анимации ключевых кадров — и применять разные эффекты, такие как смещение отбрасываемых теней, освещение эскизов, размывка, непрозрачность, масштабирование эффектов анимации, вращения цветового тона, параллактическое смещение объектов ListView, Z-образный порядок прокрутки, сепия, контрастность и многое другое. Вы сможете увидеть эти эффекты собственными глазами, если клонируйте и запустите проект WindowsUIDevLabs с GitHub (bit.ly/2e3PDqo).

Приложения UWP отображают на экране анимированные значки «активные плитки» и уведомления, как показано на рисунке 2 для представления наглядной информации касательно Вашего приложения. Благодаря «активным плиткам» и уведомлениям взаимодействие с приложением может быть повышено до 20 процентов, потому что они фактически возвращают пользователей к Вашему приложению.

Погода UWP
Рисунок 2. «Активная плитка» и уведомления

 

Адаптивный код использует преимущества сильных сторон устройства

UWP позволяет адаптировать пользовательский интерфейс, так чтобы в своих интересах использовать сильные стороны различных устройств. Вы можете написать адаптивный код, который использует возможности конкретного аппарата именно тогда, когда приложение работает на этом девайсе, или в принципе ориентировать приложение на определённый тип устройств. Visual Studio фильтрует доступные API-интерфейсы в соответствии с тем, какие из них связаны с той категорией устройств, на которую Вы ориентируетесь. Windows Store отбирает доступные приложения по типу используемого устройства. Приложения UWP доступны для всех устройств.

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

С тем чтобы помочь Вам писать привлекательные приложения для UWP, Visual Studio предлагает исключительное многообразие инструментов отладки и работы с кодом. Доступны ресурсы, призванные помочь Вам создавать приложение, например, образцы кода (bit.ly/1RhG46l), фрагменты задач (bit.ly/2dINSo9), энергичное сообщество разработчиков, где можно получить помощь, а также библиотеки, в числе которых UWP Community Toolkit (bit.ly/2b1PAJY), которые позволяют использовать анимации, пользовательские элементы управления и службы типа Twitter и Facebook. В результате получается один пакет приложения, который может быть установлен на всех базирующихся на UWP устройствах.

 

Приложение не встречает препятствий на пути в руки к пользователям

Windows Store снижает стоимость установки приложения, упрощая его распространения среди более широкой аудитории. Он берёт на себя вопрос продаж сквозь географические границы, что освобождает Вас от необходимости понимать банковскую инфраструктуру и налоговое законодательство других стран и снижает проволочки в деле достижения отдалённых регионов. Магазин приложений также берёт на себя задачи лицензирования приложений, так что Вам не придется выстраивать инфраструктуру для контроля за данной сферой.

Магазин приложений предоставляет вещи, которые ожидаемы от него по умолчанию, а именно: автоматические обновления, лицензирование, версии программы для пробного использования и так далее. Это даёт хороший шанс «большого улова», ведь приложение становится доступным для сотен миллионов пользователей Windows 10.

UWP предоставляет возможности для создания приложений с широкими функциональными возможностями, позволяет запускать их на самых разных устройствах, делая их доступными для Ваших клиентов. Как? Вы скоро увидите, ориентировать проект на UWP с Xamarin совсем нетрудно.

 

Добавление проекта UWP к существующему приложению Xamarin.Forms

Давайте рассмотрим пример добавления проекта UWP в образец кода тикера Джеймса Монтемагно на GitHub (bit.ly/2dYHEvs), который является решением Xamarin.Forms, ориентированным на iOS, Android и UWP.

Я исхожу из того, что у вас есть Visual Studio 2015 Update 3, запущенная на Windows 10, и что у Вас установлен и обновлен до актуальной версии Xamarin.

Если Вы хотите действовать согласно пошаговой инструкции, клонируйте пример кода, удалите проект MyStocks.Forms.UWP и вновь добавьте его, выполнив следующие пункты:

  1. Добавьте проект UWP к существующему решению Xamarin.Forms.
  2. Добавьте ссылку из проекта UWP к Xamarin.Forms.
  3. Добавьте ссылку на Portable Class Library (PCL), содержащую общие формы.
  4. Измените код в проекте UWP для использования с Xamarin.Forms, и загрузить приложение из общего проекта PCL.

Давайте разберем это подробнее по пунктам.

 

Добавление пустого проекта UWP к существующему решению Xamarin.Forms. 

После того как Вы загрузили программное решение MyStocks.Forms в Visual Studio, щелкните правой кнопкой мыши на узел решения и выберите Add | New Project. В диалоговом окне Add New Project переместитесь к Visual C# | Windows | Universal и выберите Blank App (Universal Windows). Назовите проект MyStocks.Forms.UWP и нажмите кнопку OK.

Далее, Вы увидите диалоговое окно New Universal Windows Project, где Вас попросят выбрать минимальные версии платформы, которые будут поддерживать приложение UWP. Нажмите кнопку OK, дабы выбрать значения по умолчанию.

Теперь, когда Вы добавили проект UWP к программному решению Xamarin, щелкните правой кнопкой мыши на узел ссылок (References node) проекта UWP и выберите Manage NuGet Packages.

При появлении окна пакета NuGet выберите Browse, наберите forms в поле поиска, чтобы сузить список результатов, а затем выберите из перечня Xamarin.Forms. Выберите самую последнюю стабильную версию из выпадающего меню справа, отметьте, что это за версия и нажмите на кнопку Install (смотрите рисунок 3).

NuGet Manager

Рисунок 3. Менеджер пакета NuGet

 

Убедитесь в том, что Ваши проекты ориентированы на одну и ту же версию

Если в Вашем программном решении имеются другие проекты Xamarin.Forms, убедитесь, что они используют ту же версию Xamarin.Forms, которую Вы добавили к проекту UWP. Чтобы узнать, какая версия Xamarin.Forms ими используется, выберите проект (например, MyStocks.Forms.Android), нажмите правой кнопкой мыши на его References node и выберите Manage NuGet Packages. Убедитесь в том, что выбран пункт «установка» (Installed), наберите forms в поле поиска, чтобы сузить список вариантов, и затем найдите Xamarin.Forms в перечне установленных пакетов NuGet. Удостоверьтесь в том, что их версии совпадает с версией Xamarin.Forms, которые Вы используйте с проектом MyStocks.UWP. Обновите их, если здесь более ранняя версия (смотри рисунок 4).

NuGet Manager

Рисунок 4. Проверка совпадения версий Xamarin.Forms

 

Добавление ссылки на PCL, который содержит общие формы

Вам понадобится пользовательский интерфейс для UWP, чтобы он использовался совместно с проектом Xamarin.Forms. Для этого новый проект UWP должен ссылаться на PCL, который содержит общие формы. В проекте My.Stocks.Forms.UWP project, щелкните правой кнопкой мыши на References node и выберите Add Reference. В появившемся Reference Manager убедитесь, что там установлены Projects | Solution, а затем выберите MyStocks.Forms для добавления ссылки (смотри рисунок 5).

Nuget Manager

Рисунок 5. Добавление ссылки на портативную библиотеку классов

 

Изменение кода в проекте UWP для использования с Xamarin.Forms и загрузка приложение из общего проекта PCL

Теперь нужно переопределить код в шаблоне приложения, который был добавлен как часть нового проекта UWP, так как он будет использовать Xamarin.Forms для загрузки приложения из общего проекта PCL. Вставьте следующий выделенный код в начале App::OnLaunched, который находится в MyStocks.Forms.UWP | App.xaml | App.xaml.cs:

 

В конструкторе MainPage, который находится по пути MyStocks.Forms.UWP | MainPage.xaml | MainPage.xaml.cs, добавьте следующий выделенный код для загрузки проекта Xamarin.Forms:

 

В том же файле удалите наследование MainPage из Page:

 

Затем сделайте следующие изменения в MainPage.xaml (MyStocks.Forms.UWP | MainPage.xaml):

  • В тег <Page> добавьте: xmlns:forms=“using:Xamarin.Forms.Platform.UWP”:
  • Измените открывающий тег с <Page> на <forms:WindowsPage и удостоверьтесь, что закрывающий тег изменился с </Page> на </forms:WindowsPage>

Теперь страница будет наследовать от Xamarin.Forms.Platform.UWP.WindowsPage.

 

Добавление проекта MyStocks.Forms.UWP к конфигурации сборки

После добавления UWP к проекту Xamarin.Forms удостоверьтесь, что он сконфигурирован для сборки. Сначала щелкните правой кнопкой мыши на узел проекта MyStocks.Forms.UWP и выберите «установить» (Set) в качестве проекта StartUp.

Затем щелкните на узел программного решения и выберите Configuration Manager. В диалоговом окне Configuration Manager удостоверьтесь в том, что в MyStocks.Forms.UWP отмечены флажки на Build и Deploy.

Если Вы следовали вышеуказанным шагам, то изначально удалили проект MyStocks.Forms.UWP. Новый проект MyStocks.Forms.UWP не имеет фоновый образ или пакеты NuGet, которые мы добавили к первоначальному проекту, чтобы получить значение тикера (stock symbol), а также доступа к Twitter API и тому подобного. Для просмотра результатов шагов, предпринятых для добавления проекта UWP к образцу приложения Джеймса Монтемагно, клонируйте новую копию его проекта на GitHub по ссылке, предоставленной ранее, или установите определённые пакеты NuGet к Вашему проекту MyStocks.Forms.UWP, а именно: linqtotwitter, Microsoft.Bcl, Microsoft.BCL.Build, Microsoft.Bcl.Compression, Microsoft.Net.Http, Newtonsoft.Json and Xam.Plugins.TextToSpeech.

Теперь Вы добавили проект UWP к Вашему программному решению Xamarin. Проект UWP будет подгружать и запускать приложение Xamarin.Forms из пустого шаблона UWP. На рисунке 6 показано приложение, запущенное на Android, iOS и Windows 10.

Xamarin Worms и UWP

Рисунок 6. Приложение, запущенное на различных операционных системах

Xamarin.Forms выполняют работу по распределению элементов управления из проекта общих форм к приложению UWP, которое было добавлено. Xamarin.Forms также предоставляют возможность для внедрения специфики каждой платформы, если она Вам нужна, в то же время сохраняя идентичный пользовательский интерфейс. Чтобы уточнить детали, ознакомьтесь с материалом от Чарльза Петцольда «Встраивание нативных Views в приложения Xamarin.Forms», а также статьей Кевина Эшли «Кросс-платформенная продуктивность с Xamarin» (bit.ly/2dYKr8a), которая была опубликована в сентябре 2016.

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

 

Подводя итог

Если Вы не используете Xamarin.Forms для пользовательского интерфейса, то всё равно можете добавить проект UWP к программному решению. Вы можете использовать код совместно при помощи Shared Asset Project, PCL или .NET Standard Library. Заглядывайте в раздел «Создание кросс-платформенных приложений» на сайте Xamarin (bit.ly/2e3bV0C) для ознакомления с наилучшими методиками.

Microsoft приобрела Xamarin и продолжает вкладывать средства в проект с открытым исходным кодом (bit.ly/1MZsCFE). Мы высоко ценим Ваши отзывы и вложения!

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

Александр Алексеев
Александр Алексеев

Xamarin - разработчик. Работаю с .NET платформой с 2012 года, программирую в основном с использованием C#. За это время успел поработать с ASP.NET, Entity Framework, MSSQL, Git

Microsoft Bot Framework
AdMob android

Написать ответ