Разработка мобильных приложений. Платформа Xamarin.

Forms
Цель работы: ознакомиться с основными возможностями создания
кроссплатформенных мобильных приложений в Xamarin.Forms.
Оборудование: ПК.
Программное обеспечение: Visual Studio 2022, Word.
Теоретическая часть
Xamarin.Forms представляет платформу, которая нацелена на создание
кроссплатформенных приложений под Android, iOS и UWP (Universal
Windows Platform).
Преимущества использования Xamarin.Forms:
 В процессе разработки создается единый код для всех платформ.
 Xamarin предоставляет прямой доступ к нативным API каждой
платформы.
 При создании приложений мы можем использовать платформу .NET и
язык программирования C# (а также F#), который является достаточно
производительным, и в тоже время ясным и простым для освоения и
применения.
 Xamarin Forms поддерживает несколько платформ. Основные
платформы: Android, iOS, UWP, Tizen.
Работу Xamarin графически можно представить следующим образом:

1
 Работа в Xamarin.Forms начинается с создания проекта. Здесь нам
доступно три шаблона:
 Floyout: проект с боковым меню.
 Tabbed: проект приложения, которое использует вкладки для
навигации между страницами.
 Blank: пустой шаблон, создающий проект с минимальной
функциональностью.
Кроме того, при создании проекта в опции Platform мы можем
отметить, под какие ОС будет создаваться проект. В данном случае мы
можем выбрать хоть все платформы: Android, iOS, Windows (UWP).
После выбора шаблона Visual Studio сгенерирует новое решение. Если
мы выбрали Android и iOS, то созданное решение будет содержать 3 проекта:

Если мы обратимся к главному проекту App2, то в нем уже будет

четыре основных файла:
 App.xaml: файл, который определяет ресурсы, общие для всего
приложения.
 App.xaml.cs: файл с кодом C#, с которого начинается выполнение
приложения.
 MainPage.xaml: файл с визуальным интерфейсом для единственной
страницы MainPage в виде xaml.
 MainPage.xaml.cs: файл, который содержит логику MainPage на языке
C#.
 AssemblyInfo.cs: файл с кодом на языке C#, который используется для
установки настроек приложения.
2
 Мобильные приложения обычно состоят из двух основных
компонентов: дизайна (или пользовательского интерфейса) и функционала
(логика приложения, которая определяет, как оно взаимодействует с
данными и выполняет различные задачи). В Xamarin.Forms существует два
основных способа разработки дизайна приложения: с использованием XAML
и на языке C#. Оба способа имеют свои преимущества и подходят для разных
сценариев.
1. Разработка с использованием XAML:
 Декларативный подход: XAML (eXtensible Application Markup
Language) представляет собой декларативный язык разметки, который
позволяет определить структуру пользовательского интерфейса в виде
XML-подобного кода.
 Разделение дизайна и логики: Использование XAML позволяет легко
разделить дизайн от логики вашего приложения. Это облегчает
совместную работу дизайнеров и разработчиков.
 Более читабельный и изменяемый код: XAML-код часто считается
более читабельным и изменяемым, особенно для создания сложных
пользовательских интерфейсов.
Пример XAML-разметки:
<StackLayout>
<Label Text="Привет, мир!" />
<Button Text="Нажми меня" Clicked="Button_Clicked" />
</StackLayout>

Здесь мы создаем контейнер StackLayout и помещаем в него элементы

Label и Button.
2. Разработка на языке C#:
 Императивный подход: Вы можете создавать пользовательский
интерфейс и его элементы непосредственно в коде C#. Этот подход
может быть удобным, если вы предпочитаете программирование
интерфейса.

3
  Динамическое создание элементов: В коде C# вы можете динамически
создавать и настраивать элементы интерфейса, что может быть полезно
для некоторых сценариев.
Пример создания элементов интерфейса на C#:
StackLayout stackLayout = new StackLayout();
Label label = new Label { Text = "Привет, мир!" };
Button button = new Button { Text = "Нажми меня" };
button.Clicked += Button_Clicked;
stackLayout.Children.Add(label);
stackLayout.Children.Add(button);

В данном случае мы также создаем контейнер StackLayout и элементы

управления Label и Button, а также добавляем обработчик события
Button_Clicked.
Часто разработчики Xamarin.Forms комбинируют оба метода,
используя XAML для статичных пользовательских интерфейсов и C# для
динамически создаваемых элементов или динамических операций.
Создание дизайна приложения в Xamarin.Forms основано на
использовании различных контейнеров и элементов управления для
организации пользовательского интерфейса. Одним их базовых контейнеров
для компоновки элементов является StackLayout, но также есть и другие.
Вот некоторые основы создания дизайна приложения в Xamarin.Forms:
1. XAML: в Xamarin.Forms для создания пользовательского интерфейса
обычно используется XAML (eXtensible Application Markup Language).
XAML позволяет определить пользовательский интерфейс в
декларативном виде.
2. Контейнеры: Xamarin.Forms предоставляет различные контейнеры для
компоновки элементов:
 StackLayout: этот контейнер располагает элементы вертикально
(Orientation="Vertical") или горизонтально (Orientation="Horizontal")
друг за другом.

4
  Grid: Grid позволяет создавать более сложные макеты, располагая
элементы в сетке с разным количеством строк и столбцов.
 AbsoluteLayout: позволяет размещать элементы абсолютно по
координатам.
 RelativeLayout: позволяет размещать элементы относительно других
элементов.
3. Элементы управления: размещаются в контейнерах. Примеры
элементов управления в Xamarin.Forms включают Label, Button, Entry,
Image, ListView, и так далее.
4. Свойства макета: вы можете использовать свойства элементов
управления и контейнеров для настройки их внешнего вида и
расположения. Например, Margin, Padding, HorizontalOptions,
VerticalOptions, и другие свойства.
Практическая часть
Разработка страницы авторизации в приложении Xamarin.Forms
Создайте страницу авторизации в приложении Xamarin.Forms, которая
включает в себя изображение, поля для ввода логина и пароля, а также
кнопку "Войти".
Требования:
1. Создайте новый проект Xamarin.Forms в среде разработки Visual Stu-
dio (используйте шаблон «Мобильное приложение Xamarin.Forms).
2. На главной странице (MainPage) в файле MainPage.xaml.cs создайте
контейнер StackLayout и разместите в нем следующие элементы:
 изображение для авторизации;
 поле ввода логина;
 поле ввода пароля (с отображением введенного текста как пароля);
 кнопку "Войти" (можете стилизовать по вашему усмотрению).
3. Протестируйте ваше приложения используя эмулятор или мобильное
устройство.