Узнайте, как воплотить в жизнь дизайн пользовательского интерфейса экрана учетной записи в приложении .NET MAUI.
Сколько раз в месяц вы создаете новую учетную запись? Вероятно, чаще, чем вы помните. И хотя это может показаться простым процессом, первое взаимодействие способно сформировать у пользователя впечатление о всем приложении.
Разработчикам важно уделять внимание каждой детали при переносе дизайна в код. Наша цель — не просто заставить приложение работать, но и остаться верными исходному дизайну, обеспечив плавный и приятный пользовательский опыт. Именно поэтому в этой статье мы воссоздадим два экрана, вдохновленные дизайном Dribbble, воплощая их в жизнь шаг за шагом с помощью .NET MAUI.
Так что налейте чашечку кофе (или горячего шоколада, если вы сладкоежка ☕🍫), откройте Visual Studio или Visual Studio Code... и давайте начнем кодить! 🚀
Как будет устроено объяснение?
Чтобы вы все поняли на 100%, я объясню, как будет выстроен процесс:
➖ Визуальная схема: перед началом вы увидите схему со скриншотом дизайна, которого мы хотим достичь. Этот дизайн будет разделен на блоки, каждый из которых имеет название и цвет. Каждый блок будет разобран отдельно.
➖ Объяснение кода по блокам: в дополнение к текстовому описанию каждый экран включает набор блоков с точными фрагментами кода, необходимыми для реализации и получения конечного результата.
➖ Пошаговый визуальный прогресс: каждое объяснение будет сопровождаться соответствующим скриншотом, чтобы вы могли видеть прогресс по мере создания интерфейса.
⚠️ Для этого дизайна мы вдохновлялись оригинальным интерфейсом с Dribbble, но внесли некоторые изменения и корректировки, чтобы привести его в соответствие с целями этой статьи.
🔧 Настройка окружения
В этой публикации вы узнаете, как использовать некоторые мощные компоненты Progress Telerik UI for .NET MAUI. Если у вас еще не установлена библиотека .NET MAUI, посетите страницу быстрого старта, где по шагам объясняется, как установить Telerik UI for .NET MAUI, скачать файл лицензии, настроить источник пакетов Telerik и установить MCP-сервер Telerik (при необходимости).
Разбор дизайна
Чтобы вам было проще разобраться, я разделил дизайн на четкие блоки. Мы будем создавать каждую часть по очереди, в порядке, указанном ниже.
1. Шаг с изображением цветка
Начнем с создания главной страницы, которую мы назовем WelcomeBackPage.xaml. Она будет содержать компоненты как из Шага 1, так и из Шага 2. Для основной разметки мы используем Grid, разделенный на две строки.
Этот Grid состоит из следующих элементов:
🔹 Шапка с изображением: в первой строке мы добавим фоновое изображение, используя свойство AspectFill, что позволит ему заполнить доступную ширину, сохраняя привлекательный вид на экранах разного размера.
🔹 Основной контейнер: во второй строке мы добавим элемент Border. В данном случае мы используем элемент управления Border из библиотеки Telerik UI for .NET MAUI, поэтому убедитесь, что добавили пространство имен Telerik на свою страницу:
Чтобы создать эффект наложения, нам нужно всего лишь применить отрицательный верхний отступ (margin). Это создает впечатление, что белый контейнер расположен поверх изображения. Наконец, внутри Border мы добавим VerticalStackLayout, который используем на следующих шагах для размещения надписей и кнопок.
И в результате вы получите примерно следующее:
2. Шаг приветственной информации
Для второго шага у нас уже есть основа из предыдущего раздела, когда мы добавили VerticalStackLayout. Это означает, что все элементы управления, которые мы добавим с этого момента, должны располагаться внутри этого контейнера разметки.
Начнем с добавления первых трех элементов Label:
Затем добавим кнопки
Должен признать, я абсолютно обожаю эти кнопки! 😍😍 Мягкий градиент придает им современный и элегантный вид, благодаря которому интерфейс действительно выделяется.
Для достижения такого эффекта мы используем LinearGradientBrush из .NET MAUI вместе с тремя точками градиента (gradient stops). Это позволяет плавно смешивать несколько цветов и создавать красивый градиент, показанный в дизайне.
Реализация выглядит следующим образом:
✍️ Если вы хотите узнать больше о LinearGradientBrush, рекомендую прочитать эту статью.
Кнопка входа
Наконец, давайте добавим текст, отображаемый для пользователей, у которых еще нет учетной записи. Обратите внимание, что этот текст использует два разных стиля в рамках одной метки. Вместо создания двух элементов Label мы используем FormattedString, что позволяет применять несколько стилей в пределах одного элемента Label.
И в результате вы получите примерно следующее:
3. Шаг создания учетной записи
Мы добрались до третьего шага, ура! 🎉
На этом шаге мы создадим новую страницу с именем CreateAccountPage.xaml, которая будет содержать все элементы, необходимые для экрана создания учетной записи.
Как и предыдущая страница, этот экран включает шапку с изображением и белый контейнер содержимого с закругленными верхними углами.
Теперь добавим заголовок и описание:
Добавим форму
Для формы мы воспользуемся компонентом DataForm из Telerik UI for .NET MAUI. Этот элемент работает как по волшебству и помогает сэкономить массу времени при создании форм! ✨
Чтобы использовать его на XAML-странице, обязательно добавьте следующее пространство имен:
Создание модели
Первый шаг — определить модель, которая представляет данные, собираемые нашей формой. Каждое свойство включает атрибуты, описывающие способ его отображения, обязательность заполнения и тип принимаемых данных. Telerik DataForm использует эти атрибуты для автоматической генерации соответствующих полей ввода и правил валидации.
Наша модель должна выглядеть следующим образом:
Следующий шаг — присвоить нашу модель свойству BindingContext страницы. Чтобы пример оставался простым, мы создадим новый экземпляр модели SignUp прямо в конструкторе страницы.
Добавление в XAML
Наконец, мы можем добавить его в наш XAML. Просто включите RadDataForm следующим образом:
Вот и все! Ваша динамическая форма готова и полностью интегрирована в страницу. 😎
Добавим кнопку
Разделитель и текст
И в результате вы получите примерно следующее:
Вот и все, мы закончили! 🎉 Ниже вы можете увидеть конечный результат для обоих экранов.
Заключение
На этом все! Надеюсь, эта статья поможет вам создавать красивые пользовательские интерфейсы в .NET MAUI!
Мы создали два экрана создания учетной записи, вдохновленных дизайном с Dribbble. По ходу дела мы рассмотрели, как структурировать макеты с помощью Grid, создавать эффекты наложения, использовать градиенты и настраивать интерфейс с помощью RadBorder и DataForm из Telerik UI for .NET MAUI.
Как вы видите, всего на двух экранах мы рассмотрели несколько полезных советов, которые вы легко сможете применить в собственных приложениях.
Я призываю вас продолжать исследования, экспериментировать и узнавать что-то новое каждый день. 💚 Увидимся в следующей статье! 🙋♀️🚀
