Итак, Вы разрабатываете новое нативное приложение для мобильных устройств, используя Xamarin.Forms? Поздравляем, Вы на верном пути! У Вас есть преимущества от использования одной и той же базы кода C#/XAML, которая предназначается для всех платформ и модифицирует в соответствии с установками взаимодействие с пользователем на каждой из них.
Правильный набор инструментов пользовательского интерфейса также может помочь дополнять Ваше приложение. При разработке нового приложения Xamarin.Forms ознакомьтесь с отполированными элементами управления, поставляемыми с Telerik UI для Xamarin. Если Вы еще не пользуетесь Telerik UI, всегда есть возможность ознакомиться с бесплатной версией. В любом случае Вы ведь ничего не потеряете.
При разработке мобильного приложения приходится преодолевать очень серьезные препятствия на пути к тому, чтобы оно стало рабочим. Необходимо упорядочить содержание приложения для оптимального использования, а также сохранять непрерывность взаимодействия с пользователем. Требуется согласованная стратегия кодирования для нескольких шрифтов и минимизация использования ресурсов. Давайте перейдем прямо к делу, — и вот мои пять советов по поводу того, как следует преодолевать наиболее часто встречающиеся трудности.
1. Навигация по страницам
Почти каждое мобильное приложение представляет собой набор страниц, и навигация по ним является тем, из чего состоит опыт пользователя. Приложения Xamarin.Forms не являются исключением, и, к счастью, здесь есть простая встроенная модель навигации. Разработчики сшивают вместе стеки страниц, которые следуют за шаблоном Last-in-First-out (LIFO). Переход от одной страницы к другой помещает страницу в стек, а возвращение на предыдущую страницу выводит ее из стека. Все просто.
Для того чтобы использовать встроенную модель навигации Xamarin.Forms нужен всего лишь воспользоваться классом NavigationPage, который автоматически управляет стеком. С помощью класса NavigationPage добавьте панель навигации в верхнюю часть страницы, при необходимости заполните заголовок и значки. Кроме того, пользователи при переходе видят кнопку обратной навигации, которая настроена для каждой мобильной платформы.
Предпочтительно использовать класс NavigationPage с первой страницы Вашего приложения, которая определена в AppStart.cs в общем коде PCL. Вот так:
1 2 3 4 5 6 7 8 | public class App : Application { public App() { MainPage = new NavigationPage(new HomeView()); } .. } |
Я разрабатываю авиационное приложение; связываю его с данными из облака и использую ListView для отображения коллекции реактивных самолётов бизнес-класса. Давайте прибавим к приложению простую навигацию.
Первое представление (HomeView) уже подключено к классу NavigationPage. У нас был Telerik ListView, отображающий список реактивных самолетов бизнес-класса — давайте разрешим пользователю делать выбор и перемещаться на страницу с более подробной информацией о них. Этот главный сценарий детализации является повсеместным, и нам нужно перенести контекст выбранного самолета на страницу сведений. Вот код:
1 2 3 4 5 6 7 8 9 10 | <TelerikDataControls:RadListView x:Name="BizJetsList" SelectionMode="Single" ItemTapped="BizJet_Selected" ... ... </TelerikDataControls:RadListView> private async void BizJet_Selected(object sender, Telerik.XamarinForms.DataControls.ListView.ItemTapEventArgs e) { BizJets selectedBizJet = (BizJets)e.Item; await Navigation.PushAsync(new BizJetDetailView(selectedBizJet)); } |
Обратите внимание на использование метода PushAsync() – он помещает страницу сведений в стек навигации, принимает выбранный самолет и переводит пользователя на страницу с подробной информацией. В качестве бесплатного довеска модель навигации отображает соответствующую кнопку «назад» (Back), которая возвращает пользователя на страницу ListView. Вот как выглядит навигация в моем авиационном приложении:
Если Вы хотите каждый раз обрабатывать обратную навигацию программным способом, просто используйте метод PopAsync() для удаления страницы перехода из стека, например:
1 | await Navigation.PopAsync(); |
2. Страницы с вкладками
Хотя есть множество способов организации содержимого в приложениях, одной из наиболее распространенных парадигм являются вкладки — просто пользователь интуитивно понимает, как их использовать. В Xamarin.Forms имеется встроенный способ представления содержимого приложения в виде вкладок через класс TabbedPages. Пользовательский интерфейс представляет список вкладок, настраиваемых для каждой платформы и большой области детализации. Ниже приведен простой код страницы Detail для отображения сведений о самолете:
1 2 3 4 5 6 7 8 | <?xml version="1.0" encoding="UTF-8"?> <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Aviation.BizJetDetailView" xmlns:MyTabPages="clr-namespace:Aviation;assembly=Aviation"> <TabbedPage.Children> <MyTabPages:ImagePage Title="Your Jet" Icon="PlaneImage" /> <MyTabPages:DetailsPage Title="Your Luxury" Icon="DetailImage" /> </TabbedPage.Children> </TabbedPage> |
Обратите внимание на то, как мы пытаемся заполнить дочерние коллекции TabbedPage — это индивидуальные, полностью настраиваемые ContentPages, просто связанные вместе как список вкладок. Мне нравится хранить дочерние страницы, которые составляют вкладки в одном месте, например, в папке.
Кроме того, для приложений iOS простая установка свойств Icon на вкладках добавляет значки изображений. Убедитесь также в том, что значки в папке Resources проекта iOS подходящего размера. Цвет значков свободный.
Одной из проблем, которые могут возникнуть в случае со страницами является управление данными — ведь каждая из страниц является отдельным объектом, но вместе они составляют представление и часто разделяют между собой данные. Я нашел выход в использовании унифицированной ViewModel и ее одноэлементного экземпляра.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | public class BizJetsDetailViewModel { private static readonly BizJetsDetailViewModel SingletonBJDVM = new BizJetsDetailViewModel(); private BizJets IndividualBizJet; private BizJetsDetailViewModel() { // No public constructor. } public static void SetBJDViewModel(BizJets SelectedBizJet) { SingletonBJDVM.IndividualBizJet = SelectedBizJet; } public static BizJets GetIndividualBizJet() { return SingletonBJDVM.IndividualBizJet; } } |
Обратите внимание на то, как ViewModel предоставляет методы для установки или получения доступа к выбранному BizJet, и он совместно используется всеми дочерними экземплярами TabbedPage через одноэлементный класс (singleton instance). Теперь родительское детальное представление может установить выбранный BizJet в качестве полученного через контекст навигации, и все дочерние страницы получат к нему доступ.
1 2 3 4 5 | public BizJetDetailView(BizJets SelectedBizJet) { BizJetsDetailViewModel.SetBJDViewModel(SelectedBizJet); InitializeComponent(); } |
3. Сохранение данных
Как только вы начнете разрабатывать приложение Xamarin.Forms, вам придется определить последовательную стратегию сохранения данных, а именно то: как фактически хранить данные приложения на устройстве? Конечно, Вы можете каждый раз подгружать данные из облака, но в этом случае приложение полностью прекратит работу, если устройство не будет подключено к интернету.
В идеальном случае необходимо кэшировать данные после того, как они будут извлечены, и таким образом приложение будет работать без подключения к сети. Кроме того, большинство приложений требуют того, чтобы определенные данные, относящиеся к разным пользователям, хранились отдельно.
В случае с приложениями Xamarin.Forms есть различные стратегии сохранения данных. Лучше всего использовать кроссплатформенную модель, которая работает везде и позволяет осуществлять управление данными из общего кода. Конечно, есть такие решения, как SQLLitePCL и плагины параметров, но для сохранения кроссплатформенных данных проще всего использовать встроенный словарь.
Все приложения Xamarin.Forms используют класс Application для самостоятельной загрузки, и в там есть словарь свойств. Этот словарь можно использовать для хранения сериализованных примитивных данных в парах ключ-значение. Словарь свойств сохраняется на устройстве автоматически, и доступ к этим данным можно получить из любого места в коде Xamarin.Forms с помощью Application.Current.Properties.
Вот код из моего ViewModel, который забирает список самолетов для соответствующего представления: Обратите внимание на метод GetAllBizJets() — он сначала проверяет, есть ли данные в кэше, и если да, то извлекает их из словаря свойств. А если нет, то направляет нас в облако, извлекает данные и вносит всю коллекцию объектов в словарь свойств для сохранения в рамках приложения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | public class BizJetsViewModel { private string BSAppId = "<Your Backend Services App Key>"; private EverliveApp ELHandle; public ObservableCollection<BizJets> BizJetsCollection { get; set; } public BizJetsViewModel() { EverliveAppSettings appSettings = new EverliveAppSettings() { AppId = BSAppId, UseHttps = true }; ELHandle = new EverliveApp(appSettings); } public async Task<ObservableCollection<BizJets>> GetAllBizJets() { BizJetsCollection = new ObservableCollection<BizJets>(); if (Application.Current.Properties.ContainsKey("BizJetsCollection")) { BizJetsCollection = Application.Current.Properties["BizJetsCollection"] as ObservableCollection<BizJets>; return BizJetsCollection; } else { var bizJetsManager = ELHandle.WorkWith().Data<BizJets>(); var allBizJets = await bizJetsManager.GetAll().ExecuteAsync(); foreach (BizJets serializedBizJet in allBizJets) { BizJetsCollection.Add(serializedBizJet); } Application.Current.Properties["BizJetsCollection"] = BizJetsCollection; return BizJetsCollection; } } } |
4. Жизненный цикл приложения
Каждое мобильное приложение проходит через несколько этапов жизненного цикла, в то время как периодически используется в течение дня. Эти изменения состояний предоставляют разработчику отличную возможность принять необходимые меры для обеспечения наилучшего взаимодействия с пользователем. С Xamarin.Forms это делается довольно просто благодаря событиям, которые возникают в результате изменения состояния приложения — разработчик видит отклик в соответствующем обработчике событий.
Класс Application, в котором все приложения Xamarin.Forms начинают жизнь, предоставляет три виртуальных метода, которые могут быть переопределены для обработки событий жизненного цикла:
- OnStart запускается при начале работы приложения.
- OnSleep запускается каждый раз, когда приложение начинает работать в фоновом режиме.
- OnResume запускается при возобновлении работы приложения после его отправки в фоновой режим.
Посмотрите в файл AppStart.cs, и Вы найдете перехватчики для каждого события жизненного цикла – идеальные возможности для того, чтобы закреплять состояние пользователя/приложения и сохранять последовательность взаимодействия с пользователем.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | public class App : Application { ... protected override void OnStart() { } protected override void OnSleep() { } protected override void OnResume() { } } |
Помните словарь свойств, о котором мы уже говорили, — что необходим для сохранения данных? Пока длится событие OnSleep() коллекция свойств автоматически сохраняется на диске у каждой мобильной платформы. Тем не менее существует новый метод SavePropertiesAsync(), который можно вызвать в любое время для упреждающего сохранения словаря свойств на тот случай, если приложение аварийно завершит работу или будет уничтожено операционной системой. Нет какого-либо триггера на тот случай, если приложение завершает работу, так что сохраняете все данные и сведения о состоянии во время OnSleep() и вновь извлекайте их во время OnResume().
5. Обработка изображений
Изображения нравятся пользователям, и правильно используемые визуальные средства создают замечательный пользовательский опыт. Разработчикам приложений Xamarin.Forms обрабатывать изображения очень просто — у них есть прекрасная возможность для создания корректной фирменной символики приложения и привлечения пользователей к проекту благодаря богатым изображениям. Можно отображать локальные изображения, поставляемые с пакетом приложения, или же подгружать их из сети.
Элемент управления Image в Xamarin.Forms отображает изображения, которые можно всячески настраивать. Изображения часто отображаются в качестве части страницы или внутри контейнера, например, как у меня на странице подробных сведений о бизнес-джетах:
1 2 3 4 5 6 | <ContentPage.Content> <StackLayout Orientation="Vertical" VerticalOptions="Center"> <Label x:Name="BizJetName" TextColor="Black" FontAttributes="Bold" HorizontalOptions="Center" /> <Image x:Name="BizJetImage" Aspect="AspectFit" /> </StackLayout> </ContentPage.Content> |
Одним из важных свойств элемента управления Image является Aspect; это свойство определяет способ масштабирования изображения — то, как оно занимает область экрана. Возможные варианты:
- AspectFill – масштабирование изображения для заполнения предоставления. Некоторые части изображения могут быть обрезаны, но искажения не происходит.
- AspectFit – масштабирование изображения в соответствии с предоставлением. Некоторые части могут быть оставлены пустыми (леттербоксинг).
- Fill – масштабирование изображения для точного заполнения представления. Масштабирование может быть неравномерным в X и Y, что приведет к искажению изображения.
Загрузка изображений — это отличный способ сохранения содержимого приложения, но тут надо убедиться, что вы не перегружаете пропускную способность данных пользователя. Решение заключается в кэшировании изображений после загрузки и повторном использовании на последующих представлениях.
К счастью, функциональность кэширования встраивается при помощи экземпляра ImageSource, из которого элемент управления Image загружает или отображает изображение, если Вы специально его не отключали. Можно также управлять длительностью времени, после которого кэшированные изображения устаревают.
Вот код для отображения изображений бизнес-джетов — обратите внимание, что свойство Source связано с данными, и я настраиваю все так, чтобы мой кэш оставался действительным в течение 5 дней. Вы можете настроить кэширование изображений для конкретных потребностей приложения.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | public ImagePage() { InitializeComponent(); BizJets IndividualBizJet = BizJetsDetailViewModel.GetIndividualBizJet(); BizJetName.Text = IndividualBizJet.AircraftName; BizJetImage.Source = new UriImageSource { Uri = new Uri(IndividualBizJet.AircraftImageURL), CachingEnabled = true, CacheValidity = new TimeSpan(5, 0, 0, 0) }; } |
Заключение
При разработке нового кроссплатформенного мобильного приложения у вас будут возникать различные трудности, и Xamarin.Forms помогут Вам успешно разрешить большинство из них. Обязательно добавьте в закладки эти «документы» и придерживаетесь последовательной стратегии в отношении важнейших составляющих — управлении данными, навигации и организации приложений. Цель заключается в обеспечении плавного взаимодействия с пользователем, благодаря которому он захочет вновь и вновь возвращаться к приложению. Удачи!
Написать ответ