Части приложения
Любое приложение состоит из двух частей:
- Графический интерфейс (GUI): дизайн, видимый пользователю.
- Код: обеспечивает функциональность приложения.
Этот урок посвящен созданию графического интерфейса. Функциональный код будет добавлен в последующих уроках. Результат — полноценное приложение с красивым дизайном и необходимыми действиями.
Структура проекта
Весь код (дизайн и C# код) пишется в основной папке (например, Mobile it proger). Он автоматически трансформируется в папки Android и iOS (и Windows, если разрабатываете под эту платформу). Работа с этими папками напрямую не требуется.
Структура проектов Android и iOS аналогична структуре проектов в Android Studio (Java) и Xcode (Swift/Objective-C). В них вы найдете папки assets, resources, Files, MainActivity (в Android Studio — на Java, а в Xamarin — на C#).
Файлы для описания интерфейса
Для описания графического интерфейса используются два файла:
- App.xaml: основной файл дизайна приложения. Здесь указываются темы и стили, применяемые ко всем страницам.
- MainPage.xaml: файл дизайна для конкретной страницы. Сейчас в приложении всего одна страница, поэтому дизайн основной страницы описывается в этом файле.
В этом уроке мы работаем с MainPage.xaml. App.xaml будет рассмотрен позже, при добавлении общих стилей. Принцип работы с обоими файлами одинаков.
Работа с MainPage.xaml
В файлах с расширением .xaml используются теги для вывода различных объектов: текстовые надписи, форматированный текст, кнопки, текстовые поля и многое другое.
Тег <StackLayout> удалите. Основной тег для любой новой страницы — ContentPage. Он является родительским тегом, внутри которого размещаются все элементы страницы (надписи, кнопки, поля и т.д.). Его удалять не нужно.
Контейнеры (слои)
Внутри ContentPage используется родительский элемент — контейнер (например, StackLayout). Контейнеры определяют расположение элементов на странице: друг под другом, рядом, в случайном порядке, в сетке и т.д. Подробнее о контейнерах — в последующих уроках.
StackLayout — контейнер, позволяющий размещать объекты друг под другом или рядом. Открываем и закрываем тег <StackLayout> для помещения в него элементов:
<StackLayout>
<-- Здесь будут элементы -->
</StackLayout>Без контейнера элементы накладываются друг на друга в одной точке.
Вывод текстовой надписи
Для вывода текстовой надписи используется тег <Label>. Можно создать одиночный тег, если внутрь не нужно добавлять элементы:
<Label Text="Hello, World!" TextDecorations="Underline" FontSize="20" TextTransform="Uppercase" TextColor="Red" />Атрибуты:
- Text: текст надписи.
- TextDecorations: декорации текста (например, Underline).
- FontSize: размер текста (в пикселях).
- TextTransform: преобразование текста (например, Uppercase).
- TextColor: цвет текста.
Элементы управления
- <Button>: кнопка. Пример:
<Button Text="Нажми на меня" TextColor="Blue" />- <CheckBox>: флажок.
- <RadioButton>: радиокнопка. Атрибут GroupName связывает несколько радиокнопок в одну группу, обеспечивая выбор только одного варианта.
- <Entry>: поле для ввода текста. Атрибут IsPassword="True" создает поле для ввода пароля. Placeholder — подсказка в поле.
- <Editor>: поле для ввода большого объема текста.
- <Slider>: ползунок. Необходимо добавить атрибуты VerticalOptions="CenterAndExpand".
- <Switch>: переключатель.
- <Image>: вывод изображения (атрибут Source для указания пути к картинке).
- <WebView>: вывод веб-страницы (атрибут Source для URL). Необходимо добавить атрибуты HorizontalOptions="Center" и VerticalOptions="Center".
Запуск проекта и решение проблем
Если эмулятор черный или отображается только надпись «Android», выполните следующие действия:
- В Visual Studio откройте диспетчер устройств.
- Выберите устройство, щелкнув правой кнопкой мыши.
- Выберите «Изменить».
- В настройках установите GPU Mode в значение Software.
- Сохраните изменения.
Запуск проекта может занять некоторое время, особенно в первый раз.
Комментарии в XAML
Для комментирования кода в XAML используется следующий синтаксис:
<!-- Это комментарий -->Дизайн в Xamarin Forms описывается в файлах .xaml с помощью тегов и атрибутов. Каждый тег отвечает за определенный виджет. Сочетание тегов позволяет создать необходимый дизайн приложения.