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

РАЗРАБОТКА МОБИЛЬНЫХ ПРИЛОЖЕНИЙ НА ПЛАТФОРМЕ XAMARIN

В Xamarin.Forms визуальный интерфейс состоит из страниц. Страница представляет собой объект класса Page, она занимает все пространство экрана. То есть то, что мы видим на экране мобильного устройства - это страница. Приложение может иметь одну или несколько страниц.

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

Возьмем созданный в прошлой теме проект HelloApp. По умолчанию весь интерфейс создается в классе App, который представляет текущее приложение:

Но данный путь не единственный. Xamarin.Forms позволяет создавать визуальный интерфейс как с помощью кода C#, так и декларативным путем с помощью языка xaml, аналогично html.

Создние интерфейса из кода C#

Добавим в проект HelloApp новый класс, который назовем MainPage. И определим в нем следующее содержимое:

Данный класс представляет страницу, поэтому наследуется от класса ContentPage. В конструкторе создается метка с текстом, которая задается в качестве содержимого страницы (this.Content = header).

Чтобы обозначить MainPage в качестве стартовой страницы, изменим класс App:

Также стоит отметить, что в Visual Studio есть готовый шаблон для добавления новых классов страниц с простейшим кодом. Так, чтобы добавить новую страницу, надо при добавлении нового элемента выбрать шаблон Forms Content Page:

Данный класс добавляется в главный проект решения (в данном случае это HelloApp (Portable)).

Добавленный класс страницы будет иметь следующий код:

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

И также в классе приложения мы можем установить эту страницу в качестве стартовой:

Хотя мы можем создавать весь интерфейс и в коде C#, но более предпочтительным способом является его описание в XAML. XAML представляет язык разметки на основе xml для создания объектов декларативным образом.

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

Во-первых, с помощью XAML мы можем отделить графический интерфейс от логики приложения, благодаря чему над разными частями приложения могут относительно автономно работать разные специалисты: над интерфейсом - дизайнеры, над кодом логики - программисты.

Во-вторых, XAML позволяет описать интерфейс более ясным и понятным способом, такой код гораздо проще поддерживать и обновлять.

XAML позволяет организовать весь пользовательский интерфейс в виде набора страниц подобно тому, как это делается в HTML. Для добавления новой страницы с кодом xaml в проект, необходимо выбрать тип элемента "Forms Xaml Page":

В результате Visual Studio добавит в проект два файла - StartPage.xaml и файл связанного кода StartPage.xaml.cs:

StartPage.xaml будет содержать разметку визуального интерфейса новой страницы:

Запуск страницы

Чтобы определить эту страницу в качестве стартовой, перейдем в проекте в файл App.cs и изменим класс App следующим образом:

Теперь в качестве главной страницы задается определяется объект класса StartPage. И если мы запустим проект, то увидим эту страницу на тестируемом устройстве.

Структура файла XAML

Файл с разметкой на xaml представляет собой обычный файл xml, и первой строкой идет стандартное определение xml-файла. Далее здесь определен элемент ContentPage, внутри которого определена метка с текстом.

В определении корневого элемента ContentPage подключаются два пространства имен с помощью атрибутов xmlns.

Пространство имен http://xamarin.com/schemas/2014/forms определяет большинство типов из Xamarin Forms, которые применяются для построения графического интерфейса.

Второе пространство имен http://schemas.microsoft.com/winfx/2009/xaml определяет ряд типов XAML и типы CLR. Так как только одно пространство имен может быть базовым, то это пространство используется с префиксом (или проекцируется на префикс) x: xmlns:x. Это значит, что те свойства элементов, которые заключены в этом пространстве имен, будут использоваться с префиксом x - x:Name или x:Class

После подключения пространств имен идет атрибут x:Class="HelloApp.StartPage, который указывает на класс, представляющий данную страницу.

Далее внутри ContentPage определены непосредственно элементы, которые и будут представлять графический интерфейс.

Элементы и их свойства

XAML предлагает очень простую и ясную схему определения различных элементов и их свойств. Каждый элемент, как и любой элемент XML, должен иметь открытый и закрытый тег, как в случае с элементом ContentPage:

Либо элемент может иметь сокращенню форму с закрывающим слешем в конце, наподобие:

Каждый элемент в XAML представляет объект определнного класса C#, а атрибуты элементов соотносятся со свойствами этих классом. Например, элемент ContentPage фактически будет представлять объект одноименного класса ContentPage, а элемент Label - объект класса Label.

Каждый элемент в xaml можно сопоставить определенному классу в C#, а каждый атрибут элемента - свойству этого класса. Однако если свойства классов могут принимать значения различных типов: string, double, int и т.д. То в XAML атрибуты элементов имеют текстовые значения:

Свойство Text класса Label в качестве значение принимает строку, поэтому здесь никаких преобразований не потребуется. Но, к примеру, свойство VerticalOptions в качестве значения принимает одну из констант перечисления LayoutOptions, например, LayoutOptions.Center. Однако в коде XAML мы присваиваем просто значение Center. Дело в том, что в Xamarin Forms действуют конвертеры типов, которые позволяют преобразовать от одного типа к другому.

Кроме простых свойств, которые могут устанавливаться в с помощью простой строки, например, , в XAML могут применяться сложные или комплексные свойства. В таких случаях свойство класса может принимать в качестве значения какой-нибудь сложный объект, который в свою очередь имеет некоторый набор свойств. Сложные свойства определяются в формате:

Например, у класса Label есть свойство Style, которое в качестве значения принимает сложный объект одноименного класса Style:

Элемент Style устанавливает стилевые свойства метки через вложенные элементы Setter.

Также простые свойства можно представить в виде сложных, например, вместо VerticalOptions="Center" написать:

Center

Также в xaml применяются прикрепляемые свойства (attached properties). Например:

Здесь определен контейнер Grid, который создает табличное представление. С помощью сложного свойства Grid.RowDefinitions определяется набор строк грида.

В элементе Label применяется прикрепляемое свойство Grid.Row, которое определено в классе Grid, но используется или прикрепляется к объекту Label. В данном случае свойство указывает, что метка будет находиться во второй строке (отсчет строк начинается с нуля).