Создание кроссплатформенных интерфейсов Android и iOS с помощью форм Xamarin

Эта статья была рецензирована Адрианом Санду . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

Xamarin стремится предоставить решение, позволяющее компаниям и разработчикам разрабатывать как собственные, так и кроссплатформенные. Используя Xamarin, разработчики могут ориентироваться на Android, iOS и Windows (Mobile) 10, используя единый язык промышленного стандарта C #. Некоторые аспекты кодовой базы зависят от платформы, например уровень пользовательского интерфейса, заставляя программистов многократно разрабатывать их для каждой платформы.

С недавним приобретением Microsoft Xamarin , она, вероятно, станет лучше поддерживаемой, интегрированной и важной частью кроссплатформенной стратегии для Microsoft и разработчиков.

В 2014 году Xamarin представила формы Xamarin (XF). XF представляет уровень абстракции, который позволяет разработчикам объявлять пользовательский интерфейс с помощью объявлений и / или кода XAML (расширяемого языка разметки приложений).

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

XAML делает создание пользовательского интерфейса декларативным и лаконичным по сравнению с созданием пользовательского интерфейса с помощью кода, но для начала не требуется. Разработчики, имеющие опыт работы с технологиями, связанными с XAML, такими как WPF (используемый для разработки настольных приложений Windows) или приложения Windows Phone / Windows Store, будут чувствовать себя как дома, так как многие концепции похожи.

Должен ли я использовать Xamarin или Native?

Преимущество использования Xamarin заключается в возможности обмениваться кодом между различными платформами, в то же время используя возможности функций и сред C #, таких как Async-Await , LINQ и Reactive Extensions . Недостатки в том, что вы зависите от другого уровня абстракции, который может вносить ошибки и проблемы, зависящие от Xamarin, для исправления всякий раз, когда для разработчиков доступна новая версия платформы.

Должен ли я использовать формы Xamarin или Xamarin?

Xamarin отображает 100% API iOS и Android. Это дает вам те же возможности, что и у вас, когда вы разрабатываете изначально и (утверждает Хамарин) без потери производительности. С Xamarin Forms дополнительный уровень абстракции лишает вас возможности получить реализацию дизайна с идеальным пикселем, и это слегка ухудшает производительность (особенно для Android, который Xamarin значительно улучшает). Если ваше приложение сложное, вам следует подумать, подходит ли Xamarin Forms для ваших нужд.

Теперь, когда контекст установлен, давайте перейдем к кодированию вашего первого приложения XF.

Есть небольшая проблема, чтобы убраться с дороги. Чтобы использовать Xamarin, вам необходимо приобрести лицензию . Xamarin предлагает пробный период, и я призываю вас использовать его, чтобы следовать этому руководству. Обратите внимание, что Xamarin Forms не предлагается в бесплатной версии Xamarin Starter Edition .

Настройка среды

Приложения XF могут быть разработаны с использованием Xamarin Studio или Microsoft Visual Studio (доступно только в Windows).

Все не так просто, как хотелось бы. Apple требует Mac для создания приложений iOS, а Microsoft требует машину под управлением Windows для сборки своих платформ.

// The root page of your application MainPage = new ContentPage { Content = new StackLayout { VerticalOptions = LayoutOptions.Center, Children = { new Label { HorizontalTextAlignment = TextAlignment.Center, Text = "Welcome to Xamarin Forms!" } } } }; 

 public class Article { public string Title { get; set; } public string Author { get; set; } public string ArticleUrl { get; set; } } 

 public static class DataService { public static IList<Article> GetArticles() { return new List<Article> { new Article { Title = "Quick Tip: Installing React", Author = "Jon Shaffer", ArticleUrl = "https://www.sitepoint.com/quick-tip-installing-react-native/" }, new Article { Title = "Displaying Collections of Items on Windows Phone", Author = "Deivi Taka", ArticleUrl = "https://www.sitepoint.com/displaying-collections-of-items-on-windows-phone/" }, new Article { Title = "Using C and C++ Code in an Android App with the NDK", Author = "Rico Zuñiga", ArticleUrl = "https://www.sitepoint.com/using-c-and-c-code-in-an-android-app-with-the-ndk/" }, new Article { Title = "Using Classy to Create Stylesheets for Native iOS Apps", Author = "Chris Ward", ArticleUrl = "https://www.sitepoint.com/using-classy-to-create-stylesheets-for-native-ios-apps/" }, new Article { Title = "Fast, Lightweight Data Storage for Cordova Apps with LokiJS", Author = "Wern Ancheta", ArticleUrl = "https://www.sitepoint.com/fast-lightweight-data-storage-for-cordova-apps-with-lokijs/" }, new Article { Title = "How to Make Your Web App Smarter with Image Recognition", Author = "Patrick Catanzariti", ArticleUrl = "https://www.sitepoint.com/how-to-make-your-web-app-smarter-with-image-recognition/" } }; } } 

 MainPage = new NavigationPage(new ContentPage { Title = "Welcome!", Content = new StackLayout { VerticalOptions = LayoutOptions.Center, Children = { new Label { HorizontalTextAlignment = TextAlignment.Center, Text = "Welcome to Xamarin Forms!" } } } }); 

 public ArticlesView() { Title = "Sitepoint: Mobile"; Content = new ListView { ItemsSource = DataService.GetArticles(), }; } 

 MainPage = new NavigationPage(new ArticlesView()); 

 public ArticlesView() { Title = "Sitepoint: Mobile"; var listView = new ListView(); var textCell = new DataTemplate(typeof(TextCell)); textCell.SetBinding(TextCell.TextProperty, "Title"); textCell.SetBinding(TextCell.DetailProperty, "Author"); listView.ItemTemplate = textCell; listView.ItemsSource = DataService.GetArticles(); Content = listView; } 

 public class ArticleContentPage : ContentPage { private WebView _webView; public ArticleContentPage() { Content = _webView = new WebView(); } } 

 public ArticleContentPage() { ... } public Article Article { get; set; } 

 public ArticlesView() { Title = "Sitepoint: Mobile"; var listView = new ListView(); ... listView.ItemSelected += ListView_ItemSelected; Content = listView; } private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e) { // Check that there is a selected item if (e.SelectedItem == null) return; // Set the item as the article to display in the next page var page = new ArticleContentPage {Article = e.SelectedItem as Article}; Navigation.PushAsync(page, true); // Clear the selected item in the list var listView = sender as ListView; listView.SelectedItem = null; } 

 protected override void OnAppearing() { base.OnAppearing(); Title = Article.Title; _webView.Source = new UrlWebViewSource { Url = Article.ArticleUrl }; }