Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>8 июн 2022</li>

3 <li>0</li>

4 </ul>Пилить кросс-платформенные апки можно не только на Java, но и на .NET. Знакомимся с Xamarin.Forms.

5 Иллюстрация: .NET / Xamarin / Colowgee для Skillbox Media

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

7 Xamarin - это фреймворк для разработки приложений на языках семейства<a>.NET</a>(<a>C#</a>, F#, Visual Basic). Он позволяет написать единый код, который будет работать на Android, iOS и UWP, или нативные программы для этих платформ.

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

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

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

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

12 Важно!

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

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

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

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

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

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

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

20 Скриншот: Skillbox MediaЭмулятор начнёт скачиваться. После установки его можно будет запустить, чтобы отлаживать приложения.

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

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

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

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

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

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

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

28 <ul><li>MainPage.xaml(язык XAML). Пользовательский интерфейс.</li>

29 <li>MainPage.xaml.cs(язык C#). Основная логика приложения, обработка событий.</li>

30 </ul>Начать можно с файла разметки интерфейса. Напишем простой калькулятор:

31 <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="XamarinApp1.MainPage"> <StackLayout > <Label Text="Calc" Margin="5" FontSize="Large" FontAttributes="Bold"/> <StackLayout Orientation="Horizontal" Spacing="50" HorizontalOptions="CenterAndExpand"> <Entry x:Name="num1" WidthRequest="100" Keyboard="Numeric"/> <Label Text="+"/> <Entry x:Name="num2" WidthRequest="100" Keyboard="Numeric"/> </StackLayout> <Label Text="=" Margin="5" HorizontalTextAlignment="Center"/> <Label x:Name="result" Margin="5" HorizontalTextAlignment="Center"/> <Button Text="Calculate" Clicked="Button_Clicked"/> </StackLayout> </ContentPage>Здесь всё находится внутри элемента <ContentPage>, который является аналогом <Window> из <a>WPF</a>. Внутри него содержится <StackLayout>, который позволяет разместить элементы последовательно. С помощью атрибута Orientation указывается направление элементов - вертикальное (по умолчанию) или горизонтальное.

32 Скриншот: Skillbox MediaПосмотреть вид приложения можно с помощью инструмента Designer

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

34 Теперь посмотрим, что происходит в коде MainPage.xaml.cs:

35 using System; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; namespace XamarinApp1 { [DesignTimeVisible(false)] public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private void Button_Clicked(object sender, EventArgs e) //Обработчик нажатия на кнопку { try { int n1 = Convert.ToInt32(num1.Text); //Конвертация значений из текстовых полей в числа int n2 = Convert.ToInt32(num2.Text); result.Text = (n1 + n2).ToString(); //Сложение полученных чисел, преобразование их обратно в строку и вывод в один из элементов <Label> } catch (Exception exc) { } } } }Получился вот такой калькулятор:

36 В принципе, Xamarin очень похож на WPF, поэтому разработчики приложений для Windows смогут быстро в него вникнуть - нужно только выучить новые названия элементов и понять различия в реализации привязки данных.

37 Теперь настроим приложение. Для этого зайдите в Project → AppName Properties…:

38 Скриншот: Skillbox MediaОткроется меню настроек:

39 Скриншот: Skillbox MediaТам можно указать иконку, название, версию, описание и многое другое. Это нужно сделать, чтобы пользователи видели корректную информацию о приложении.

40 После того как приложение будет готово, его можно скомпилировать, чтобы потом передать на мобильное устройство для установки. Установочные пакеты надо искать в папкахBin → Debugнеобходимой платформы.

41 Однако, чтобы люди смогли им пользоваться, нужно загрузить его в Google Play и App Store. Впрочем, это уже совсем другая история :)

42 <a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>