Воссоздайте этот современный пользовательский интерфейс с нуля с помощью .NET MAUI, чтобы поэкспериментировать с такими распространенными функциями, как BindableLayout, и передовыми компонентами, такими как Telerik UI for .NET MAUI CollectionView.
Каждый создаваемый нами интерфейс — это возможность освоить новые навыки, изучить новые компоненты и найти лучшие способы достижения аккуратного и успешного результата.
В разработке пользовательских интерфейсов часто существует несколько способов создания одного и того же макета. Вот почему важно выбирать подход, который делает наш код читаемым, гибким и эффективным. Распространенным примером являются повторяющиеся визуальные элементы: мы можем создать каждый из них вручную или использовать списочный подход, который позволяет интерфейсу динамически адаптироваться на основе данных.
В этой статье мы воссоздадим пользовательский интерфейс, вдохновленный дизайном Project Pad на Dribbble. Попутно мы познакомимся с компонентом CollectionView из пакета Progress Telerik UI for .NET MAUI, поработаем с привязываемыми макетами (bindable layouts), узнаем, как простым способом создавать скругленные кнопки, и многое другое!
Как будет устроено объяснение?
Чтобы вам было все понятно на 100%, я объясню, как будет выстроен процесс:
➖ Визуальная схема: перед началом вы увидите схему со скриншотом дизайна, который мы хотим получить. Этот дизайн будет разбит на блоки, каждый из которых имеет свое название и цвет. Каждый блок будет разобран отдельно.
➖ Разбор кода по блокам: в дополнение к текстовому описанию каждый экран содержит набор блоков с точными фрагментами кода, которые необходимо реализовать для получения финального результата.
➖ Пошаговый визуальный прогресс: каждое объяснение будет сопровождаться соответствующим скриншотом, чтобы вы могли видеть прогресс по мере создания интерфейса.
⚠️ Для этого дизайна мы черпали вдохновение из оригинального интерфейса на Dribbble, но внесли некоторые изменения и адаптации, чтобы привести его в соответствие с целями этой статьи.
🔧 Настройка окружения
В этой статье вы узнаете, как использовать некоторые из мощных компонентов Telerik UI for .NET MAUI. Если у вас еще не установлена библиотека .NET MAUI, посетите страницу быстрого старта, где по шагам описано, как установить Telerik UI for .NET MAUI, скачать лицензионный ключ, настроить источник пакетов Telerik и установить MCP-сервер Telerik (если это необходимо).
Разбор дизайна
Чтобы упростить задачу, я разделил дизайн на четкие блоки. Мы будем создавать каждую часть по очереди, в порядке, указанном ниже.
1. Вводный блок
Этот блок занимает первый экран нашего интерфейса целиком. Начнем с создания основного макета, который будет представлять собой Grid с тремя строками и двумя столбцами. Внутри этого макета мы добавим все элементы, соответствующие этому первому разделу.
Внутри этого Grid мы добавим следующие элементы:
➖ Главное изображение.
➖ Логотип Project Pad с названием. Для этого я добавил еще один Grid, чтобы лучше выровнять название и логотип, как показано в интерфейсе.
➖ Скругленная кнопка в нижней части:
✍️ Обратите внимание, что скруглить кнопку было очень просто. Я просто установил для свойств HeightRequest и WidthRequest одинаковое значение, а затем задал для CornerRadius половину этого значения.
В результате вы получите следующее:
Второй блок начинает другой экран, который содержит дополнительные разделы, с которыми мы поработаем позже. На данный момент мы создадим основной макет и добавим элементы для этого блока, помня о том, что все остальные разделы будут размещены внутри этого макета.
Чтобы структуру было проще понимать, я добавил комментарии-заполнители, указывающие, где должен располагаться каждый блок: блок Header (шапка), блок Categories (категории) и блок Footer (подвал).
Добавление заголовка, описания и линии-разделителя
Создание аватаров и круглой кнопки со звездой
➖ Аватары
Для аватаров я хотел познакомить вас с концепцией, которая может значительно облегчить вам жизнь: BindableLayout (привязываемый макет). Он позволил мне без труда повторить круглые кнопки и добиться аккуратного эффекта наложения.
Для этого BindableLayout я создал простую модель с цветом каждого аватара и его инициалом:
Затем я заполнил данные во ViewModel:
И наконец, для этого простого примера я установил BindingContext на AvatarViewModel в файле программной логики (code-behind) страницы:
Теперь добавьте BindableLayout в свой XAML:
🗓️ Если вы хотите узнать больше о BindableLayout, вы можете ознакомиться с этой статьей.
➖ Круглая кнопка со звездой
В результате вы получите:
3. Блок категорий
Для этого блока мы используем наш звездный компонент: Telerik UI for .NET MAUI CollectionView, который позволит нам динамически добавлять все необходимые элементы в список.
Создание модели
Начнем с создания модели с атрибутами, необходимыми для списка. Эта модель будет включать описание и цвет для каждого элемента:
Заполнение ViewModel
Теперь добавим немного тестовых данных для наполнения нашего списка:
Добавление XAML
Вам нужно добавить пространство имен, чтобы использовать компонент:
Затем добавьте Telerik CollectionView в свой XAML следующим образом:
🗓️ Telerik CollectionView — очень полезный и простой в использовании компонент. Если вы хотите узнать больше о нем, приглашаю вас ознакомиться с его официальной документацией и изучить все его возможности.
В результате вы получите следующее:
Мы добрались до нашего финального блока! Этот раздел содержит следующие элементы:
➖ Мягкий серый круг в нижней части нашего интерфейса. Чтобы воссоздать его, мы используем Ellipse.
➖ Скругленная кнопка, расположенная по центру по горизонтали:
Если вы хотите узнать больше о Ellipse in .NET MAUI, вы можете обратиться к официальной документации. С его помощью можно создать действительно интересные вещи!
В результате вы получите следующее:
Вот и все, мы закончили! 🎉 Ниже вы можете увидеть окончательный результат для обоих экранов.
Заключение
Надеюсь, эта статья поможет вам понять, как воссоздать современный пользовательский интерфейс с нуля с помощью .NET MAUI. 😎 От структурирования макетов с помощью Grid до использования BindableLayout для повторяющихся элементов и создания динамических списков с помощью Telerik CollectionView — теперь у вас есть прочная база для создания чистых и масштабируемых интерфейсов.
Самое приятное то, что эти концепции вы можете легко применять повторно и адаптировать в собственных проектах для создания более гибких и визуально привлекательных приложений. 💚
Если у вас есть вопросы или вы хотите, чтобы я подробнее осветил какую-то конкретную часть, смело оставляйте комментарий, я с радостью помогу!
До встречи в следующей статье! 🙋♀️🚀
Помните, что Telerik UI for .NET MAUI поставляется с бесплатной 30-дневной пробной версией, чтобы вы могли самостоятельно опробовать все 70+ компонентов.
Попробовать
